Das Layout der Kopfleiste

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Wir beschäftigen uns nun mit dem Kopf unseres Layouts, der in unserem Entwurf das Logo der Seite und die Hauptnavigation enthält. Sie erinnern sich, dass wir beim Erstellen des Dokuments keinerlei Bilder eingefügt hatten. Wir müssen uns jetzt überlegen, wie wir die Bilder unseres Entwurfs am geschicktesten in unser Layout einbinden können. Zuerst fügen wir das Logo in einem img-Element ein. Den Namen der Seite geben wir im alt-Attribut des Bildes an, damit Benutzer, die die Anzeige von Bildern unterbunden haben, oder solche, die die Seite mit einem Screenreader besuchen, den Namen der Seite lesen können.

Fügen Sie das Logo direkt nach dem öffnenden header-div in Ihr Dokument ein, so wie hier gezeigt:

Wenn Sie die Seite jetzt im Browser betrachten, sollte das Bild in der oberen linken Ecke der altweißen Box angezeigt werden.

Der grafische Entwurf für unser Seitenlayout sieht eine feine, hellblaue Linie oberhalb und unterhalb der Titelzeile und der Navigation vor. Nun, wie erzielen wir diesen Effekt? Wir werden die Titelzeile und die Navigation in ein weiteres div-Element einschließen, dem wir oben und unten einen Rahmen zufügen. Wie das gemacht wird, sehen Sie hier:

Mit der Regel #header-bottom können wir nun oben und unten einen Rahmen hinzufügen:

Zur Gestaltung der Titelzeile und der Navigation benutzen wir ein paar einfache Eigenschaften zur Textformatierung, mit denen wir inzwischen schon ziemlich vertraut sein sollten!

Für den Absatz, der die Titelzeile enthält, definieren wir noch ein id-Attribut, das unsere Titelzeile enthält:

Abbildung: Die Liste mit den Navigationselementen mit display: inline gestalten.

Zuerst setzen wir die Außen- und Innenränder der Liste mit margin und padding auf den Wert 0. Dann bestimmen wir für die li-Elemente in diesem Bereich die display-Eigenschaft inline. Dadurch werden alle Listeneinträge auf einer einzigen Zeile angezeigt, anstatt dass jeder Eintrag auf einer neuen Zeile beginnt. Die obige Abbildung veranschaulicht diesen Effekt. Die Links in der Navigation haben wir auch formatiert. Sie werden nun in der dunkelblauen Hintergrundfarbe und ohne Unterstreichung dargestellt. Die Titelzeile wurde fett kursiv und hat dieselbe Farbe wie die Links in der Navigation.

Mit der Darstellung in der obigen Abbildung haben wir allerdings ein Problem: Die Links in der Navigation sind kaum voneinander zu unterscheiden. Ein sichtbares Zeichen zwischen die Links einzufügen, wie etwa das Pipe-Symbol (|), das die Links optisch voneinander trennt, ist die bevorzugte Lösung dieses Problems. Genau das habe ich in dem folgenden Code-Fragment getan:

