nicht angemeldet
Problem bei 2 Spalten Aufteilung mit Divs
nachdem ich vor längerer Zeit ne Homepage komplett mit CSS layoutet habe, möchte ich nun noch den Navigationsframe rausschnmeissen und alles mit Div machen. Das soll so aussehen, linker Div feste Breite z. B. 200 Px und der rechte variable, also den Rest des Platzes. Der Anfang sieht so aus:
.oben { width:96%; background-color:#6d7eaf; }
.links { width:200px; background-color:#aaaaaa; float:left; }
.rechts { width:96%; background-color:#3c4050; }
1. Problem:
Der rechte Div-Bereich hat üblich ja mehr Inhalt als der linke. Wenn der linke Div zu Ende ist, rutscht der Text in dem rechten Div-Bereich wieder nach links. Sieht so aus:
------------------------------------
Logo
------------------------------------
Link1 Text
Link2 Text
Text
Text
Text
Text
Auch unter dem linken Div-Bereich soll der Platz links aber frei bleiben - wie das z. B. auch bei einer blinden Tabelle der Fall ist, wo die linke Spalte bis nach unten frei bleibt:
------------------------------------
Logo
------------------------------------
Link1 Text
Link2 Text
Text
Text
Text
Text
Wie mach ich sowas am besten?
Ich hab mal eine Lösung gesehen, da wurde fürs rechte Div einfach ein margin-left:220px gesetzt.
Schöne Grüsse
-
Hallo Mario,
sehr hilfreich finde ich z.B. http://css-discuss.incutio.com/?page=TwoColumnLayouts
Gruß Gunther
-
Hallo,
das hab ich schon gesehen, teilweise wird da mit absoluten Positionierungen gearbeitet.
Ich hab noch was anderes gesehen, z. B. hier:
http://css.fractatulum.net/vorlagen/v4/index.htm
Das finde ich richtig gut. Dort wird hat der linke Div auch ein float:left und eine feste Breite, der rechte dagegen keine Breitenangabe und ein margin-left:250px.Ich glaube langsam den margin-left braucht man für den rechten Div!
Und ist das normal, wenn man für ein Div keine Breite angibt, das er immer so breit wird, wie noch Platz im Browser da ist?
Schöne Grüsse
-
Hallo,
das hab ich schon gesehen, teilweise wird da mit absoluten Positionierungen gearbeitet.
ja es gibt verschiedene Ansätze um ein 2-Spalten Layout zu realisieren.
Ich hab noch was anderes gesehen, z. B. hier:
http://css.fractatulum.net/vorlagen/v4/index.htm
Das finde ich richtig gut. Dort wird hat der linke Div auch ein float:left und eine feste Breite, der rechte dagegen keine Breitenangabe und ein margin-left:250px.Ich glaube langsam den margin-left braucht man für den rechten Div!
ja, nämlich genau dann, wenn der Inhalt des rechten Div's weiter nach unten reicht als der des linken Div's und der Inhalt nach dem Ende des linken Div's nicht ganz links weitergehen soll.
Div rechts ohne margin-left Div rechts mit margin-left
+---------------------------+ +---------------------------+
| | | | | |
| Div | Div | | Div | Div |
| links | rechts | | links | rechts |
|----------|Text Text Text | |----------|Text Text Text |
|Text Text Text Text Text | | |Text Text Text |
|Text Text Text Text Text | | |Text Text Text |
|Text Text Text Text Text | | |Text Text Text |
| | | |Text Text Text |Und ist das normal, wenn man für ein Div keine Breite angibt, das er immer so breit wird, wie noch Platz im Browser da ist?
Das hängt in erster Linie davon ab, was der umschließende Block des jeweiligen Elements ist und ob es irgendwelche Styleangaben (bezüglich Abstand, Rahmen, Ränder, etc.) gibt oder nicht.
siehe hierzu (u.a.) http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap10.html#heading-10.3.3�
Da der umschließende Block in dem Fall das Body Element ist (dessen Breite ohne zusätzliche Angaben gleich der Fensterbreite ist), nimmt das Div Element ohne eine Angabe von width die Breite des Body Elements ein (also die Fensterbreite).
Gruß Gunther
-
-
-
Hi Mario,
nachdem ich vor längerer Zeit ne Homepage komplett mit CSS layoutet habe, möchte ich nun noch den Navigationsframe rausschnmeissen und alles mit Div machen. Das soll so aussehen, linker Div feste Breite z. B. 200 Px und der rechte variable, also den Rest des Platzes.
Sehr lobenswert ;-)
Der Anfang sieht so aus:
.oben { width:96%; background-color:#6d7eaf; }
.links { width:200px; background-color:#aaaaaa; float:left; }
.rechts { width:96%; background-color:#3c4050; }Sieht schon gut aus, aber du musst es so machen:
.oben { ... sicher das du nicht 100% willst? };
.links { width:12em; float:left; };
.rechts { margin-left:13em; }Und dann müsste das passen.
Eine Alternative wäre, dem Div rechts
.rechts { float:right; text-align:left; }
zu geben.MfG, Dennis.
--
Mein SelfCode: ie:{ fl:{ br:^ va:) ls:< fo:) rl:( n4:& ss:) de:> js:( ch:{ sh:( mo:} zu:|
Zufällige Hinweise:
Sinnvolles Zitieren: Man zitiert nur Teilsätze des Vorposters
auf die man sich bezieht! Nicht einfach alles.-
Hi Mario,
ich sehe schon, der rechte Div braucht ein Margin-left! Dann passt das auch korrekt!
Die 100% für oben: Das obere Div soll einfach so breit sein, wie Platz da ist! Bei Angabe 100% bekomm ich manchmal einen Scrollbalken nach rechts (warum eigentlich?). Daher gib ich lieber 98% oder 99% an, da gibts kein Scrollbalken! Und ein winziger Rand links und rechts schadet ja nicht....
Schöne Grüsse
-
Hallo Mario
Die 100% für oben: Das obere Div soll einfach so breit sein, wie Platz da ist! ...
Dann brauchst du ihm überhaupt keine Breite zu geben, Blockelemente haben üblicherweise die Breite des Elternelementes.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Hi Mario,
Ich heiße zwar nicht Mario, aber:
Die 100% für oben: Das obere Div soll einfach so breit sein, wie Platz da ist! Bei Angabe 100% bekomm ich manchmal einen Scrollbalken nach rechts (warum eigentlich?).
In dem Quelltext-Ausschnitt in Deinem Ursprungsposting hast Du nicht nur dem div .oben, sondern auch dem div .rechts 96% gegeben, das legt mir die Vermutung nahe, das Du das vorher mit den 100 % genauso gemacht hast. In dem Quelltext ist zwar nichts von padding oder so zu sehen, aber wenn das nur ein Ausschnitt ist und Du im Originaltext dem .rechts noch ein padding gegeben hast damit der Fließtext Abstand vom Rand des divs hält, dann wird dieses padding zur Breite des divs hinzugerechnet (jedenfalls im Box-Model des w3c, also nicht im IE 5.0 oder IE 6.0 im Quirksmode - oder hab ich das jetzt verkehrt rum?). Daran könnten dann die Rollbalken liegen, da die Breite von 96% plus das padding über 100% ergeben.
Ich würde aber wie auch Detlef G. empfehlen, die Breitenangabe bei .oben und .rechts ganz wegzulassen, das passt sich dann automagisch auf Viewportgröße an.Lars
-
-