07.07.2008
Dynamischer Header mit einer Konsole
(Pipline-Effekt)
Wer ein flexibles Layout verwendet steht oft vor dem Problem wie er einen Header gestaltet, damit sich dieser auch unterschiedlichen Bildschirmgrößen anpasst. In einer erneuten Co-Produktion mit www.ohne-pi.gehts-gar.net zeigen wir, wie man hierzu sowohl entsprechende Grafiken anfertigt, als auch diese mit CSS-Style-Angaben entsprechend einbindet. Das vorweggenommene Ergebnis soll dann aussehen wie in unserer Demo dargestellt.
Zum Einsatz kommen die Grafiken kleeblatt.gif und konsole.gif.
Um unterschiedliche Browserdarstellungen zu vermeiden, setzen wir zunächst mit dem Universalselektor sämtliche Innen- und Außenabstände auf "Null". Näheres hierzu findet ihr hier erläutert.
* {
margin: 0;
padding: 0;
}
Die "Konsole", also die sich über den ganzen Headerbereich erstreckende "Grundlinie", weisen wir als Hintergrundgrafik mit folgenden Angaben in Kurzschreibweise dem body zu:
body {
background: #ebe7da url(konsole.gif) repeat-x;
}
Die einzelnen Angaben haben folgende Bedeutung:
#ebe7da ist die generelle Hintergrundfarbe für den Body-Bereich.
Mit url(konsole.gif) wird die Hintergrundgrafik als Konsole eingebunden. Da sie sich nur horizontal wiederholen (kacheln) soll und sich nicht auch noch nach unten ausbreitet, wird noch die Angabe repeat:x benötigt.
Zur Einbindung der Kleeblattgrafik gibt es unterschiedliche Möglichkeiten: Man könnte sie unmittelbar als linksgefloatetes Image einfügen. Hier kommt sie als Hintergrundgrafik für die Titelüberschrift mit folgenden Angaben zum Einsatz:
h1 {
background: url(kleeblatt.gif) no-repeat top left;
height: 165px;
font: bold 3.5em Forte, Verdana italic;
color: #008040;
padding-top: 25px;
text-align: center;
}
background: url(kleeblatt.gif) bedeutet: Es wird die Grafik "kleeblatt.jpg" als Hintergrundgrafik verwendet.
no-repeat sorgt dafür, dass sie sich nicht wiederholt und mit top left wird sie in der oberen linken Ecke platziert.
Der height-Wert ist dehalb erforderlich, damit die Grafik in ihrer vollen Höhe sichtbar wird. Er entspricht somit der Grafikhöhe.
Als Schrift soll die Schriftart "Forte" in "kursiv" verwendet werden. Da es jedoch nicht unbedingt eine Schriftart ist, welche auf jedem PC installiert ist, geben wir zur Sicherheit noch eine gängige Ersatzschriftart an, hier "Verdana".
Schließlich definieren wir noch die gewünschte Schriftfarbe mit einem color-Wert, positionieren die Überschirft mit einem passenden Padding und zentrieren den Text.
Auch für den Untertitel können wir die Überschrift h1 verwenden. Da seine Formatierung jedoch abweichen soll, verwenden wir dazu eine CSS-Klasse, z.B. mit folgenden Angaben:
.untertitel {
font: bold 0.3em Verdana;
}
Das Ganze nun noch mit HTML-Code zusammenfügen und schon haben wir unsere flexible Headerkonsole:
<body>
<h1>Kleeblatt & Co.<br>
<span class="untertitel">
Ultimative Tipps für den Hobbygärtner
</span>
</h1>
</body>
Ergänzend zu diesem Thema sei ebenfalls auf diese Anleitung verwiesen.