Hi Leute,
ich hab hier mal ein zweispaltiges Div-Layout, links der Block mit der Navigation und rechts Header plus Content.
Zu meinen Problemen:
1) Das Layout wird sauber in IE 7.0 und alle Versionen von Mozilla Firefox angezeigt, jedoch in IE 6.0 und niedriger glaube ich, wird der rechte Block komplett nach unten verschoben. Ich denke, dass es an einem Float-Problem liegt. Kann mir jemand das Layout für IE 5.0 aufwärts und Mozilla Firefox optimieren?!
2) Ich möchte, dass das Layout bei allen Auflösungen eine 100%tige Höhe hat, somit muss die Lücke im Bottom abgedeckt sein, ist das villeicht machtbar?!
Hier mein HTML + CSS-Code:
Besten Dank,
Cuez
ich hab hier mal ein zweispaltiges Div-Layout, links der Block mit der Navigation und rechts Header plus Content.
Zu meinen Problemen:
1) Das Layout wird sauber in IE 7.0 und alle Versionen von Mozilla Firefox angezeigt, jedoch in IE 6.0 und niedriger glaube ich, wird der rechte Block komplett nach unten verschoben. Ich denke, dass es an einem Float-Problem liegt. Kann mir jemand das Layout für IE 5.0 aufwärts und Mozilla Firefox optimieren?!
2) Ich möchte, dass das Layout bei allen Auflösungen eine 100%tige Höhe hat, somit muss die Lücke im Bottom abgedeckt sein, ist das villeicht machtbar?!
Hier mein HTML + CSS-Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>t e s t</title>
<style type="text/css">
<!--
body {
background-color: #b6b7b7;
background-position:center;
color:000;
font:normal 14px Arial, Verdanan, Tahoma;
margin: 0px;
padding:0px;
}
#container {
margin: 0px auto;
width: 950px;
height: 100%;
min-height: 600px;
background-color:#2881ba;
}
#header {
color:white;
width:650px;
height:200px;
background-color:#000;
}
#navigation {
float:left;
width:300px;
}
#navigation * {
display: block;
padding: 0px;
margin: 0px;
}
#maincontent {
width:650px;
margin: 0px;
margin-left: 300px;
}
#main {
background-color: #dfdfdf;
min-height: 500px;
padding:20px;
}
#footer {
clear: both;
width: 950px;
height: 31px;
background-color:#818181;
}
-->
</style>
</head>
<body>
<div id="container">
<!-- Linke Spalte START-->
<div id="navigation">Navi</div>
<!-- Linke Spalte END-->
<!-- Rechte Spalte START -->
<div id="maincontent">
<!-- HEADER START -->
<div id="header">Header</div>
<!-- HEADER END -->
<!-- MAIN START -->
<div id="main">Content</div>
<!-- MAIN ENDE -->
</div>
<!-- Rechte Spalte Ende -->
<!-- FOOTER START -->
<div id="footer">Footer</div>
<!-- FOOTER END -->
</div>
</body>
</html>
Cuez
Kommentar