Seiten-Header mit CSS gestaltenKopfarbeit
Flexibles Layout
Seiten-Header mit CSS gestalten
Wer ein Layout mit CSS entwickelt, wird in vielen Fällen zu festen Größen greifen. Navigation, Inhaltsbereich und rechte Spalte haben jeweils eine feste Größe. Beim Skalieren der Schriften wächst zwar alles mit, aber ansonsten bleibt der Inhalt fix. Dies ist aber nur eine Variante, ein Layout umzusetzen. Die zweite ist ein flexibles Layout. Dabei bleibt zumindest der Inhaltsbereich skalierbar. Die Frage ist dann allerdings, was mit dem Header passiert? Bleibt der Seitenkopf fix oder skaliert er mit? Dieser Artikel zeigt vier Varianten, wie ein Header mit flexibler Größe realisiert werden kann. Darunter sind klassische Alternativen und neuere Ansätze.
Variante 1: Skalierbarer Bereich
Seiten-Header mit CSS gestalten
Zumindest bestimmte Bereiche eines Seitenheaders sollten meist fix sein. Dazu zählt das Logo und unter Umständen eine Navigationsleiste oder Suche. Der Gedanke liegt also nahe, das Logo selbst zu fixieren und dafür einen Bereich zu definieren, der mitskaliert. Am einfachsten ist es, diesen Bereich nur mit einer Farbe zu füllen.
Diese Idee ist mit einem Tabellen-Layout einfach umzusetzen. Die Tabelle wird einfach in einzelne Zellen aufgeteilt. Der skalierbare Bereich erhält keine Breite, aber eine Hintergrundfarbe.
Aber auch mit CSS ist das problemlos möglich. Wie meistens in der CSS-Welt führen sehr viele verschiedene Wege zum Ziel. Bei der folgenden sehr einfachen Variante besteht der Header aus einem eigenen div-Block. Darin befinden sich zwei weitere div-Blöcke für die Elemente des Headers, die links und rechts des skalierbaren Bereichs platziert werden sollen. Sie können hier beliebige Inhalte verwenden und auch beliebig viele div-Blöcke anordnen. In diesem Beispiel enthalten die zwei Blöcke jeweils ein Bild für die linke und rechte Seite des Headers:
Die einzelnen Blöcke richten Sie mit dem CSS-Befehl float aus, einem der wichtigsten Mittel beim CSS-Layout. Wenn Sie beispielsweise noch Textinhalt hinzufügen wollen, können Sie diesen mit einem weiteren div-Block anfügen:
Aufpassen müssen Sie bei dieser Form der Positionierung immer auf die Leerzeichen zwischen den div-Blöcken und dem Bild. Leerzeichen verhindern hier nämlich eine genaue Positionierung und sorgen für Blitzer, beispielsweise unterhalb des Bildes.
Nun zum CSS. Für den Header sollten Sie die Randabstände auf 0 setzen. Eigentlich werden sie über margin gesteuert, alte Opera-Versionen verwenden aber padding. Das div-Element für den Header wird anschließend auf die gewünschte Größe gebracht und mit der Hintergrundfarbe versehen, die den Bereich zwischen den zwei Bildern füllen soll:
body {
margin: 0px;
padding: 0px;
}
#header {
background-color: #11A0E7;
width: 100%;
height: 60px;
}
Bleibt noch ein Problem: Wird das Fenster zu eng zusammengeschoben, wird der rechte div-Block mit dem Bild auf die nächste Zeile verschoben. Dieses Umknicken lässt sich mit der Angabe einer minimalen Breite verhindern:
#header {
background-color: #11A0E7;
width: 100%;
min-width: 380px;
height: 60px;
}
Leider kennt der Internet Explorer min-width nicht und verschiebt daher dennoch. Zwar könnten Sie das Verhalten auch per CSS-Hack emulieren (siehe zum Beispiel www.cssplay.co.uk/boxes/width.html) oder per Javascript lösen (beispielsweise www.cameronmoll.com), allerdings haben beide Methoden Nachteile. Der Hack lässt sich nicht beliebig mit dem eigenen Layout verbinden, und die Javascript-Lösung erfordert natürlich aktiviertes Javascript im Browser des Besuchers. Abgesehen davon bleiben die großen Nachteile von Hacks: Sie sind hässlich und in zukünftigen Browsern unter Umständen unbrauchbar.
Variante 2: Flexibles Bild
Seiten-Header mit CSS gestalten
Die zweite Variante ähnelt der ersten, nur dass der skalierbare Bereich durch ein Bild ersetzt wird, das relativ lang ist. Dieses Bild wird immer nur in einem Ausschnitt gezeigt, der wiederum skalierbar ist. Ein bekanntes Beispiel dafür ist www.baden-wuerttemberg.de.
Realisiert wird diese Variante ähnlich wie Variante eins. Die Basis bilden zwei Blöcke für die Bilder links und rechts:
Das Bild in der Mitte wird über ein Hintergrundbild realisiert. Es wird um die Breite des linken Bildblocks nach rechts verschoben und nur einmal angezeigt. Wenn das Bild nicht groß genug ist, kann eine maximale Breite angegeben sein. Diese gilt allerdings wieder nicht für den Internet Explorer.
#header {
background-image: url('header_mitte.jpg');
background-position: 262px 0px;
background-repeat: no-repeat;
width: 80%;
min-width: 600px;
max-width: 1622px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
Zusätzlich zentrieren Sie hier der Header noch mit margin-left: auto und margin-right: auto und geben ihm eine eigene flexible Breite. Diese Werte lassen sich natürlich frei verändern.
Aus Design-Sicht ist das Bild in der Mitte die größte Herausforderung. Im vorliegenden Beispiel besteht es aus einer langen Fensterreihe, die sich allerdings nicht exakt wiederholt. Würde das Bild eine Wiederholung erlauben, wäre Variante 3 eine gute Alternative. Die Website von Baden-Württemberg verwendet dagegen zwei aneinandergehängte Bilder. Auch eine Bildfolge im Daumenkino-Design wäre hier denkbar.
Variante 3: Hintergrundkachel
Seiten-Header mit CSS gestalten
In Variante 3 sorgt eine Hintergrundkachel dafür, dass der Header beliebig breit werden kann. Dieses Verfahren ist schon recht alt, da die Kachelung in Website-Hintergründen schon in den Anfangstagen des Webs möglich war. Seitdem ist eine Zeit lang jede Art von Kachel aus der Mode gekommen. Mittlerweile werden Kacheln allerdings wieder vorsichtig eingesetzt.
Der Grundaufbau für diese Variante ist ähnlich wie aus den ersten beiden gewohnt:
Statt eines einzelnen Hintergrundbildes folgt nun ein sich wiederholendes Hintergrundbild. Dieses Bild muss natürlich genau passen. Ein guter Design-Trick, um das zu realisieren, ist eine kleine optische Grenze. Im vorliegenden Beispiel fassen Sie das Holzstück, das als Muster für den sich wiederholenden Hintergrund dient, leicht von einem schwarzen Rahmen ein.
Den Hintergrund platzieren Sie dann auf die Position direkt neben dem festen Bildbereich links oben. Die Kachelung soll nur horizontal erfolgen (background-repeat: repeat-x).
#header {
background-image: url('header_mitte.jpg');
background-position: 228px 0px;
background-repeat: repeat-x;
width: 100%;
height: 118px;
}
Breite und Position des Headers selbst sind natürlich auch bei dieser Variante frei wählbar. Der sich wiederholende Hintergrund kann auch aus wesentlich einfacheren Elementen als hier gezeigt bestehen. Denkbar sind beispielsweise einfache horizontale Streifen oder Muster, die mit einem wenige Pixel breiten Hintergrundbild realisiert werden.
Variante 4: Flexible Bildgröße
Seiten-Header mit CSS gestalten
Hier folgt der normale Inhalt der Seite.
Fazit
Seiten-Header mit CSS gestalten
Die hier gezeigten Varianten sind nur vier Wege, um flexible Header zu realisieren. An der richtigen Stellen geschnitten und mit etwas Überlegung lassen sich auch komplexere Header-Layouts umsetzen, die auf den ersten Blick nicht flexibel aussehen.
In den vergangenen Monaten tauchten Unmengen an guten und weniger guten Ideen rund um das CSS-Layout auf. Sie sollten bedenken, dass es nicht nur um die CSS-Tricks geht. Sie sind eher Mittel zum Zweck. Im Vordergrund steht das passende Design. Denn ohne ein interessantes Bild für den mittleren Bereich ist Variante 2 ziemlich uninteressant. Und ohne perfekte Kachel sieht Variante 3 peinlich aus. Das Design aus Variante 4 ist dagegen nur dann flexibel, wenn der Nutzer die Schriftgröße ändert, und nicht bei unterschiedlich großem Browserfenster. Hier sind Bilder begünstigt, die der Browser mit seiner integrierten Skaliertechnik gut vergrößern und verkleinern kann.
Alle Dateien und Listings zum Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.