Byteshift: Webdesign aus Berlin


was| wer| wo| details| english

Unechte Spalten
Autor: Dan Cederholm
Alistapart Ausgabe: 167

Eine der mir am häufigsten gestellten Fragen zu meiner persönlichen Website ist diese:

Wie schaffen Sie es, daß die Hintergrundfarbe der rechten Spalte sich bis zum unteren Rand der Seite erstreckt?

Dahinter steckt ein wirklich einfaches Konzept - eines, das möglicherweise viele von ihnen schon kennen. Aber für diejenigen, bei denen das nicht der Fall ist, kann die folgende Technik ein praktischer kleiner Trick sein.

Vertikale Ausdehnung

Eine der etwas frustrierenden Eigenschaften von CSS ist die Tatsache, das die vertikale Ausdehnung von Elementen nur so weit reicht, wie nötig ist; d.h., wenn eine 200 Pixel hohe Grafik in einem <div> steht, wird sich der <div> nur über 200 Pixel der Seite erstrecken.

Dies wird zu einem interessanten Dilemma, wenn sie einen <div> einsetzen, um ihren Quelltext zu unterteilen und dann CSS benutzen, um einen Spaltenbasiertes Layout zu erstellen. Eine Spalte ist möglicherweise länger als die andere (siehe Abb. 1). Abhängig vom darin befindlichem Inhalt, wird es schwierig, ein Layout mit zwei gleich hohen Spalten zu erstellen, wenn ein jeweils unterschiedlicher Hintergrund für jede Spalte erwünscht ist.

Abbildung 1

Abb.1

Es gibt einige Wege, um die Spalten gleich hoch erscheinen zu lassen, unabhängig vom darin befindlichem Inhalt. Ich werde ihnen die von mir eingesetzte Lösung zeigen (zum Gebrauch mit einem absolut positionierten Layout), welche zufälligerweise besonders ...einfach ist. Eben dieser kleine Trick wird auch woanders verwendet, z.B. auch bei www.alistapart.com.

Geschummelt

Das peinlich schlichte Geheimnis besteht darin, eine vertikal gekachelte Hintergrundgrafik einzusetzen, um die Illusion verschidenfarbiger Spalten zu erzeugen. Für SimpleBits sieht meine Hintergrundgrafik ungefähr so aus wie Abb. 2 (Proportionen für Demonstrationszwecke geändert), mit einem streifenförmigen Etwas auf der linken Seite, einem breitem Bereich für die Inhalts-Spalte, einem 1 Pixel Rand und einem hellbraunem Bereich für den Hintergrund der rechten Spalte, gefolgt vom gespiegeltem Schmuckrand der linken Seite.

Abbildung 2

Abb.2

Die ganze Grafik ist nicht höher als ein paar Pixel, aber als vertikale Kachel erzeugt sie die farbigen Spalten, die sich ganz bis zum unteren Rand der Seite erstrecken - unabhängig von der Länge des Inhalts der Spalten.

Das CSS

Diese elementare CSS Eigenschaft wird dem body Element zugewiesen:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

Im Grunde weisen wir dem Hintergrund der gesamten Seite die Farbe Grau und lassen ihn vertikal kacheln (repeat-y). 50% 0 bezieht sich auf die Positionierung der Hintergrundgrafik - in diesem Fall, 50% von der linken Seite des Broweserfensters (das Ergebnis ist eine zentrierte Grafik) und 0 Pixel von oben.

Positionierte Spalten

Mit der Hintergrundgrafik an ihrem Platz, beginnt mein positioniertes Layout oben, der linken und rechten Spalte wurden padding und margin zugewiesen, so sicherstellend, daß sie sich am richtigen Ort aufstellen - innerhalb der unechten Spalten, die durch die Hintergrund geschaffen wurden (siehe Abb. 3).

Abbildung 3

Abb.3

Es ist noch anzumerken, daß, wenn padding und margin für die Spalten gewünscht wird, wir immer noch IE/Wins mangelhafte Umsetzung des Box Models mit Tantek Celiks Box Model Hack oder dem Mid Pass Filter ausgleichen müßen.

Andererseits, wenn auf padding gänzlich verzichtet werden kann, indem man ersatzweise margins verwendet, ist der Box Model Hack nicht notwendig. Wenn der Inhalt der Spalte (transparent) über dem gekachelten Hintergrund, sollte es ebenfalls einfach sein, den Hack zu vermeiden.

Hauptsache, es klappt

Auf meiner eigenen Site benutze ich absolute Positioniereung, um ein zweispaltiges Layout zu erzeugen, ähnlich gute Resultate erbringt die Eigenschaft float (wie auf ALA zu sehen).

Auch dies basiert auf dem gleichen Gedanken: Kacheln sie eine Hintergrundgrafik und setzen sie mit :float eine Spalte so darüber, daß der Hintergrund mit den unechten Spalten davon überlagert wird.

Schlußbemerkungen

Es ist ein einfaches Konzept - aber eines, daß die Frustrationen erleichtern kann, die Desiger oft beim Erstellen CSS-basierter Layouts befallen.

Dank an Jeffrey Zeldman für seine Hilfe beim Abrunden des Artikels.


Dem Designer, Programmierer und Bonvivant Dan Cederholm ist das standardkonforme Redesign von Fast Company und Inc.com zu verdanken (Interview). Er veröffentlicht Design-Tips und Neuigkeiten auf seiner persönlichen Site, SimpleBits.

Originaladresse: www.alistapart.com/articles/fauxcolumns/
Alistapart Diskussionsforum (englisch): www.alistapart.com/discuss/fauxcolumns/

Translated with the permission of A List Apart Magazine and the author[s].

Wichtige Links zum Thema Web Design und Typographie

Valid XHTML 1.0! Valid CSS!