macrominds

Faux Columns sind nett. Aber sie verbieten flexibles Layout. Mit Advanced Faux Columns können auch alle Spalten von flexiblen Layouts mit Hintergrundgrafiken über die volle Höhe versehen werden.

Für flexible Dreispalten-Layouts verwende ich YAML.

Folgendes Layout soll flexibel erzeugt werden:

Die Spalten 1 (links) und 2 (rechts) sollen jeweils 25% der Gesamtbreite einnehmen und mit Hintergrundgrafiken versehen sein. Die Grafik der Spalte 1 soll sich am rechten Rand der Spalte 1 ausrichten und die Grafik der Spalte 2 am linken Rand der Spalte 2.

Verändert man dann die Größe des Browserfensters und somit die Größe der Spalten bleibt der in der Grafik gezeigte rote Verlauf somit immer am inneren Rand der Spalten.

Der Autor von YAML, Dirk Jesse, verweist in einem Abschnitt zu grafikfreien Spaltentrennern auf Faux-Columns. Diese Technik ließe sich zwar grundsätzlich für mein Ziel einsetzen, ermöglicht aber kein liquid Design, man ist auf ein fixes Layout festgelegt.

Eine weiteres Problem ist, daß die Spalten selbst nicht als Träger der Hintergrundgrafiken taugen, da sie nur so hoch sind, wie ihr Inhalt. Im YAML-Layout “layout_3col_vlines_v1.html”, das ich hierfür einsetze, wird die Spaltenordnung 1-3-2 eingesetzt, was bedeutet, dass nur Spalte 3 garantiert über die volle Höhe aller Spalten geht.

Die Lösung:

YAML verwendet ein Div mit der ID main als Eltern-Container für die Spalten.
Dieses Div alleine reicht für die Lösung nicht aus, es wird noch ein zusätzliches umrandendes Div benötigt:

   <div class="main">
      <div class="main2">
         <!-- YAML columns -->
      </div>
   </div>

Folgendes CSS definiert die Hintergrundgrafiken left_bg.gif und right_bg.gif:

.main{
   background-image:url(images/left_bg.gif);
   background-repeat:repeat-y;
   background-position:25% 0%;
}
.main2{
   background-image:url(images/right_bg.gif);
   background-repeat:repeat-y;
   background-position:75% 0%;
}

Der Kern der Sache ist, die Grafiken wie folgt zu erstellen:
Angenommen unsere Spalten haben eine maximale Breite von 100px, die vollständig mit einem Verlauf versehen sein soll, dann müssen unsere Hintergrund-Grafiken eine Breite von 400px besitzen.
In der Grafik left_bg.gif muss der Verlauf ganz links in der Grafik sitzen, der Rest ist transparent.
In der Grafik right_bg.gif muss der Verlauf ganz rechts in der Grafik sitzen, der Rest ist transparent.
Die folgende Grafik verdeutlicht das:

Zum Hintergrund – oder “warum ist das so?”

background-position ist ein wenig speziell, aber eigentlich genial:
background-position: 50% 50%; definiert, dass das Hintergrundbild zentriert dargestellt wird.

Das bedeutet, dass der Pixel des Hintergrundbildes, der auf 50% der Breite des Hintergrundbildes sitzt, auf 50% der Container-Breite dargestellt wird.

Das bedeutet im Rückschluss:
background-position:25% 0%;
definiert, dass der Pixel des Bildes, der auf 25% der Bildbreite sitzt auf 25% der Container-Breite ausgerichtet wird.
Wenn ich ein Bild rechtsbündig auf 25% der Container-Breite ausrichten will, muss ich es in der vierfachen Größe bereitstellen, als es eigentlich darstellen soll.
Will ich ein Bild linksbündig auf 75% der Container-Breite ausrichten gilt das gleiche.

Nennen wir es Advanced Faux-Columns.

Vielleicht hilft das ja dem ein oder anderen.