Guten Abend,
bin ein bisschen am verzweifeln...
Ich möchte ein Seitenlayout mit DIV's gestalten. Dabei soll es eine Kopf- und eine Fußzeile geben. Diese sollen immer sichtbar sein. Dazwischen soll ein viewport sein, der sich der Größe des Browserfensters anpasst. In diesen Viewport kommt der Content, den ich mit margin-left:250px; von der Navigation (im Viewport)in Abstand bringen möchte. Die Navigation selbst soll auch gefixed sein.
Hoffe ich habe nicht wirrr geschrieben.
Ohne die Fixpositionen klappt es. Das ist auch der Code:
HTML-Code:
<!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" xml:lang="en" lang="en">
<head>
<title>Home</title>
<style type="text/css" media="all">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color:blue;
min-height:100%;
}
#head {
height:50px;
background-color:pink;
}
#viewport {
height: 100%;
background-color:red;
}
#foot {
position: relative;
height:20px;
margin-top: -20px;
background-color:white;
}
#content {
display:block;
overflow:auto;
position:absolute;
top:50px;
bottom:20px;
width:2600px;
margin-left:251px;
border:none;
background-color:yellow;
}
</style>
</head>
<body>
<div id="viewport">
<div id="head">header</div>
<div id="content"> </div>
</div>
<div id="foot">footer</div>
</body>
</html>
Der Content ist 2600px breit, die Kopf- und Fußzeile geht aber nur auf Bildschirmgröße mit. Damit muss ich leben, wenn ich divs nehme, oder?
Vielleicht kann mir jemand ein Tip geben, was ich lesen muss. Oder wie ich an die sache hern gehen muss, oder geht dieser Fall besser mit Tabellen (die habe ich schon fertig
)
Liebe Grüße
JohnnyBoy