CSS Layout

Im dritten Teil der Artikelserie geht es darum, das Aussehen der Navigation zu gestalten. Es werden dazu viele verschiedene Einstellungen vorgenommen. Auf die wichtigsten und interessantesten geht die nachfolgende Beschreibung näher ein.

Listenauszeichnung

In einem ersten Schritt setzen wir für die Liste als die Außenabstände (Margins) wie auch die Innenabstände (Paddings) auf Null gesetzt. Dies vererbt sich auch auf die darin befindlichen Listenelemente (auch auf die darin verschachtelten). Somit sind die Listeneinträge nicht mehr eingerückt.

Mit list-style: none; werden die normalerweise angezeigten Aufzählungszeichen ausgeblendet. Normalerweise würde es ausreichen, dies bei der Liste (ul) anzugeben und nicht auch noch bei den Listeneinträgen – aber hier sind wie so oft auch mal wieder die Browserhersteller schuld daran.

Link Layout

Um nun das Aussehen der einzelnen Links zu ändern, werden über #mainnav li a einige Einstellungen vorgenommen. Hiermit werden alle Links ausgewählt, die sich innerhalb unserer Navigationsliste und in einem Listenelement befinden. Durch ein Hintereinanderschreiben (mit Leerzeichen getrennt) wird dies erreicht. Der wichtigste Teil davon ist, dem Link über display: block; als Blockelement auszuzeichnen.

Hier eine kleine Grafik um dies zu verdeutlichen:


Dadurch wird der gesamte hellblau hinterlegte Bereich klickbar und füllt automatisch die größtmögliche Breite. Durch das Zusammenspiel von vertical-align: middle; und padding: 13px 0 13px 5px; wird der Linktext vertikal zentriert im Listenelement dargestellt. Das Aussehen des Links wird mit text-decoration: none; color: #555; font-weight: bold; und font-size: 82%; verändert. Das Hintergrundbild wird nicht dem Listenelement sondern dem Link zugewiesen. Das hat den Vorteil, dass über das Link-Hover Attribut das Hintergrundbild geändert werden kann. Allerdings ist es problematisch, dem a:hover ein anderes Hintergrundbild zuzuweisen. Da das neue Bild erst bei Bedarf vom Webserver heruntergeladen wird kommt es zum Flickern. Besser ist es deswegen, nur die Position des Hintergrundbilds zu verändern. Vereinfacht sieht dies so aus:

Hover-Effekt:
a {
display: block;
background: #e1f0fe url(images/hovernav_lvl1.gif) repeat-x top left;
}
a:hover {
background-position: 0 -37px;
}


Dadurch wird das Nachladen und Flickern erfolgreich verhindert.

Linkabgrenzung

Um eine Abgrenzung zwischen den einzelnen Listenelementen zu erreichen wird in dem Beispiel jedem Listenelement ein unterer Rahmen zugewiesen. Dieser Rahmen ist jedoch auch notwendig, um einen Bug im Internetexplorer entgegenzuwirken. Dieser erzeugt sonst einen Abstand zwischen den einzelnen Listenelementen.

Unternavigation

Für die verschachtelte Unternavigation sind nur geringfügige Änderungen notwendig. Es müssen nur das Hintergrundbild und die Farbe des unteren Rahmens angepasst werden. Alle anderen Werte (wie die Abstände, das Aussehen der Links, der Hover Effekt und das Verschieben des Hintergrundbilds – auch wenn es ein anderes ist, …). Welche Elemente (noch) alle vererbt werden überlasse ich jetzt Dir es herauszufinden :-)

Accessibility

Noch abschließend ein paar Worte zur Accessibility des Layouts. Bei der Schriftgestaltung wurde darauf geachtet, die Größe nicht pixelgenau festzulegen. Dadurch ist auch die Schriftgröße im Internet Explorer veränderbar. Wichtig ist es auch, den Links eine Hintergrundfarbe mitzugeben. Manche Internetsurfer surfen ohne Bilder, dadurch kann unter Umständen der Kontrast so schlecht werden, dass die Links nicht mehr lesbar sind. Dies hat den sehr positiven Nebeneffekt, dass die Links auch schon dann gut lesbar sind, wenn die Grafiken noch nicht geladen wurden.

Zusammen:

#navigation ul
{
margin: 0;
padding: 0;
list-style: none;
line-height: 11px;
}
#navigation ul li
{
list-style: none;
border-bottom: 1px solid #a2cbf2;
}
#navigation ul li#activenav
{
border-bottom: 1px solid #fff; /* use background color */
}
#navigation ul li a
{
margin: 0;
display: block;
vertical-align : middle;
text-decoration: none;
padding: 13px 0 13px 5px;
color: #555;
font-weight: bold;
font-size: 82%;
background: #e1f0fe url(images/hovernav_lvl1.gif) repeat-x top left;
}
#navigation ul li#activenav a
{
color: #333;
}
#navigation ul li li#activesubnav a
{
color: #333;
font-weight: bold;
}
#navigation ul li a:hover
{
color: #888;
background-position: 0 -37px;
}
#navigation ul li li
{
border-bottom: 1px solid #f9ce79;
}
#navigation ul li li a
{
font-weight: normal;
background: #fceab9 url(images/hovernav_lvl2.gif) repeat-x top left;
}