nicht angemeldet
Ich will ein Layout machen, dass ungefähr so wie folgt aussieht. Dabei soll alle 3 divs bündig mit dem Viewpoint enden:
____________________________
| |_________3__________| 1+2 div#links
| 1 | |
|- - - -| | 3 div#rechtsoben
| | 4 |
| 2 | | 4 div#rechtunten
| | |
|_______|____________________|
1 und 2 ist zusammen ein Div-Container. Die 1 soll schwarz sein und die 2 ein Farbverlauf von schwarz zu blau sein (gezogenes Bild 3 x 800px).
Dem Container habe ich height:100% zugewiesen, sowie dem Bild im Bereich 2. Das Bild zieht es jetzt aber über den Div-Container nach unten hinaus (Firefox) oder den gesamten Container zieht es auf über 100% (IE).
Was habe ich falsch gemacht?
Quellcode:
<style type="text/css">
html {
width:100%; height:100%;
}
body {
width:100%; height:100%;
background-color:none;
color:black;
}
div#links {
margin-top: 0px; margin-left: 0px;
float: left;
width: 162px; height: 100%;
padding: 0px;
border: 1px solid red;
}
div#rechtsoben {
margin-top: 0px; margin-left:170px; margin-right: 0px;
height: 100px;
padding: 0px;
border: 1px solid red;
}
div#rechtsunten {
margin-top: 10px; margin-left: 170px;
margin-right: 0px; margin-bottom: 50px;
height: 100%;
padding: 0px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="links">
<div style="background-color:black; height:200px; width:100%; padding:0px; margin:0px"></div>
<img src="pics/vertical.gif" style="width:100%; height:100%" alt="">
</div>
<div id="rechtsoben">
<img src="pics/horizontal.gif" style="width:100%; height:100%" alt="">
</div>
<div id="rechtsunten">
<p>INHALT<br>INHALT<br>INHALT</p>
</div>