nicht angemeldet
Hallo, Sven,
(...) mit ein paar Tricks kriegt man trotzdem gleiche Längen bei beiden Spalten hin - zumindest optisch.
Was ich gerne mal anwende: Tricks mit Hintergrundbildern.
Für manche Fälle mag das die vorzuziehende Realisierungsmöglichkeit sein.
Schematisch sehen deine DIVs so aus:
+---------------------------+
|+-----+ |
||Menü | Inhalt |
|| | |
|+-----+ |
| |
| |
+---------------------------+
Ich würde eher ein folgendes Modell vorziehen, da es gewöhnliche Boxeffekte ohne Hintergrundbilder erlaubt und für die meisten Fälle vielseitiger ist (über den speziellen Fall will ich nicht mutmaßen):
+---------------------------+
|+-----+ +-----------------+|
||Menü | | Inhalt ||
|| | | ||
|+-----+ | ||
| | ||
| +-----------------+|
+---------------------------+
(Schemazeichnung, die Bereiche haben im Endeffekt natürlich nicht alle Rahmen.)
Das Menü ist mit float und width gekennzeichnet und der Inhalt mit margin-left. Ein einfaches Beispiel: http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout3.html.
Du kannst dem Div "Inhalt" ein Hintergrundbild geben, welches den orangenen Trennstreifen realisiert. Die Hintergrundfarbe des DIV ist gelb. Durch positionieren des Hintergrundbildes an der gewünschten Position und wiederholen nur in Y-Richtung (background-repeat:repeat-y) kriegst du einen senkrechten Streifen. Links davon wird dann das Menü platziert, und damit der Inhalt nicht nach links rüberläuft, gibst du dem Inhalts-DIV ein passendes Padding links, um Abstand zu halten.
Ich würde es ähnlich, aber doch ein bisschen anders und einfacher lösen. Jan Eric macht es auf http://www.barrierefreies-webdesign.de/ vor. Sein Layout mit drei gleichlangen Spalten sieht schematisch folgendermaßen aus:
+---------------------------------------+
|+---------------------------+ +-------+|
||+-----+ +-----------------+| |Menü 2 ||
|||Menü | | Inhalt || | ||
||| | | || +-------+|
||+-----+ | || |
|| | || |
|| | || |
|| +-----------------+| |
|+---------------------------+ |
+---------------------------------------+
Die Menüs sind jeweils mit float links beziehungsweise rechts ausgerichtet. Durch die umgebenden zusätzlichen Elemente wird eine Hintergrundfarbe definiert, welche im Inhaltsbereich wieder aufgehoben beziehungsweise überschrieben wird. Siehe auch http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout2.html. Wie das Beispiel zeigt, muss jedoch die mittlere Spalte am längsten sein, da sonst die float-Bereiche vertikal nach unten herausragen, diesbezügliche Untersuchungen siehe http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout.html.
Bisher habe ich es auch mit Workarounds nicht geschafft, bei dieser speziellen Aufgabenstellung mittels CSS die Flexibilität von Tabellenspalten zu erreichen.
Grüße,
Mathias
»Im Kampf zwischen Dir und der Welt, sekundiere der Welt.
Man darf niemanden betrügen, auch nicht die Welt um ihren Sieg.«
Franz Kafka - http://www.kafka.org/projekt/nachlass2/ohg.html