2-spaltiges Tabellendesign ohne Tabellen

[Thiemo Mättig]

Ich habe ein auf sauberem CSS basierdendes Seitendesign, das ungefähr so aussieht.

+---------------+
| Überschrift   |
+--------+------+
| Inhalt | Menu |
| Inhalt | Menu |
| Inhalt +------+
| Inhalt |
+--------+

Ich will aber, dass das Menü genauso hoch wie der Inhaltsteil wird (die leere Ecke unten rechts soll die selbe Hintergrundfarbe wie das Menü bekommen). Mit dem alten tabellenbasierten Design war das kein Problem. Aber wie mache ich das mit CSS? (Ja, height:100% habe ich schon versucht.)

Ich habe folgende "dirty" Lösung gefunden. Ich glaube aber nicht, dass das optimal ist. Vor allem wenn man das Browserfenster ganz klein macht, fällt der Trick mit border-right optisch auseinander. Gibt es eine bessere Lösung?

<h1 style="background-color:blue; margin:0;">Überschrift</h1>
<ul style="background-color:green; float:right; margin:0; width:140px;">
  <li>Menü</li>
  <li>Menü</li>
</ul>
<div style="border-right:140px solid red;">
  <p>Inhalt</p>
  <p>Inhalt</p>
  <p>Inhalt</p>
  <p>Inhalt</p>
</div>

[wahsaga]

hi,

+---------------+
| Überschrift   |
+--------+------+
| Inhalt | Menu |
| Inhalt | Menu |
| Inhalt +------+
| Inhalt |
+--------+
Ich will aber, dass das Menü genauso hoch wie der Inhaltsteil wird (die leere Ecke unten rechts soll die selbe Hintergrundfarbe wie das Menü bekommen).

dann packe doch mal inhalt und menü beide in einen weiteren container, der die selbe hintergrundfarbe wie das menü bekommt.

gruss,
wahsaga

[Thiemo Mättig]

packe doch mal inhalt und menü beide in einen weiteren container, der die selbe hintergrundfarbe wie das menü bekommt.

Gute Idee, aber ...

+---------------------+ <- wirkungsloser Container
| +--------+ +------+ |
| | Inhalt | | Menu | | <- float:right
| | Inhalt | +------+ |
| | Inhalt +--------+ |
| | Inhalt Inhalt   | | <- das passiert, wenn ich border-right weglasse
| +-----------------+ |
+---------------------+

Ich denke, das Problem entsteht, weil ich float:right verwende. Mir fällt allerdings keine Alternative ein. (Alle Versuche mit position:absolute etc. schlugen fehl.)

Also: Mit float:right im Menücontainer UND border-right im Inhaltscontainer scheint es zu funktionieren (der Menücontainer befindet sich dann vor der gleichbreiten border). Aber funktioniert dieser Hack wirklich in jedem (modernen) Browser?

+--------+bbbbbbbbbb
| Inhalt |b+------+b
| Inhalt |b| Menu |b <- Menücontainer mit float:right
| Inhalt |b+------+b
| Inhalt |bbbbbbbbbb
+--------+bbbbbbbbbb <- Inhaltscontainer mit border-right

[wahsaga]

hi,

Also: Mit float:right im Menücontainer UND border-right im Inhaltscontainer scheint es zu funktionieren (der Menücontainer befindet sich dann vor der gleichbreiten border).

ein border hat an dieser stelle wenig sinn - versuche mal, stattdessen padding-left in entsprechender breite für den inhalt zu nehmen.

gruss,
wahsaga

[molily]

Hallo Thiemo und wahsaga,

Also: Mit float:right im Menücontainer UND border-right im Inhaltscontainer scheint es zu funktionieren (der Menücontainer befindet sich dann vor der gleichbreiten border).

ein border hat an dieser stelle wenig sinn - versuche mal, stattdessen padding-left in entsprechender breite für den inhalt zu nehmen.

Hm, padding-left? Für welches Element? Normalerweise unterbindet man das Weiterlaufen des Inhalts unter dem float-Element mittels (in dem Fall) margin-right:[border edge-Breite des float-Elements] für das statische Element, also hier den Inhaltscontainer. Siehe bspw. http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout.html.

Mathias

[Thiemo Mättig]

Normalerweise unterbindet man das Weiterlaufen des Inhalts unter dem float-Element mittels margin-right [...]

Danke. Das funktioniert. Allerdings fehlt mir dann die Hintergrundfarbe unterhalb des Menücontainers (hier mit ? markiert).

+--------++------+ <- Menücontainer mit float:right
| Inhalt || Menü |
| Inhalt |+------+
| Inhalt |????????
+--------+???????? <- Inhaltscontainer mit margin-right

Das ließe sich wieder mit einem großen Container um alles lösen, der die passende Hintergrundfarbe hat. In manchen Browsern scheint diese Farbe dann aber über/in/unter dem Inhaltscontainer durch.

