nicht angemeldet
2 Spalten-Layout mit CSS
Hallo!
Ich wage behaupten zu können, dass ich mich einigermaßen mit CSS und HTML auskenne, jedoch arbeite ich nun schon den ganzen Tag an einem Layout, dass so mit Tabellen kein Problem wäre, ich es jedoch mit reinem XHTML und CSS nicht hinbekomme.
So sollte es aussehen:
------------------------------------------------------------+
HEADER |
------------------------------------------------------------+
| |
| |
| |
| |
MENU | CONTENT |
float:left; | width: Rest des Browserfensters |
width:250px; | |
| |
| |
| |
| |
| |
-----------------+------------------------------------------+
| FOOTER |
| clear:left; |
+-----------------------------------------------------------+
So, jetzt habe ich das Problem, dass das Menü-div, obwohl es keinen bzw. nicht so viel) Inhalt hat, genausu groß sein soll wie das Inhalts-div. Leider ist dem nicht so, weil die Browser alle Elemete wirklich nur so groß machen, wie sie für den Inhalt sein müssen. Dieser Umstand stört hier natürlich.
Jetzt ist mir schon der Trick eingefallen, dem gesmaten body die Hintergrund-Farbe des Menüs zu geben und jedem anderen Element seine eigene Farbe zuzuweisen. Außerdem erhielt das Inhalts-div einen linken Rand, so dass es dann ausschaut, als ob das Menü wirklich so groß ist, wie das Inhalts-div. Hierbei ergibt sich natürlich das Problem, dass ich dann unter dem Footer die Hintergundfarbe des Menüs habe, wenn der Inhalt nicht so groß ist, das Scrollbalken entstehen.
Es müsste doch eine Lösung für dieses Problem geben, oder? Ich will unbedingt auf Tabellen verzichten, um valides und semantisch korrektes XHTML zu schreiben.
Ich freue mich auf eure Lösungsvorschläge.
MfG,
Christoph
-
Hallo,
Du könntest Menü und Content in noch ein Div einschließen also so:
<body>
<div id="header">
Headerzeugs
</div>
<div id="container">
<ul id="menu">
<li>Menüpunkt</li>
</ul>
<div id="content">
Viel Content ...
</div>
</div>
<div id="footer">
Footer
</div>
</body>dann gibst du dem container noch die Hintergrundfarbe die das Menü haben soll. Jetzt ist der container immer mindestenst so groß wie das längste darin vorkommende Inhaltsdiv und somit hat das Menü immer mindestens die gleiche Länge wie der Content.
Grüße
Jeena Paradies--
In der Schweiz auf Tour mit Jeena
http://jeenaparadies.de/weblog/2004/august/schweiz/
Kinder schlagen zu Erziehungszwecken ist in Deutschland verboten!
http://jeenaparadies.de/artikel/kinderschlagen/
Jeenas Bannertauschportal; selbstgemacht ;-)
http://jeenasbannerbude.de-
Hallo Jeena,
Du könntest Menü und Content in noch ein Div einschließen also so:
<body>
<div id="header">
Headerzeugs
</div>
<div id="container">
<ul id="menu">
<li>Menüpunkt</li>
</ul>
<div id="content">
Viel Content ...
</div>
</div>
<div id="footer">
Footer
</div>
</body>dann gibst du dem container noch die Hintergrundfarbe die das Menü haben soll. Jetzt ist der container immer mindestenst so groß wie das längste darin vorkommende Inhaltsdiv und somit hat das Menü immer mindestens die gleiche Länge wie der Content.
Vielen Dank für deinen Beitrag - jetzt fällts mir wie Schuppen von den Augen... So werde ich es versuchen.
MfG,
Christoph
-
Hallo,
jetzt habe ich das so umgesetzt und habe dabei erst bemerkt, dass meine vorherigen Ausführungen nicht ganz das getroffen haben, worauf ich eigentlich hinaus wollte:
Es ist ja oft so, dass der Inhalt einer Seite kleiner als die Höhe des Browser-Fensters ist. Dadurch würde der Footer schon u.U. in der Mitte der Seite stehen. Dass diesnicht schön aussieht, ist klar. Doch wie könnte man es machen, dass der Content-Bereich unabhängig vom Inhalt bis zum Rand des Fensters geht?
MfG,
Christoph
-
hi,
Es ist ja oft so, dass der Inhalt einer Seite kleiner als die Höhe des Browser-Fensters ist. Dadurch würde der Footer schon u.U. in der Mitte der Seite stehen. Dass diesnicht schön aussieht, ist klar.
dann schau dir diesbezüglich mal http://www.alistapart.com/articles/footers an.
gruß,
wahsaga--
I'll try being nicer if you'll try being smarter.-
Hallo wahsaga,
dann schau dir diesbezüglich mal http://www.alistapart.com/articles/footers an.
Danke für den Tipp, die Seite ist ja echt super. Ich habe es gleich probiert und siehe da es funktioniert wie es soll :-)
So jetzt bleibt nur noch ein Problem, wenn der Content nicht so lange ist, bleibt zwischen dem div-container (, der das menu-div und das content-div) beherbergt, ein weißer Kasten übrig, das schaut dann ungefähr so aus:
------------------------------------------------------------+
HEADER |
------------------------------------------------------------+
| |
| |
| |
| |
MENU | CONTENT |
float:left; | width: Rest des Browserfensters |
width:250px; | |
| |
| |
| |
| |
| |
-----------------+------------------------------------------+
HIntergrund des Body |
+-----------------------------------------------------------+
| FOOTER |
| clear:left; |
+-----------------------------------------------------------+Kann man da irgendwas machen, dass das container-div unabhängig vom Inhalt immer bis zum Footer geht?
MFG,
euer Christoph
-
Hallo,
Ich denke nein. Habe da auch schon viel ausprobiert aber das musst du durch irgendeine optische Täuschung machen.
Wenn es wirklich nur um die Hintergrundfarbe geht dann kannst du dem body ein Hintergrundbild verpassen welches genau so breit ist wie das Menü und sich nach unten immer wiederholt Menü und Content sollten dann durchsichtig sein und der footer und header nicht. So wird der Eindruck vermittelt dass es bis nach unten geht obwohl es das nicht tut sondern nur der Hintergrund vom body scheint durch.
Grüße
Jeena Paradies--
In der Schweiz auf Tour mit Jeena
http://jeenaparadies.de/weblog/2004/august/schweiz/
Kinder schlagen zu Erziehungszwecken ist in Deutschland verboten!
http://jeenaparadies.de/artikel/kinderschlagen/
Jeenas Bannertauschportal; selbstgemacht ;-)
http://jeenasbannerbude.de
-
-
-
-