nicht angemeldet
<div> Layergröße automatisch angleichen an anderen Layer
Hallo,
ich habe mir so ein kleines desing gebastelt und es sogar (fast) auf Anhieb geschafft das ganze mittels xhtml und css gutaussehen zu lasen im browser.
Der Seitenaufbau ist wie folgt
<ALL>
<HEADER>
<BUTTONS>
</HEADER>
<MAIN>
<LINKS><RECHTS>
</MAIN>
<FOOTER>
</ALL>
Jetzt komme ich jedoch an ein kleines Problem
Der Header und Footer schauen schon mal klasse aus.
LINKS und Rechts wird eine dynamische Menustruktur dargestellt.
Wenn eines dieser Menus länger ist als der Inhalt der sich in MAIN befindet, wird das Hintergrundbild von Main nicht mehr verlängert.
Mein letzter Ausweg wäre LINKS und RECHTS in eine Tabelle hineinzuverfrachten. Aber ich wollte mal wissen ob es auch anderes geht.
So das sich die Höhe des MAIN Layers automatisch an den LAYERN Links und Rechts orientiert.
Hier mal mein Code:
CSS:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#box {
margin:0px auto;
width:1024px;
}
#header {
height: 195px;
background-image:url(images/frame_header.jpg);
}
#main {
padding-top:0px;
background-image:url(images/frame_middle.jpg);
background-repeat:repeat-y;
}
#footer{
float:left;
width:1024px;
height: 191px;
background-image:url(images/frame_footer.jpg);
}
#buttons {
padding-top:147px;
padding-right:250px;
text-align:right;
}
#links {
font-size:14px;
width: 142px;
margin-left:68px;
float:left;
}
#rechts {
width: 142px;
margin-right:64px;
float:right;
}
HTML:
<div id="box">
<div id="header">
<div id="buttons">
<img src="images/but_rot_kl.jpg" /><img src="images/but_blau_kl.jpg" /><img src="images/but_gruen_kl.jpg" /><img src="images/but_gelb_kl.jpg" />
</div>
</div>
<div id="main">
<div id="links">Content for id "links" Goes Here</div>
<div id="rechts">Content for id "rechts" Goes Here</div>
<table width="590" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>Content for id "MAIN" Goes Here
</td>
</tr>
</table>
</div>
<div id="footer"></div>
</div>
und hier ein Beispiel wie es eben nicht aussehen soll: http://www.mumemi.com/shop/
Danke für eure Bemühungen.
Gruß David
-
So habe es selber hinbekommen, dank dieser Vorlage.
Klappt super.http://www.tanfa.co.uk/css/layouts/flexi_floats/