Ich gehe mal davon aus, dass die meisten Leser hier den Ansatz „Faux Columns“:http://alistapart.com/articles/fauxcolumns/ kennen. Dabei sollte man… Was? Ist nicht so allgemein bekannt? Naja, dann hole ich wohl besser nochmal ein wenig aus…

Die Faux Columns-Technik dient dazu, Hintergrundfarben und -muster und Rahmen für Spalten unabhängig von deren Höhe zu definieren. So weit, so schlicht.

h3. Die Technik

Das große Problem, wenn man Inhalte nicht nur in Spalten positionieren möchte, sondern diese Spalten auch noch farblich hervorgehoben darstellen möchte, ist, dass normale CSS-Hintergründe und Rahmenlinien (background-color, border)immer nur die jeweiligen Box betreffen. Wenn der Inhalt einer Spalte also recht kurz ist, wird der darauf definierte Hintergrund nicht weiter als bis zum Ende des Inhalts gehen. Die beabsichtigte Spalte wäre zwar sichtbar hervorgehoben, hätte aber ein recht abruptes und vor allem zu frühes Ende.

Deshalb definiert man auf den body ein Hintergrundbild, zentriert es und lässt es in y-Richtung wiederholen. Über dieses Hintergrundbild positioniert man dann die Inhalte.

Was sich jetzt erstmal recht schlicht anhört, hat aber einige kleine Besonderheiten, die man nicht vergessen sollte. Wer die Technik jetzt nochmal im englischsprachigen Original lesen möchte, kann das gerne tun. Ich warte so lange…

Link zum Artikel: „Faux Columns“:http://alistapart.com/articles/fauxcolumns/

Wieder da? Gut. Also, es gibt da einige Besonderheiten zu beachten.

h3. Hinweise und Besonderheiten

Da das Hintergrundbild mittels { background-position: 50% 50%; } zentriert wird, sind wir auf de Fähigkeiten des Browsers angewiesen, die richtige Position zu finden. Und wie jedesmal, wenn man mehrere fragt, bekommt man auch hier schnell verschiedene Ergebnisse von den Browsern geliefert.
Deshalb sollte man seine Vorlagen auf jeden Fall genau zerschneiden. Ein Pixel mehr oder weniger kann echte Kopfschmerzen bereiten (bis man auf die Idee kommt, einfach nochmal neu und sehr genau zu slicen).

Eine weitere Kleinigkeit erwächst daraus, dass man nicht immer die Möglichkeit hat, den body als umgebende Box zu wählen. Das ursprüngliche Problem taucht wieder auf: Die umgebende Box kann zu kurz sein.
Deshalb sollte man entweder den Inhalt so wählen, dass der container weit genug (über das Browserfenster hinaus) gedehnt wird oder aber an ein abschließendes Fußelement denken.

Haarig kann es auch werden, wenn man die Inhalte einer Seitenleite per {position:absolute; left:0; top:0; } positioniert. Absolut positionierte Elemente werden aus dem normalen Dokumentenfluß herausgenommen und nehmen darin keinen Platz mehr ein. Da sie keinen Platz mehr einnehmen, können sie eine umgebende Box auch nicht ausdehnen. So kann es leicht passieren, dass ein Teil des Inhaltes aus dem Container herausragt und dementsprechend auch keinen Hintergrund mehr hat.
Deshalb sollte man vorher überlegen, wie lang eine Spalte sein kann und ob nicht vielleicht floats (die eine umgebende Box unter gewissen Umständen ausdehnen können) im Einzelfall besser geeignet sind.

Diese Kleinigkeiten haben mir letztens doch einiges an Kopfzerbrechen bereitet, eben weil ich nicht darauf geachtet habe.