Kurz: Mit border-right würde ich mich wohler fühlen, wenn ich wüsste, dass das genauso zuverlässig funktioniert wie margin-right. Gibt es da Erfahrungen?

Nächstes Problem: Wie kriege ich ein (bildlich gesprochen) "float:right bottom" hin?

+--------+bbbbbbbb <- Inhaltscontainer mit border-right
| Inhalt |bbbbbbbb
| Inhalt |+------+ <- Wie? (bildlich: "float:right bottom")
| Inhalt || Fuß  |
+--------++------+

[molily]

Hallo Thiemo,

Normalerweise unterbindet man das Weiterlaufen des Inhalts unter dem float-Element mittels margin-right [...]

Danke. Das funktioniert. Allerdings fehlt mir dann die Hintergrundfarbe unterhalb des Menücontainers (hier mit ? markiert).

Ich wollte wahsaga nur ergänzen. Was er in [pref:t=58793&m=330160] gesagt hat, müsstest du mit meiner Aussage kombinieren. Siehe auch meine Beispielseite.

Das ließe sich wieder mit einem großen Container um alles lösen, der die passende Hintergrundfarbe hat. In manchen Browsern scheint diese Farbe dann aber über/in/unter dem Inhaltscontainer durch.

Ja. Davon war ja auch die Rede.

Kurz: Mit border-right würde ich mich wohler fühlen, wenn ich wüsste, dass das genauso zuverlässig funktioniert wie margin-right. Gibt es da Erfahrungen?

Die border-Lösung ist mir bei dir das erste Mal begegnet und ich habe sie auch noch nirgendwo im Einsatz gesehen, die margin/background-color-Lösung ist hingegen verbreitet. Daher kann ich nichts darüber sagen, wie zuverlässig die border-Lösung ist.

Nächstes Problem: Wie kriege ich ein (bildlich gesprochen) "float:right bottom" hin?

+--------+bbbbbbbb <- Inhaltscontainer mit border-right
| Inhalt |bbbbbbbb
| Inhalt |+------+ <- Wie? (bildlich: "float:right bottom")
| Inhalt || Fuß  |
+--------++------+

Höchstens mit position:relative für ein beide Elemente beinhaltendes Containerelement und position:absolute; right:0; bottom:0; für den Fuß. Siehe </archiv/2003/2/38621/#m211671> bzw. http://home.t-online.de/home/dj5nu/fanhost/css-spalten-fuss.html. Das ist aber alles andere als kompatibel und benötigt vermutlich zahlreiche CSS-Hacks, durch welche verschiedene Browser verschiedene Styles bekommen.

Mathias

[Thiemo Mättig]

Die border-Lösung ist mir bei dir das erste Mal begegnet und ich habe sie auch noch nirgendwo im Einsatz gesehen, die margin/background-color-Lösung ist hingegen verbreitet.

So weit ich das sehe (und meine Tests mit diversen Browsern bestätigen das), sind border- und margin-Lösung im Grunde identisch. Beides beruht auf dem selben Prinzip. Ob der main-Container mittels margin-right oder border-right (oder beides zusammen!) eingerückt wird, scheint unerheblich zu sein.

Vielen Dank für die professionelle Hilfe!

[Tim Tepaße]

Hallo Thiemo,

So weit ich das sehe (und meine Tests mit diversen Browsern bestätigen das),
sind border- und margin-Lösung im Grunde identisch. Beides beruht auf dem
selben Prinzip. Ob der main-Container mittels margin-right oder border-right
(oder beides zusammen!) eingerückt wird, scheint unerheblich zu sein.

Ich bevorzuge immer noch margin. Warum? Es ist dafür vorgesehen und hat
dagegenüber Vorteile gegenüber border. Und oft setzt man beides gleichzeitig
ein, einen Rahmen und margin für den (nicht durch irgendwelche Hintergrundfarben)
sichtbaren Abstand zu umgebenden Elemente. Wenn Du auf dem Gebrauch von
border in dieser Nutzung verzichten kannst, sei Dir das natürlich gestattet,
ich würde mich dagegen als eingeschränkt fühlen.

Tim

[Michael Jendryschik]

Hallo,

Ich habe ein auf sauberem CSS basierdendes Seitendesign, das ungefähr so aussieht.

+---------------+
| Überschrift   |
+--------+------+
| Inhalt | Menu |
| Inhalt | Menu |
| Inhalt +------+
| Inhalt |
+--------+

Ich will aber, dass das Menü genauso hoch wie der Inhaltsteil wird (die leere Ecke unten rechts soll die selbe Hintergrundfarbe wie das Menü bekommen). Mit dem alten tabellenbasierten Design war das kein Problem. Aber wie mache ich das mit CSS?

Siehe unter anderem http://forum.de.selfhtml.org/archiv/2003/9/57470/#m321724.

Gruß,

MI