CSS-basierte Layouts

2-spaltiges Layout mit Hintergrundgrafik

In diesem Beispiel wird eine Hintergrundgrafik zur optischen Trennung der Spalten verwendet.

Dies erfordert leider, dass die Breite der links stehenden Navigation passend zur Hintergrundgrafik in 'px' angegeben wird. Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades nicht anpassen.

Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen. Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst kein Hintergrund angegeben.
Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert und ist unabhängig von deren Höhe.

Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen, damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.

Diese Fußzeile stellt innerhalb des umschließenden DIVs den Elementenfluss wieder her.

zurück