08.07.2008

Röhrenbalken als Div-Aufpepper

So genannte "Röhrenbalken" lassen sich auf vielfältige Art für die Gestaltung einer Website einsetzen. Wie sie erstellt werden, erklärt wieder Garnet auf www.ohne-pi.gehts-gar.net.

Horizontale Röhren

Recht einfach lässt sich ein Div einer Homepage mit einer Röhrenbalkengrafik aufpeppen. Zum Beispiel, indem wir eine "Röhre" in den oberen oder unteren Div-Bereich platzieren wie in Demo1 mit dieser Grafik Röhre lila dargestellt.
Wir müssen lediglich mit repeat-x dafür sorgen, dass sich die Grafik nur horizontal (auf der x-Achse) und nicht vertikal kachelt.
Im ersten Beispiel sorgt der auf die Grafikhöhe abgestimmte und größere padding-top-Wert dafür, dass sich die Überschrift nicht im Balken befindet.

Die Style-Angaben findet ihr - diesmal in Form einer Klasse - direkt in den entsprechenden Div's.
Soll die Grafik unten angeordnet werden, sind die Background-Angaben mit bottom left zu ergänzen.

Die Röhre lässt sich auch gleichzeitig oben und unten einbinden. Entweder indem wir einen zweiten Div verwenden oder einfacher: Indem wir im oberen Bereich die Grafik als echtes Image einbinden und lediglich unten als Hintergrund. Die Bildbreite entspricht der des Div.
In diesem Fall setzen wir die oberen, linken und rechten Paddingwerte des Div auf "Null", damit das Image ohne Innenabstand dargestellt wird. Unten kann dagegen ein Paddingwert angegeben werden.
Stattdessen weisen wir die Innenabstände dem Absatzelement p zu, damit der Text nicht am Rand klebt.

Schließlich können wir eine Röhre auch noch als Hintergrund einer Überschrift einsetzen. Um den Überschriftentext vertikal zu zentrieren verwenden wir für die jeweilige Überschrift eine line-height, welche der Grafikhöhe entspricht. Natürlich sollte die Schriftgeöße etwas kleiner sein.

Vertikale Röhren

Auch eine seitlich angebrachte Röhre kann etwas Schwung in unser Layout bringen. Hier ist es wichtig, dass der Farbverlauf der verwendeten Grafik nicht von oben nach unten, sondern von links nach rechts erfolgt.
Dementsprechend kacheln wir diesmal die Grafik nicht horizontal, sondern vertikal mit repeat-y auf der y-Achse.

Veranschaulicht ist dieser Effekt in Demo 2

Das Mark-Up für die Röhre links Röhre links ist relativ einfach. Lediglich beim linken Paddingwert ist darauf zu achten, dass die Grafik selbst eine bestimmte Breite hat, hier 10px. Deshalb muss dieser Abstand zum regulären Padding hinzugerechnet werden, so dass der linke Padding-Wert 20px beträgt, wenn für den rechten 10px vorgesehen sind.

Für die Darstellung mit Röhre rechts Röhre rechts sind die Paddingangaben entsprechend seitenverkehrt vorzunehmen: Da der Balken mit top right rechts platziert ist, muss der rechte Innenabstand um die Grafikbreite erhöht werden.
In diesem Beispiel wurde außerdem die Hintergrundgrafik mit einem Grafikprogramm um 180 Grad gedreht, damit sich der dunklere Farbanteil ebenfalls außen befindet.

Soll die Röhre inks und rechts erscheinen, müssen wir einige zusätzliche Überlegungen anstellen:
Ein Div kann immer nur eine Hintergrundgrafik enthalten. Im Gegensatz zu den breitenbegrenzten Div's mit den horizontalen Röhren, lässt sich die Höhe eines Div's nicht immer bestimmen. Schließlich soll sie mit zunehmendem Inhalt mitwachsen.
Wir verschachteln deshalb zwei Div's: Der äußere enthält die "linke Röhre". Den inneren Div mit der "rechten Röhre" und dem eigentlichen Inhalt setzen wir in den äußeren Div. Damit passt sich die Höhe des äußeren Div's automatisch der Höhe des inneren an und unsere "linke Röhre" wird genauso hoch wie die rechte.

Wichtig:
Damit bei der vertikalen Kachelung keine unerwünschten Lücken entstehen, müssen die Außen- und Innenabstände mit dem Universalselektor auf "Null" gesetzt werden.

Sehen wir uns zunächst die Styleangaben für den Außendiv mit der linken Röhre an:

.aussen {
background: #484848 url(gruen1.gif) repeat-y;
color: #dfdfdf;
width: 500px;
}

Eine generelle Hintergrundfarbe, die für die linke Röhre verantwortliche Hintergrundgrafik "gruen1.gif" wird mit repeat-y vertikal gekachelt und schließlich noch eine Schriftfarbe wie Containerbreite - mehr wird nicht benötigt.

Für den inneren Div reicht unsere um 180 Grad gedrehte Grafik, hier mit "gruen2.gif" bezeichnet, die sich ebenfalls vertikal kachelt. Die Angaben top right sorgen dafür, dass die Grafik oben rechts im Div platziert ist:

.innen {
background: url(gruen2.gif) repeat-y top right;
}

Damit unsere Hintergrundgrafiken auch wirklich an den äußeren Rand kommen, wurde bei den v.g. Div-Klassen bewusst auf einen Innenabstand verzichtet. Dennoch soll der Text etwas Abstand zu den Div-Außenrändern erhalten. Wir erreichen dies über die Paddingzuweisung zu den verwendeten Elementen, hier h3 und p. Beim linken und rechten Abstand ist wieder zusätzlich die Grafikbreite zu berücksichtigen. Somit ergänzen wir die Styleangaben wie folgt:

h3, p {
padding: 10px 20px;
}

HTML

<div class="aussen">
<div class="innen">
<p>
Inhalt
</p>
</div>
</div>

nach oben