Einspaltiges Layout mit vertikaler Navigation

**bootsmann** · 17.04.2014, 21:09

Hallo,

im Moment arbeite ich an einer Seite mit folgender Aufteilung:
header, left, main und footer. (horizontale Hauptnavigation im header, einige Seiten mit vertikaler Unternavigation left)
Da mich die inhaltsabhängigen unterschiedlichen Spaltenhöhen (vor allem backgroundcolor) von left und main etwas "zum Wahnisinn" treiben,
frage ich mich, ob es eine Lösung gibt für ein einspaltiges Layout (ohne left oder right) , wo die vertikale Unternavigation trotzdem auf der linken Seite der stehen kann.
Hat jemand eine Idee dazu?

Danke und Gruß.
Andreas

**tab** · 17.04.2014, 21:45

Hast du ein statisches Layout? Also feste Breite? Dann kannst du mit "faux columns" arbeiten. Dann sind die Spalten immer noch unterschiedlich hoch, aber es sieht so aus, als ob sie gleich hoch wären. Dabei gibst du einfach dem Container ein einzeiliges Hintergrundbild, das die Hintergrundfarben der Spalten setzt. Dadurch sieht es dann so aus, als ob beide Spalten gleich hoch wären. Das kann dann etwa so aussehen

Code:

#container {
    background-image:url("files/themes/theme_1/bg_container.png");
    background-position:left top;
    background-repeat:repeat-y;
}

Das Bild besteht in diesem Fall aus 180 (Breite von left) Pixel mit der gewünschten Hintergrundfarbe von left und 780 (Breite von main) Pixel mit der Hintergrundfarbe von main und es ist 1 Pixel hoch.

Eine andere Möglichkeit wäre, mit Javascript die Spaltenhöhen zu setzen. Oder du nimmst gleich eine feste Höhe für die Seiten.