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:
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>