Seite 1 von 2
Header mittig setzen
Verfasst: Do 17. Nov 2011, 10:47
von Patrick
Huhu zusammen,
gibts eine andere möglichkeit seinen header bzw. auch den footer und den hauptbereich mittig zu setzten als mit dem margin?
Derzeit habe ich es so. Der ist aber nicht mittig.
Code: Alles auswählen
#header {
height: 220px;
width: 900px;
background-color: transparent;
background-image: url(http://file1.npage.de/009238/11/bilder/header_2011.gif);
color: #CCC;
margin: 10px 350px 30px 350px;
border-width: 5px;
border-style: solid;
border-color: #775121;
}
Re: Header mittig setzen
Verfasst: Do 17. Nov 2011, 18:17
von goefi-chiangmai
normalerweise macht man es so,
Re: Header mittig setzen
Verfasst: Do 17. Nov 2011, 18:26
von Patrick
beim header geht es, beim main und footer nicht :-/
Re: Header mittig setzen
Verfasst: Do 17. Nov 2011, 18:30
von Patrick
Also, wenn ich das jetzt beim header und footer mache verzieht sich alles komplett
http://patschwork.npage.de/zum-shop_59501426.html
Re: Header mittig setzen
Verfasst: Do 17. Nov 2011, 18:45
von goefi-chiangmai
normalerweise macht man das ja nicht im header sondern in einem div "aussen" oder "wrap" eigentlich egal wie in nennst.
den setzt du mittig und dann kommt alles rein
Re: Header mittig setzen
Verfasst: Do 17. Nov 2011, 19:25
von Patrick
Dass heiß, ich muss in meinem code noch ein "div" einbauen? Wo muss ich den denn einpflegen?
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PatschWorks</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<style type="text/css">
h1 {
h1 font-family: 'Buda', arial, serif;
font-size: 20px;
color: #FFF111;
}
h2 {
font-family: 'Buda', arial, serif;
font-size: 20px;
color: #000000;
}
a:link {
font-family: 'Buda', arial, serif;
color:#B19667;
font-size:16px;
text-decoration:none
}
a:visited {
font-family: 'Buda', arial, serif;
color:#B19667;
font-size:16px;
text-decoration:none
}
a:active {
buda;color:#775121;
font-size:16px;
text-decoration:none
}
a:hover {
font-family: 'Buda', arial, serif;
color:#9b1515;
font-size:16px;
text-decoration:none
}
body {
background-image:url(http://file1.npage.de/009238/11/bilder/hg_braun1.gif);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
background-color: #D1CCBD;
font-family: 'Buda', arial, serif;
font-size: 16px;
padding: 10px;
margin: 0;
}
#header {
height: 220px;
width: 900px;
background-color: transparent;
background-image: url(http://file1.npage.de/009238/11/bilder/header_2011.gif);
color: #CCC;
margin: 10px 350px 10px 350px;
border-width: 5px;
border-style: solid;
border-color: #775121;
}
#main {
width: 880px;
border-width: 5px;
border-style: solid;
border-color: #775121;
background-image: url(http://file1.npage.de/009238/11/bilder/hg_2.jpg);
background-repeat: repeat;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 200px;
}
#fuss{
width: 900px;
height: 60px;
font-family: 'Buda', arial, serif;
font-size: 16px;
color: #775121;
background-color: transparent;
background-image: url(http://file1.npage.de/009238/11/bilder/hg_2.jpg);
border-width: 5px;
border-style: solid;
border-color: #775121;
padding: 0;
margin: 30px 10px 10px 200px;
}
#left {
background-color:transparent;
padding: 0;
border: 0px solid #f09;
margin: 10;
width: 180px;
position: absolute;
top: 280px;
left: 0;
margin: 10px 200px 10px 160px;
}
/* navi Oben
---------------------------------------------------------------*/
.menuoben {
display: block;
width: 147px;
height: 30px;
line-height: 25px;
text-align: center;
text-decoration: none;
font-family: 'Buda', arial, serif;
font-size: 14px;
color: #999999;
background-color: #775121;
background-image: url();
border: solid 1px #B19667;
}
.menuoben:hover {
display: block;
width: 147px;
height: 30px;
line-height: 25px;
text-align: right;
text-decoration: none;
font-family: 'Buda', arial, serif;
font-size: 14px;
color: #775121;
background-color: ;
background-image: url(http://file1.npage.de/008528/63/bilder/button_gross_2.png);
border: solid px #775121;
margin-bottom: 0px;
}
/* Navi Links
-------------------------------------- */
#navi {
float: left;
width: 150px;
background-color: transparent;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-size: 1px;
color: #775121;
margin-left: 10px;
}
#menulink {
display: block;
width: 150px;
height: 20px;
line-height:25px;
text-align: left;
text-decoration: none;
font-family: 'Buda', arial, serif;
font-size: 15px;
color: #DFC382;
background-color: ;
background-image: url();
}
#menulink:hover {
display: block;
width: 150px;
height: 20px;
line-height: 25px;
text-align: left;
text-decoration: none;
font-family: 'Buda', arial, serif;
font-size: 17px;
color: #DFDE9C;
background-color: ;
background-image: url();
}
</style>
<body>
<div id="header">
</div>
<div id="left">
<div id="navi">
<ul>
<li><u><span style="font-family:'Times New Roman',Times,serif; color: #DFC382; font-weight:bold; font-size:18px"><u>Holzdeko</u></span></u></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Buchstaben</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Zahlen</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Schlüsselbretter</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Aufsteller</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Tierzubehör</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Sonstiges</a></li>
</ul> <br><br><br><br><br><br><br>
<ul>
<li><span style="font-family:'Times New Roman',Times,serif; color: #DFC382; font-weight:bold; font-size:18px"><u>Malerei</u></span></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Acryl</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Pastell</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Ölpastell</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Monochrome</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Illustration</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Sonderwünsche?</a></li>
</ul><br><br><br><br><br><br><br>
<ul>
<li><u><span style="font-family:'Times New Roman',Times,serif; color: #DFC382; font-weight:bold; font-size:18px"><u>Textilien</u></span></u></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Hundemäntel</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Taschen</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Handytaschen</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Tischdecken</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Bezüge</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Sonstiges</a></li>
</ul><br><br><br><br><br><br><br>
<ul>
<li><span style="font-family:'Times New Roman',Times,serif; color: #DFC382; font-weight:bold; font-size:18px"><u>SALE%</u></span></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• B-Ware</a></li>
<li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Sonderangebote</a></li>
</ul><br><br><br><br><br><br><br>
<ul>
<li><span style="font-family:'Times New Roman',Times,serif; color: #DFC382; font-weight:bold; font-size:18px"><u>Sonderwünsche?</u></span></li>
<li><a href="http://patschwork.npage.de/kontakt.html" id="menulink">» Kontaktieren</a></li>
</ul><br><br><br><br><br><br><br>
</div>
<div id="main">
Re: Header mittig setzen
Verfasst: Do 17. Nov 2011, 19:30
von goefi-chiangmai
Ja das ganze verpacken in einen div.
anfang zuoberst und ende des div zuunderst
Re: Header mittig setzen
Verfasst: Do 17. Nov 2011, 19:36
von Patrick
ist das hier ok?
kann ich das nutzen?
Code: Alles auswählen
#aussen {
width: 900px;
margin-right: auto;
margin-left: auto;
background-color:red ;
border: 0px solid transparent;
background-image: url(http://file1.npage.de/009238/11/bilder/hg_2.jpg);
background-attachment: fixed;
background-repeat: repeat;
background-position: center center;
}
Re: Header mittig setzen
Verfasst: Do 17. Nov 2011, 20:00
von goefi-chiangmai
klar
aber weiss nicht ob du da wirklich nochmals einen zusätzlichen hintergrund möchtest, hast aufjedenfall einnen drinn,
und breite, mit der zusätzlichen navi wo du dann reinmachen willst links, muss danach breiter werden als 900
Re: Header mittig setzen
Verfasst: Do 17. Nov 2011, 20:03
von Patrick
Na aber wo muss ich das einpflegen?
Was meinst du mit es muss breiter werden als 900px? Wegen der linken navi? Muss ich dann die Breite der Navi dazu adieren?