Wir können auch die Farbe der Listeneinträge dunkelblau (#050845) machen, sodass auch die Pipe-Symbole, die außerhalb der Links platziert sind, dunkelblau werden. Das verfeinerte Design der Kopfleiste sehen Sie in der folgenden Abbildung.

Abbildung: Die Textelemente in der Kopfleiste sind formatiert.

So langsam nimmt die Kopfleiste Gestalt an! Unsere nächste Aufgabe besteht darin, die Titelzeile und die Navigation auf denselben Stand zu bekommen. Das schaffen wir mit einer Eigenschaft, über die wir bislang noch nicht ausführlich gesprochen haben, die aber im weiteren Verlauf immer wichtiger für uns wird. Diese Eigenschaft heißt float.

Die Eigenschaft float

float ist eine der interessantesten und häufig benutzten CSS-Eigenschaften. Sie kann die Werte left, right oder none annehmen (obwohl none, der Vorgabewert, nur selten benutzt wird). Mit float wird ein Element nicht mehr an seiner normalen Position innerhalb des umgebenden Blocks angezeigt. Mit den Werten left oder right schwebt dieses Element, ausgehend von seiner normalen Position, an die linke beziehungsweise rechte Seite der umgebenden Box. Inhalte nachfolgender Boxen umfließen dieses so verschobene Element. Die Eigenschaft float kann auf jedes Blockelement angewendet werden.

Die float-Eigenschaft ersetzt das veraltete align-Attribut im img-Tag und führt zu genau demselben Ergebnis. In den letzten Versionen der HTML-Empfehlungen des W3C wurde das align-Attribut zugunsten der float-Eigenschaft als veraltet gekennzeichnet. Mit dem folgenden HTML-Fragment erzeugen Sie die Ausgabe, die in der anschließenden Abbildung gezeigt wird.

Abbildung: Bilder und Texte ausrichten mit der CSS-Eigenschaft float.

Gegenüber dem align-Attribut hat die float-Eigenschaft einen bedeutenden Vorteil: float kann außer auf Bildern auch auf andere Elemente angewendet werden, während align nur auf Bilder, Applets oder Objekte beschränkt war.

Hat Ihr Element keine Größenangaben?
Bestimmen Sie mit width die Breite. Wenn Sie float auf Elemente anwenden, die keine genau definierten Größenangaben haben, müssen Sie die Eigenschaft width in Ihre CSS-Deklaration aufnehmen. Ein Bild ist ein Beispiel für ein Element mit fest vorgegebenen Abmessungen, während die Größe für einen Textabsatz, eine Überschrift oder ein div nicht genau bestimmt ist.

Die Kopfleiste mit float

In diesem Abschnitt werden wir uns die float-Eigenschaft genauer ansehen. Wir entwerfen ein Layout, in dem die Hauptbereiche mit Hilfe dieser Eigenschaft positioniert werden. Um die Titelzeile und die Navigation korrekt zu platzieren, können wir unsere neu erworbenen Kenntnisse jetzt anwenden. Wir werden den Absatz mit der Titelzeile verschieben und dazu die folgenden hervorgehobenen Stilregeln hinzufügen:

Wir setzen die Eigenschaft margin auf den Wert 0 und entfernen damit den vorgegebenen Außenrand des Absatzes. Dann fügen wir innen links einen Rand von 20 Pixeln ein, wodurch die Titelzeile eingerückt wird, und geben ihr eine Breite von 300 Pixeln. Damit haben wir auf der rechten Seite noch ein wenig Platz, wie es in unserem Layoutentwurf vorgesehen ist. Mit der Eigenschaft float: left platzieren wir das Ganze links vom übrigen Inhalt, welcher hier die Navigationsliste ist.

Nachdem Sie die Regeln für den Absatz mit der Kopfleiste geändert haben, speichern Sie Ihr Stylesheet und schauen Sie sich das Ergebnis im Browser an. Die Navigation sollte nun neben der Kopfleiste angezeigt werden. Diese Elemente verhalten sich ganz genau so wie der Absatz aus dem obigen Beispiel, der ein Bild umfließt. Jetzt brauchen wir nur noch die Navigationsleiste rechts auszurichten und einen Innenrand für die Liste zu definieren, damit diese einen kleinen Abstand zum rechten Rand des Browserfensters hat. Mit den folgenden Stilregeln erzielen wir das Ergebnis von der nächsten Abbildung.

Abbildung: Die Titelzeile wurde mit float verschoben und die Navigation wurde ausgerichtet.

Wenn Sie dieses Beispiel bis hierhin mit dem Internet Explorer nachvollzogen haben, ist Ihnen vielleicht schon aufgefallen, dass nicht alles planmäßig verläuft. Manchmal verschwindet die Navigationsliste, die am rechten Rand ausgerichtet ist, zusammen mit einem Teil der hellblauen Randlinien auf geheimnisvolle Weise. Wenn Sie ein anderes Fenster öffnen, kann es sein, dass sie auf genauso geheimnisvolle Weise manchmal wieder angezeigt wird oder auch nicht.

Falls dieses Problem bei Ihnen auftritt: Willkommen in der wunderbaren Welt der CSS-Fehler im Internet Explorer. Dieser Fehler hier ist unter dem Namen »peekaboo bug« bekannt, bei dem Inhalte beinahe zufällig verschwinden und wiedererscheinen.

Es gibt eine ganze Menge solcher CSS-Fehler im Internet Explorer, aber die meisten scheinen im Dunstkreis einer mysteriösen, nicht standardkonformen Document-Object-Model-Eigenschaft namens hasLayout angesiedelt zu sein. Die Galaxie der »hasLayout-Fehler« ist unermesslich und schwer zu verstehen, aber zum Glück ist ihre Behandlung nicht zu schwierig. Normalerweise kann man sie umgehen, indem man für das Element, das den Ärger verursacht, eine aus einer ganzen Reihe belangloser Deklarationen in das Stylesheet einfügt. Das kann so einfach sein wie beispielsweise ein Höhenattribut in #header-bottom einzufügen, wie hier:

Diese Deklaration wird nach ihrem Erfinder Holly Bergevin als »Holly Hack« bezeichnet.

Fügen Sie diese Deklaration in Ihr Stylesheet ein und voilà! – Problem gelöst. Die Deklaration dieser Höhe hat so gut wie keinen Einfluss auf die Anzeige der Seite in anderen Browsern, da die Inhalte dieses div-Elements ohnehin diese Höhe überschreiten und tatsächlich bestimmen. Machen Sie sich keine Gedanken, wenn Sie das nicht verstehen. Sie müssen lediglich wissen, dass Sie problematischen Elementen oder deren Elternelementen solche Deklarationen hinzufügen und damit in vielen Fällen das bizarre Verhalten des Internet Explorer 6 korrigieren können.

Ein letzter Schritt bleibt noch zu tun: Die kleine Footbag-Ikone einzubinden, die in unserem grafischen Entwurf rechts von der Navigation dargestellt ist. Zuerst müssen wir das Bild neben der Navigationsliste in unsere Seite einfügen. Im folgenden HTML-Code hat das Bildchen ein leeres alt-Attribut, sodass kein Screenreader irgendetwas darüber lesen kann. Es soll lediglich hübsch anzusehen sein. Das id-Attribut hat den Wert ball.

Nun werden wir unser erstes Element mit CSS absolut positionieren, um dieses Bildchen korrekt auszurichten. Die relative Position zum oberen und rechten Rand im Dokument, an der das Bild stehen soll, ist uns bekannt. Der Abstand zum oberen Rand ergibt sich aus der Höhe des Logos und der Abstand zum rechten Rand aus der Breite des rechten Außenrands des div-Elements wrapper. Die folgenden Stilregeln positionieren den Ball korrekt ans Ende der Navigation:

Damit ist die Kopfleiste fertig! Wie sie aussieht, sehen Sie in der folgenden Abbildung.

Abbildung: Die fertige Kopfleiste.