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.
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.
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).
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].
