Frage stellen
ich habe ein Problem und ich bin mittlerweile der Meinung, dass es daran liegt dass ich mein Layout von links nach recht aufbaue.
Aufgeteilt in drei Spalten, die linke und rechte Spalte wird mit einer Grafik versehen die sich von ganz oben bis ganz unten (height:100%) erstrecken soll. In die Mittlere Spalte trage ich meinen Content ein, bestehen aus Header, Content und Footer. Auch hier soll sich die spalte auf die ganze Seite mit einer Hintergrundgrafik erstrecken.
Leider schaffe ich es nicht dass die Spalten sich über die ganze Seite erstrecken. Die Lösung dass ich die Spalten-Höhe auf eine feste Pixelgröße ausrichte find ich gar nicht gut
Hier habe ich das mal beispielhaft nachgebaut (hoffe es ist nicht zu kompliziert
):- Code: Alles auswählen
<head>
<style type="text/css"><!--
/********************** ++++ *****//********************** ++++ *****/
#head{
width:700px;
height:100px;
border: solid #000;
background-color:#6F0;
}
#content{
position:relative;
border: solid #C0F;
background-color:#FF0;
width:700px;
}
#foot{
position:relative;
width:700px;
height:100px;
border: solid #C00;
background-color:#6F0;
}
/********************** ++++ *****/
#spalte_links{
width:150px;
border:solid #0F0;
}
#spalte_mitte{
width:150px;
border:solid #0F0;
}
#spalte_rechts{
width:150px;
border:solid #0F0;
}
/********************** ++++ *****/
body {
width:100%;
min-height:100%;
margin:0px auto;
}
* html body
{
height:100%;
}
/********************** ++++ *****/
#sp1{
float:left;
height:100px;
width:100px;
border:solid;
background-color:#6FF;
}
#sp2{
float:left;
padding-left:50px;
width:800px;
height:1000px;
background-color:#999;
border:solid;
}
#sp3{
float:right;
height:100px;
width:100px;
background-color:#6FF;
border:solid;
}
-->
</style>
</head>
<body>
<div id="rahmen">
<div id="sp1"> diese div sollte bis ans seiten ende gehen </div>
<div id="sp2">
<div id="head"> </div>
<div id="content">
<div id="spalte_links" style="float:left">
hallo das ist ein test<br/>
</div>
<div id="spalte_mitte" style="float:left">
hallo das ist ein test<br/>hallo das ist ein test<br/>hallo das ist ein test<br/>hallo das ist ein test<br/>
hallo das ist ein test<br/>hallo das ist ein test<br/>hallo das ist ein test<br/>hallo das ist ein test<br/>
</div>
<div id="spalte_rechts" style="float:left">
hallo das ist ein test<br/>hallo das ist ein test<br/>hallo das ist ein test<br/>hallo das ist ein test<br/>
hallo das ist ein test<br/>hallo das ist ein test<br/>hallo das ist ein test<br/>hallo das ist ein test<br/>
hallo das ist ein test<br/>hallo das ist ein test<br/>hallo das ist ein test<br/>hallo das ist ein test<br/>
</div>
<div style="clear:both"> </div>
</div>
<div id="foot" > </div>
</div>
<div id="sp3"> </div>
</div>
</body>
</html>
jemand eine Idee?
