Kombination aus fixen und variablen Spalten
Hallo!
Ich CSS-Anfänger wage mich an ein 3-Spalten-Layout. Die Grundprinzipien (Menüpunkte im XHTML als <ul>-Elemente, <div>-Container, float, clear, ...) habe ich einigermaßen verstanden und kriege es sowohl mit festen Spaltenbreiten als auch mit dynamischen hin, die sich der Breite des Browserfensters anpassen. Doch nun möchte ich eine Kombination davon: Die erste Spalte soll die Menüstruktur enthalten, die per CSS formatiert wird. Die Spalte soll so breit sein, daß der längste Menüpunkt gerade noch hineinpaßt, unabhängig von der Schriftgröße, die der Benutzer im Browser ändern kann. Die dritte Spalte ist erst mal nicht so wichtig. Die kann eine feste oder flexible Breite erhalten, was einfacher ist. Die zweite Spalte, die den Inhalt enthält, soll den ganzen Rest der Fensterbreite ausfüllen. Hat jemand ein Beispiel dafür (Link genügt)? In all meinen Versuchen ragte irgendwann ein Menüpunkt über die Spalte hinaus oder die Spalte wurde auch durch den längsten Menüpunkt nicht ausgefüllt, hätte also schmaler werden können. Ersatzweise würde mir auch eine Antwort auf http://xhtmlforum.de/36099-spezielle...tenbreite.html genügen, wobei die 3. Spalte wie schon erwähnt nicht so wichtig ist. Danke. |
Du kannst deiner Navispalte eine Breite in em mitgeben. ( ausprobieren, so 20 em sollten reichen, wenn du längere Worte hast, anpassen), dein Inhaltscontainer bekommt einen entsprechenden margin.
|
Hallo,
Zitat:
Es soll so funktionieren (der Einfachkeit halber nur zwei Spalten, links Menü, rechts Inhalt): Code:
+------+----------------------+ Code:
+----------+------------------+ |
Moin,
Wie soll sich die Breite automatisch anpassen, wenn du sie per CSS festgelegt hast? Selbst wenn du keine Breite festlegst, kann die Spalte nur so breit werden wie Platz ist. Wenn du ohne Angabe von width floatest werden diese Elemente auf die Breite ihres Inhaltes geschrumpft (shrink-to-fit-Verhalten!). wenn eine Spalte eine genau definierte Breite hat und der Inhalt einer Zeile ist breiter als die Spalte hast du zwei Möglichkeiten: -einen Zeilenumbruch -die Spalte verbreitern, sodaß die lange Zeile hineinpaßt. Wenn man eine Seite baut stehen die Menüpunkte doch i.d.R. von vornherein fest, sodaß man die Breite der Menüspalte bequem festlegen kann. Kommen später noch Menüpunkte hinzu, die horizontal etwas mehr Platz beanspruchen, wird die Breite der Menüspalte und ggf. die der anderen Spalten entsprechend angepaßt. Sollte doch eigentlich kein Problem sein. |
Jein.
Du kannst den navicontainer so dimensionieren, dass er alle Eventualitäten berücksichtigt, sprich, etwas "großzügiger" dimensionieren oder deinem Inhaltscontainer ein größeres Margin mitgeben. Oder - aber das hat auch seinen Nachteil: Code:
white-space:nowrap In diesem Fall dürfte der Navicontainer keine explizite Breite erhalten, sondern wird durch seinen Inhalt dimensioniert. Jedenfalls ist aber der Konflikt mit dem Inhaltscontainer vorprogrammiert. Oder und das ist hier meine bevorzugte Lösung: Navicontainer wie oben mit einer Breite die vom Inhalt bestimmt wird, der Inhaltscontainer wird daneben gefloatet. Dann kommen die beiden sich nicht ins Gehege. Beide liegen innerhalb eines Containers mit definierter Breite. Die dritte Spalte wäre dann neben dem Container, der Navi und Inhalt hat, zu floaten. Auch hier wird eine definierte Breite vergeben. HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Alternativ müßtest Du Javascript einsetzen, die Breite des Navicontainers ermitteln und dem Inhaltscontainer auf diese Weise das margin verpassen. Ich ziehe etwas "Luft" um die Container vor, aber auch das hängt davon ab, was du damit verwirklichen willst. |
Das geht schon in die Richtung dessen, was ich erreichen möchte. Wenn sich jetzt noch die mittlere Spalte bis zur rechten komplett ausdehnt, würde ich den Rest wohl hinkriegen. Oder, vereinfacht ausgedrückt:
Linke Spalte: So viel wie benötigt Rechte Spalte: 10% oder 100 Pixel (egal, was einfacher ist) Mittlere Spalte: Alles, was übrigbleibt Doch so viel ich mit unterschiedlichen "width"-Werten und <div>-Verschachtelungen herumexperimentiere, ich bekomme nur entweder das gewünschte Verhalten in der linken Spalte oder eine mittlere Spalte, die den Rest auffüllt, aber niemals beides zusammen. Vielleicht denke ich hier jedoch auch nur zu kompliziert? (JavaScript ist tabu, die Seite soll auch mit abgeschaltetem JS gut funktionieren.) |
Zugegeben nicht optimal, da auf die Schnelle gebastelt:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Das ist ja genial - so ähnlich hatte ich es mir vorgestellt. Danke!
In einem meiner Experimente hatte ich exakt Deine <div>-Struktur verwendet, doch der entscheidende Trick ist offenbar das display:table-cell (auf diese Idee wäre ich nie gekommen). Und weil das mit dem IE nicht tut, hast Du dort Floats verwendet. Warum tut die Float-Lösung nicht mit dem Firefox? Im IE fällt das Ganze übrigens in sich zusammen, wenn man das Fenster extrem schmal macht, aber das sollte nicht weiter stören. (Doch ich sehe, ich muß noch viel über CSS lernen und Erfahrungen sammeln - wenn ich mir hier die Threads durchlese, dann gewinne ich manchmal den Eindruck, als ob da beim Seitenaufbau CSS genauso vergewaltigt werden muß wie früher die HTML-Tabellen :-/) |
Alle Zeitangaben in WEZ +2. Es ist jetzt 21:49 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023