Verlauf
Alle Kapitel anzeigenHintergrundfarben in CSS-Layouts
Bei den im Modul "CSS-basierte Layouts" vorgestellten Layoutformen werden die verschiedenen Spalten nur genauso "hoch" angezeigt, als Inhalt in der jeweiligen Spalte ist. Solange die Spalten keine oder diesselbe Hintergrundfarbe haben wie der übergeordnete container-div, fällt das optisch nicht weiter auf. Sobald man z.B. der Navigation wie auch dem content andere Hintergrundfarben als dem container-div zuweist, sieht man, dass Navigation nicht bis unten zum footer hin durchgezogen angezeigt wird (Beispiel). Umgekehrt wird bei sehr wenig content und sehr vielen Punkten in der Navigationsliste die Content-Spalte nicht bis zum Footer durchgezogen und endet irgendwo zwischen Header und Footer (Beispiel). Man kann nur rein mit CSS also keine durchgezogene Spalte realisieren, wenn der Inhalt dieser Spalte vertikal eine geringere Ausdehnung hat als eine andere Spalte.
Es gibt zwar die Möglichkeit mit z.B. Javascript die höchste "Spalte" zu ermitteln und alle anderen auf diese Größe anzupassen, aber erstens erfordert dieser Ansatz zusätzliche Programmierung und zweitens muss dazu zwingend Javascript auf der Benutzerseite aktiviert sein, was nicht zwingend vorausgesetzt werden sollte.
Eine weitverbreitete, nur auf CSS basierende, Lösung zu dieser Problematik nennt sich "Faux Columns" (Falsche, vorgespielte, gefälschte Spalten) und wird im Folgenden erklärt.
Es gibt zwar die Möglichkeit mit z.B. Javascript die höchste "Spalte" zu ermitteln und alle anderen auf diese Größe anzupassen, aber erstens erfordert dieser Ansatz zusätzliche Programmierung und zweitens muss dazu zwingend Javascript auf der Benutzerseite aktiviert sein, was nicht zwingend vorausgesetzt werden sollte.
Eine weitverbreitete, nur auf CSS basierende, Lösung zu dieser Problematik nennt sich "Faux Columns" (Falsche, vorgespielte, gefälschte Spalten) und wird im Folgenden erklärt.
Hintergrundbilder in Fixbreitenlayouts
Falls man jeder Spalte einen eigenen Hintergrund zuweisen möchte und vorher nicht weiss, wieviel Inhalt in den verschiedenen Spalten sein wird, kann man sich aber mit einem Trick in der Verwendung von Hintergrundbildern helfen. Dies funktioniert bei Fixbreiten-Layouts sehr einfach, indem man dem übergeordneten container-div, der immer automatisch so hoch wie die höchste in sich beinhaltete Spalte wird, eine Hintergrundgrafik zuweist. Bei Fixbreiten-Layouts geht das deshalb sehr einfach, weil man hier auch schon im Vorhinein weiss, wie breit die einzelnen Spalten sind (und auch bei einer anderen Browserfenstergröße noch immer sind).
Möchte man also z.B. nur die linke Spalte (unabhängig von ihrem Inhalt) mit einem blauen Hintergrund versehen, so fertigt man im Bildeditor seiner Wahl eine Grafik mit genau derselben Breite wie diese Spalte an, in unserem Beispiel ist dies für die linke Spalte 180 Pixel und - weil sich der Hintergrund in vertikaler Ausdehnung nur wiederholen soll, reichen hier 1 Pixel Höhe (hier der Anschaulichkeit halber 20 px). Die Grafik sieht für sich alleine folgendermaßen aus:
Der Clou dabei ist jetzt dass man diese Grafik wie gesagt nicht dem Navigationsbereich als Hintergrund zuweist, sondern dem übergeordneten container-div.
Damit reicht die "Spalte" wirklich von ganz oben bis unten zum Footer. Aus dem Navigationsbereich als auch dem content-Bereich muss man die Hintergrundfarben entfernen (sofern per CSS welche zugewiesen wurden), damit der Hintergrund des dahinterliegenden container-divs durchscheinen kann. Durch die Angabe einer Hintergrundfarbe UND eines Hintergrundbildes für den container-div wie in unserem Beispiel hat man dort, wo das 180 Pixel breite Bild liegt, eine dunklere Hintergrundgrafik und überall anders eine hellere Hintergrundfarbe (hier #E1FCFF) - unabhängig von der Höhe der Spalten.
Beispiel: "linke Spalte" per Hintergrundgrafik hervorgehoben
Möchte man bei einem 3-spaltigen Fixbreitenlayout die mittlere Spalte mit einem z.B. orangefarbenen Verlauf und die rechte Spalte mit einem grünfarbenen Verlauf einfärben (nur um zu zeigen, dass auch das geht - kein Anspruch auf optimale Farbgebung), kann man entweder eine Grafik anfertigen, die genau so breit wie zweite und dritte Spalte gemeinsam ist, beide Spalten entsprechend faerbt und anschließend für den container aber rechtsbündig zuweist
oder die Hintergrundgrafik genauso breit wie den gesamte übergeordneten Container macht; aber den Bereich der ersten Spalte transparent läßt (und damit die Hintergrundfarbe wieder durchcheint):
Beispiel: 3spaltiges Layout, rechtsbündige Hintergrundgrafik für 2 Spalten
Beispiel: 3spaltiges Layout, linksbündige Hintergrundgrafik für 2 Spalten, 1 Spalte transparent
Möchte man also z.B. nur die linke Spalte (unabhängig von ihrem Inhalt) mit einem blauen Hintergrund versehen, so fertigt man im Bildeditor seiner Wahl eine Grafik mit genau derselben Breite wie diese Spalte an, in unserem Beispiel ist dies für die linke Spalte 180 Pixel und - weil sich der Hintergrund in vertikaler Ausdehnung nur wiederholen soll, reichen hier 1 Pixel Höhe (hier der Anschaulichkeit halber 20 px). Die Grafik sieht für sich alleine folgendermaßen aus:
Der Clou dabei ist jetzt dass man diese Grafik wie gesagt nicht dem Navigationsbereich als Hintergrund zuweist, sondern dem übergeordneten container-div.
#container {
background: #E1FCFF url(bgbild.gif) repeat-y top left;
}
Damit reicht die "Spalte" wirklich von ganz oben bis unten zum Footer. Aus dem Navigationsbereich als auch dem content-Bereich muss man die Hintergrundfarben entfernen (sofern per CSS welche zugewiesen wurden), damit der Hintergrund des dahinterliegenden container-divs durchscheinen kann. Durch die Angabe einer Hintergrundfarbe UND eines Hintergrundbildes für den container-div wie in unserem Beispiel hat man dort, wo das 180 Pixel breite Bild liegt, eine dunklere Hintergrundgrafik und überall anders eine hellere Hintergrundfarbe (hier #E1FCFF) - unabhängig von der Höhe der Spalten.
Beispiel: "linke Spalte" per Hintergrundgrafik hervorgehoben
Möchte man bei einem 3-spaltigen Fixbreitenlayout die mittlere Spalte mit einem z.B. orangefarbenen Verlauf und die rechte Spalte mit einem grünfarbenen Verlauf einfärben (nur um zu zeigen, dass auch das geht - kein Anspruch auf optimale Farbgebung), kann man entweder eine Grafik anfertigen, die genau so breit wie zweite und dritte Spalte gemeinsam ist, beide Spalten entsprechend faerbt und anschließend für den container aber rechtsbündig zuweist
#container {
background: #E1FCFF url(bgbild2.gif) repeat-y top right;
}
oder die Hintergrundgrafik genauso breit wie den gesamte übergeordneten Container macht; aber den Bereich der ersten Spalte transparent läßt (und damit die Hintergrundfarbe wieder durchcheint):
#container {
background: #E1FCFF url(bgbild3.gif) repeat-y top left;
}
Beispiel: 3spaltiges Layout, rechtsbündige Hintergrundgrafik für 2 Spalten
Beispiel: 3spaltiges Layout, linksbündige Hintergrundgrafik für 2 Spalten, 1 Spalte transparent
Hintergrundbilder in Liquid Layouts
Bei Liquid Layouts funktioniert dieses Prinzip mit den Faux Columns auch, allerdings muss man vorher ein wenig rechnen. Liquid Layouts haben keine fixe Spaltenbreite, da sie sich an die verfügbare Browserfenstergröße anpassen und daher bei kleinen Fenstern auch schmäler als bei breiten Fenstern sind. Man kann also nicht eine Grafik mit einer fixen Breite so verwenden, wie wir es bei Fixbreitenlayouts gesehen haben, die Hintergrundbilder würden nicht mit der Spaltenbreite mitskalieren.
Man bedient sich hier der Positionierung von Hintergrundbildern mittels Prozentwerten, um diese Einschränkung zu umgehen: Wenn ein Hintergrundbild mit Einheiten wie px, em, ... positioniert wird, gilt der Wert (bei einer Angabe) bzw. die Werte (bei Angabe von 2 Werten) als horizontaler und vertikaler Offset zum Ursprung des Objekts, dem das Hintergrundbild zugewiesen werden soll.
D.h. die CSS-Angabe
weist dem div mit der id "navigation" die Hintergrundgrafik bild.gif mit einem x-Offset von 10 Pixeln und einem y-Offset von 35 Pixeln zu. Die Grafik wird mit ihrem Ursprung (links oben, 0,0) an der Koordinate 10, 35 ausgerichtet. Falls man ein repeat-y angibt, wird sie von oben nach unten wiederholt (und hat damit keinen vertikalen Offset mehr). Die folgende Grafik versucht, diese Positionierung ohne vertikaler oder horizontaler Wiederholung zu demonstrieren, der aus dem div überstehende Teil der Hintergrundgrafik wird natürlich im Browser nicht angezeigt sondern abgeschnitten.
Wenn allerdings ein Hintergrundbild mittels Prozentwerten ausgerichtet wird, wird dies anders interpretiert: z.B. besagt die CSS-Angabe
Aber das ist noch nicht alles: Zusätzlich wird dieser Bezugspunkt in Relation zum Objekt selber verschoben. In unserem Falle von seiner linken oberen Ecke aus 30% seiner Gesamtbreite nach rechts und 40% seiner Gesamthöhe nach unten, dieser Punkt würde sich in unserem Beispiel ca. hier befinden:
Mit dem positinierten Hintergrundbild, dessen prozentueller Bezugspunkt an genau dieser Stelle würde das in etwa so aussehen (wieder gilt: im Webbrowser würden überstehende Teile der Hintergrundgrafik einfach abgeschnitten und nicht sichtbar sein):
Mit dieser Technik kann man jetzt Hintergrundgrafiken erzeugen, die von den Proportionen her genauso gestaltet sind wie die Spalte, in der die Grafik als Hintergrundbild erscheinen soll. Möchte man z.B. für eine erste Spalte, die im folgenden Beispiel 25% der Gesamtbreite hat eine Hintergrundgrafik verwenden, erzeugt man in einem Bildeditor ein Bild mit möglichst großer Breite (um auch hohe Auflösungen abzudecken). Den Bereich, der den Prozentsatz der anzuzeigenden Spalte abdecken soll (in unserem Fall 25%), färbt man jetzt beliebig ein, den Rest speichert man als transparent.
Dies wäre bei einem Beispielbild von 2000 Pixeln Breite und 220 Pixeln Höhe der Bereich von 0,0 bis 500,20 (25% von 2000 = 500) und würde wie folgt aussehen (Transparenter Bereich durch Checker-Muster gekennzeichnet und rechts abgeschnitten), bitte anklicken für Originalgröße:
Durch Zuweisung der Hintergrundgrafik zum übergeordneten div-container mittels folgendem CSS wird die Hintergrundgrafik im Liquid Layout immer passend zur Spaltenbreite unabhängig zur Fenstergröße richtig angezeigt.
Ein kleiner Nachteil bzw. etwas Mehrarbeit zu Fixbreitenlayouts muss man allerdings in Kauf nehmen: Es muss für jede Spalte, der man ein Hintergrundbild zuweisen möchte, ein eigener übergeordneter div eingeführt werden, da jeweils nur eine Spalte pro Bild behandelt werden kann (und nicht im Gegensatz zu Fixbreitenlayouts mit einem einzigen Bild beliebig viele Spalten). D.h. bei einem dreispaltigen Layout, bei dem man die äußere linke und die äußere rechte Spalte per Hintergrundbild stylen will, wird beim folgenden Beispiel ein Hintergrundbild dem übergeordneten container-div, das andere dem content-div zugeordnet. Das Hintergrundbild für die linke Spalte ist dasselbe wie bei dem Beispiel oben, das Hintergrundbild für die rechte Spalte sieht wie folgt aus (diesmal am linken Rand abgeschnitten; bitte für Originalgröße anklicken):
Ein mögliches HTML-Beispiel könnte so aussehen.
Bei Spalten mit Breitenangabe in em (d.h. bei Elastic Layouts) funktioniert leider mit Hintergrundbildern keiner der hier erklärten beiden Ansätze, da Hintergrundbilder zwar mit einem Offset in der Einheit em positioniert werden können, aber dann nur das Bild um exakt den em-Wert verschoben wird, nicht auch der Registrierungspunkt im Bild selber (wie es aber bei der Positionierung mit Prozent der Fall ist). Man kann zwar Bilder als Hintergrund vergeben, diese "skalieren" bzw. bewegen sich nicht passend zur Spaltenbreite mit.
Man bedient sich hier der Positionierung von Hintergrundbildern mittels Prozentwerten, um diese Einschränkung zu umgehen: Wenn ein Hintergrundbild mit Einheiten wie px, em, ... positioniert wird, gilt der Wert (bei einer Angabe) bzw. die Werte (bei Angabe von 2 Werten) als horizontaler und vertikaler Offset zum Ursprung des Objekts, dem das Hintergrundbild zugewiesen werden soll.
D.h. die CSS-Angabe
#navigation {
background-image: url(bild.gif) no-repeat 10px;
}
weist dem div mit der id "navigation" die Hintergrundgrafik bild.gif mit einem x-Offset von 10 Pixeln und einem y-Offset von 35 Pixeln zu. Die Grafik wird mit ihrem Ursprung (links oben, 0,0) an der Koordinate 10, 35 ausgerichtet. Falls man ein repeat-y angibt, wird sie von oben nach unten wiederholt (und hat damit keinen vertikalen Offset mehr). Die folgende Grafik versucht, diese Positionierung ohne vertikaler oder horizontaler Wiederholung zu demonstrieren, der aus dem div überstehende Teil der Hintergrundgrafik wird natürlich im Browser nicht angezeigt sondern abgeschnitten.
Wenn allerdings ein Hintergrundbild mittels Prozentwerten ausgerichtet wird, wird dies anders interpretiert: z.B. besagt die CSS-Angabe
#navigation {
background-image: url(bild.gif) no-repeat 30% 40%;
}
Aber das ist noch nicht alles: Zusätzlich wird dieser Bezugspunkt in Relation zum Objekt selber verschoben. In unserem Falle von seiner linken oberen Ecke aus 30% seiner Gesamtbreite nach rechts und 40% seiner Gesamthöhe nach unten, dieser Punkt würde sich in unserem Beispiel ca. hier befinden:
Mit dem positinierten Hintergrundbild, dessen prozentueller Bezugspunkt an genau dieser Stelle würde das in etwa so aussehen (wieder gilt: im Webbrowser würden überstehende Teile der Hintergrundgrafik einfach abgeschnitten und nicht sichtbar sein):
Mit dieser Technik kann man jetzt Hintergrundgrafiken erzeugen, die von den Proportionen her genauso gestaltet sind wie die Spalte, in der die Grafik als Hintergrundbild erscheinen soll. Möchte man z.B. für eine erste Spalte, die im folgenden Beispiel 25% der Gesamtbreite hat eine Hintergrundgrafik verwenden, erzeugt man in einem Bildeditor ein Bild mit möglichst großer Breite (um auch hohe Auflösungen abzudecken). Den Bereich, der den Prozentsatz der anzuzeigenden Spalte abdecken soll (in unserem Fall 25%), färbt man jetzt beliebig ein, den Rest speichert man als transparent.
Dies wäre bei einem Beispielbild von 2000 Pixeln Breite und 220 Pixeln Höhe der Bereich von 0,0 bis 500,20 (25% von 2000 = 500) und würde wie folgt aussehen (Transparenter Bereich durch Checker-Muster gekennzeichnet und rechts abgeschnitten), bitte anklicken für Originalgröße:
Durch Zuweisung der Hintergrundgrafik zum übergeordneten div-container mittels folgendem CSS wird die Hintergrundgrafik im Liquid Layout immer passend zur Spaltenbreite unabhängig zur Fenstergröße richtig angezeigt.
#wrapper {
background: #E8E8E8 url(bgbild4a.gif) repeat-y 25%;
}
Ein kleiner Nachteil bzw. etwas Mehrarbeit zu Fixbreitenlayouts muss man allerdings in Kauf nehmen: Es muss für jede Spalte, der man ein Hintergrundbild zuweisen möchte, ein eigener übergeordneter div eingeführt werden, da jeweils nur eine Spalte pro Bild behandelt werden kann (und nicht im Gegensatz zu Fixbreitenlayouts mit einem einzigen Bild beliebig viele Spalten). D.h. bei einem dreispaltigen Layout, bei dem man die äußere linke und die äußere rechte Spalte per Hintergrundbild stylen will, wird beim folgenden Beispiel ein Hintergrundbild dem übergeordneten container-div, das andere dem content-div zugeordnet. Das Hintergrundbild für die linke Spalte ist dasselbe wie bei dem Beispiel oben, das Hintergrundbild für die rechte Spalte sieht wie folgt aus (diesmal am linken Rand abgeschnitten; bitte für Originalgröße anklicken):
#container {
background: #E8E8E8 url(bgbild4a.gif) repeat-y 25%;
}
#content {
background: url(bgbild5.gif) repeat-y 75%;
}
Ein mögliches HTML-Beispiel könnte so aussehen.
Bei Spalten mit Breitenangabe in em (d.h. bei Elastic Layouts) funktioniert leider mit Hintergrundbildern keiner der hier erklärten beiden Ansätze, da Hintergrundbilder zwar mit einem Offset in der Einheit em positioniert werden können, aber dann nur das Bild um exakt den em-Wert verschoben wird, nicht auch der Registrierungspunkt im Bild selber (wie es aber bei der Positionierung mit Prozent der Fall ist). Man kann zwar Bilder als Hintergrund vergeben, diese "skalieren" bzw. bewegen sich nicht passend zur Spaltenbreite mit.
