CSS Header und Footer verschieben sich

Haloman

Lt. Commander
Registriert
Jan. 2005
Beiträge
1.468
Hallo,

hab heute mal ein basis Layout erstellt. Es scheint auch alles zu funzen unter IE8. Aber wenn ich einen Rahmen erstelle der sich um alle Elemente legt verschiebt sich der Header und der Footer. So das man den Hintergrund vom #wrapper sieht.



Hier mal der Code:

<html>
<head>
<title></title>
</head
<body>


<style type="text/css">
<!--
html{
margin: 0px;
padding: 0px;
}

body{
margin: 0px;
padding: 0px;
text-align: center;
background-color: #D2D2D2;
}

p, div, h1, h2, h3, h4, h5, span, ol, li, ul
{
margin: 0px;
padding: 0px;
}

.clear{
clear: both;

}

#wrapper{
width: 770px;
background-color: #38D6D6;
margin: 0px auto;
border: solid 5px black;


}

#header{
height: 104px;
background-color: #9A1D75;

}

#navi {

width:770px;
background-color: #720C5E;
margin: 0px;
padding: 0px;
height: 50px;
}

#navi ul{
list-style: none;
line-height: 30px;
}
#navi ul li
{
float: left;
line-height: 50px;
width: 154px;
}

#navi ul li a
{
text-decoration: none;
color: #000000;
display: block;
padding: 15px;
}

#navi ul li a:hover
{
background-color: #FFFFFF;
}

#content {
background-color: #888EBD;
width: 770px;
margin:0px;
padding: 0px;
height: 600px;
text-align: left;

}

#content p{
margin-left: 15px;
margin-top: 25px;
}

#footer{
height: 50px;
background-color: #515991;

}

#footer h4
{
font-size: 12px;
line-height: 50px;
}
#footer h4 a
{
color: black;
text-decoration: none;
}
#footer h4 a:hover
{
text-decoration: underline;
}
-->
</style>



<div id="wrapper">
<div id="header">

</div>
<div id="navi">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Termine</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, ut adipiscing vestibulum dui fusce consequat. Et at malesuada. Et temporibus, vestibulum
fringilla tempus leo eget fermentum arcu, pede sapien lacinia scelerisque, magna porttitor vitae vehicula sit dui, diam
nulla orci porta. Integer maecenas condimentum dui justo nec risus, ac aliquam id. Neque sit sit. Dictumst mi cum sagittis</p>

<p> pulvinar, consectetuer eget, bibendum odio justo vitae nec enim sollicitudin, donec tincidunt turpis sodales. Sodales lacus
velit lorem et quis, nulla mauris vel in sem, interdum in cursus quam eget. Aliquam euismod ornare, fermentum dui urna nulla,
praesent eros non, ultricies rhoncus ut litora odio nisl. Viverra diam ut et amet, aliqua praesent ac, vehicula diam morbi,
id quis a aliquam. Commodo mollis lectus vel eu, magna ipsum urna nibh, sit venenatis pellentesque. Dui convallis consequat
quam sit proin, amet mi. </p>

<br class="clear"/>


</div>
<div id="footer">
<h4><a href="#">Impressum</a></h4>

</div>

</div>



</body>

</html>
 
servus,

ich würd mal sagen dass du header und footer dann schon relativ platzieren musst (da ist ja nix zugewiesen). übrigens kannst du ja auch mit z-index bestimmen welches divs sich nach welchem richtet ;)
 
Ich hab hier nur den IE6, konnte die Verschiebung des Headers und des Footers aber dennoch nachvollziehen.
Wenn Du die Breite für Header und Footer mit >>width:770px;<< festlegst, verschwindet Dein Problem. Dann sieht Deine Seite zumindest im IE6 und in Chrome korrekt (und gleich) aus. Weitere Browser kann ich hier nicht testen...

Edit:
Die Seite sieht doch nicht bei beiden Browsern gleich aus. Unter Chrome ist unter der Navigationsleiste ebenfalls der Hintergrund des Wrappers zu sehen. Das kannst Du beheben, indem Du aus

Code:
#content p{
margin-left: 15px;
margin-top: 25px;
}

Code:
#content p{
padding-left: 15px;
padding-top: 25px;
}

machst.
 
Zuletzt bearbeitet:
Zurück
Oben