nicht angemeldet
div-Layout mit CSS will nicht so wie ich ...
Hallo,
ich experimentiere gerade mit einem div-Layout.
Die Seite soll aus 4 divs bestehen.
Eines oben (mainmenu), so breit wie nötig, fixe Höhe.
Danach kommen zwei divs nebeneinander, das linke (submenu) hat eine feste Breite, das rechte (content) wird so breit wie nötig.
Diese beiden haben keine fixierte Höhe, die soll sich nach dem Inhalt richten.
Bis hierher ist das auch noch kein Problem.
Jetzt kommt das problematische div (footer).
Es soll über die gesamte Breite gehen, und sich unten an das höhere der beiden nebeneinanderliegenden divs (submenu, content) anlegen.
Das kriege ich aber irgendwie nicht hin.
Das Problem ist, daß ich die top-Position nicht kenne, da die Höhe von submenu und content variabel ist.
Hier mal mein experimenteller Code - ich weiß nur nicht, wie ich das div footer positionieren soll.
Die Hintergrundfarben hab ich nur eingefügt, damit ich erkenne, welches div bis wohin geht, die kommen natürlich auf der fertigen Seite nicht so!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Testseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
body { margin:0; padding:0; background-color:fuchsia; }
div { padding:0.5ex; }
#mainmenu { position:absolute; left:0; top:0; width:auto; height:20ex; background-color:blue; }
#submenu { position:absolute; left:0; top:0; margin-top:21ex; width:20ex; background-color:silver; }
#content { position:absolute; left:0; top:0; margin-top:21ex; margin-left:20ex; width:auto; background-color:red; }
#footer { /*position:???; top:???; */ left:0; width:100%; text-align:center; background-color:yellow; }
</style>
</head>
<body>
<div id="mainmenu">
Hier die Haupt-Navigation, die ziemlich breit werden kann.
</div>
<div id="submenu">
Submenu
test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br>
</div>
<div id="content">
Inhalt<br>
test test test test test test test test test test test test test test test test test test test
test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br>
</div>
<div id="footer">
Footer...
</div>
</body>
</html>
Ich hab schon ziemlich viel mit float, clear und position rumgespielt, aber scheinbar die richtige Kombination noch nicht erwischt.
Seh ich den Baum vor lauter Wäldern nicht?
Ach ja, sollte zumindest in Mozilla (+Derivate), Opera, Internet Explorer > 5.0 einigermaßen tun...
Mit kleineren Fehlern wie dem Abstand zwischen mainmenu und submenu+content im IE kann ich leben.
Vielen Dank im Voraus,
Andreas
-
Hi Andreas,
Jetzt kommt das problematische div (footer). Es soll über die gesamte Breite gehen, und sich unten an das höhere der beiden nebeneinanderliegenden divs (submenu, content) anlegen. Das Problem ist, daß ich die top-Position nicht kenne, da die Höhe von submenu und content variabel ist.
und genau aus diesem Grund musst du dich von absoluter Positionierung trennen. Ein simpler Aufbau mit float/clear reicht hier vollkommen aus:
#header { border:1px solid #f00; }
#links { float:left; width:200px; border:1px solid #0f0; }
#rechts { float:left; border:1px solid #00f; }
#footer { clear:left; border:1px solid #000; }Die Rahmen verdeutlichen die Aufteilung. Der Inhalt sieht dann beispielsweise wie folgt aus.
<div id="header">
<p>header</p>
</div><div id="links">
<p>links</p>
<p>bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br /></p>
</div><div id="rechts">
<p>rechts</p>
</div><div id="footer">
<p>footer</p>
</div>LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Hi Andreas,
Jetzt kommt das problematische div (footer). Es soll über die gesamte Breite gehen, und sich unten an das höhere der beiden nebeneinanderliegenden divs (submenu, content) anlegen. Das Problem ist, daß ich die top-Position nicht kenne, da die Höhe von submenu und content variabel ist.
und genau aus diesem Grund musst du dich von absoluter Positionierung trennen. Ein simpler Aufbau mit float/clear reicht hier vollkommen aus:
#header { border:1px solid #f00; }
#links { float:left; width:200px; border:1px solid #0f0; }
#rechts { float:left; border:1px solid #00f; }
#footer { clear:left; border:1px solid #000; }<div id="header">
<p>header</p>
</div>
<div id="links">
<p>links</p>
<p>bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br /></p>
</div>
<div id="rechts">
<p>rechts</p>
</div>
<div id="footer">
<p>footer</p>
</div>Danke, sieht im ersten Moment gut aus.
Wenn aber viel Inhalt in "rechts" drin ist, schiebt Mozilla das aber unter das div "links", so daß alle 4 Divs untereinander stehen.Naja, mal weiterexperimentieren...
Andreas-
Hi,
Danke, sieht im ersten Moment gut aus.
Wenn aber viel Inhalt in "rechts" drin ist, schiebt Mozilla das aber unter das div "links", so daß alle 4 Divs untereinander stehen.ja, es "floatet" und das ist eigentlich sehr schön ;) Vielleicht gefällt dir aber auch
#links { float:left; width:20%; border:1px solid #0f0; }
#rechts { float:left; width:79%; border:1px solid #00f; }besser.
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Hi,
Tach
Danke, sieht im ersten Moment gut aus.
Wenn aber viel Inhalt in "rechts" drin ist, schiebt Mozilla das aber unter das div "links", so daß alle 4 Divs untereinander stehen.ja, es "floatet" und das ist eigentlich sehr schön ;) Vielleicht gefällt dir aber auch
#links { float:left; width:20%; border:1px solid #0f0; }
#rechts { float:left; width:79%; border:1px solid #00f; }besser.
ne, nicht wirklich. Der linke Teil muß eine fixe Breite haben.
Andreas
-
-
-
-
Hallo,
werd wahrscheinlich doch wieder ne Tabelle benutzen.
Damit ist das sooooo einfach...Andreas