Listenpunkte, Hintergrund, Abstände

Im traditionellen Webdesign wurden Navigationsbereiche oft aufwändig mit Grafiken und JavaScript realisiert. Mit CSS geht dies viel einfacher. Standardkonform, barrierefrei und flexibel. In diesem Artikel verwandeln Sie eine ungeordnete HTML-Liste Schritt für Schritt in einen hübschen, horizontalen Navigationsbereich. - Start unserer Serie für CSS-Einsteiger

Schritt 1: Zwei einfache Webseiten

Erstellen Sie in einem neuen Ordner zwei Webseiten namens index.html und kontakt.html. Irgendwo zwischen <head> und </head> geben Sie auf beiden Seiten die Wegbeschreibung zum Stylesheet an, das Sie in Schritt 2 erstellen:

<link href="navigation.css" type="text/css" rel="stylesheet" />

Um die Seiten im CSS später besser identifizieren zu können, erhält der <body>-Tag eine einmalige ID: auf der Startseite <body id="startseite">, auf der Kontaktseite <body id="kontaktseite">.

Da eine Navigation im Prinzip eine Auflistung von Hyperlinks ist, wird sie im HTML oft als einfache, ungeordnete Liste notiert. Das Aussehen der Liste regelt CSS. Erstellen Sie auf beiden Webseiten folgende Navigationsliste:

<ul id="navibereich">
  <li id="navi01"><a href="index.html">Startseite</a></li>
  <li id="navi02"><a href="kontakt.html">Kontakt</a></li>
</ul>

Diese Liste wird im Browser ungefähr so aussehen:

Eine einfache ungeordnete Navigationsliste

Jedes HTML-Element erzeugt im Browserfenster ein rechteckiges Kästchen. Schematisch dargestellt sind die Kästchen auf der Startseite wie folgt ineinander verschachtelt:

Schematische Darstellung der HTML-Elemente

Diese Kästchen (englisch "Boxes") gestalten Sie im folgenden mit CSS. Die vorsorglich vergebenen IDs benötigen Sie später, um die Elemente im CSS gezielt auswählen zu können.

Schritt 2: Stylesheet erstellen

Erstellen Sie ein leeres Stylesheet und speichern Sie es unter dem Namen navigation.css im selben Ordner wie die Webseiten. Definieren Sie zunächst die grundlegenden Schrifteinstellungen:

body {
  font-size: small;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Mit dieser einfachen CSS-Regel legen Sie Schriftgröße und -art für die Webseiten fest und überstimmen somit eventuelle Standardeinstellungen aus den Browser-Stylesheets.

Schritt 3: Listenelemente nebeneinander

Die Listenelemente stehen untereinander, weil li ein Block-Element ist und Block-Elemente einen integrierten Zeilenumbruch haben. Die folgende CSS-Regel verwandelt die Listenelemente im Navigationsbereich in Inline-Elemente und entfernt überdies die Aufzählungszeichen:

#navibereich li {
  display: inline;            /* Listenelemente nebeneinander */
  list-style-type: none;      /* Aufzählungszeichen entfernen */
}

Im Detail funktioniert diese CSS-Regel so:

Um die Änderungen auf den Navigationsbereich zu beschränken, benutzen Sie den verschachtelten Selektor #navibereich li, der in normalem Deutsch soviel bedeutet wie "Gestalte alle li-Kisten in der Kiste mit der ID navibereich".
display: inline bewirkt die Verwandlung der li-Elemente in Inline-Elemente. Inline-Elemente haben keinen integrierten Zeilenumbruch und stehen deshalb nebeneinander.
list-style-type: none schließlich entfernt explizit die Aufzählungspunkte.

Und so sieht die Navigationsliste jetzt aus:

Die Listenelemente nebeneinander und ohne Aufzählungspunkte

Noch nicht perfekt, aber die Richtung stimmt. Beachten Sie den Einzug von links vor dem ersten Navigationspunkt. Er wird im nächsten Schritt entfernt.

Genauere Informationen zu Block- und Inline-Elementen

Falls Ihnen die Begriffe Block- und Inline-Elemente unbekannt sind, finden Sie auf der Seite "Begriffsbestimmungen" in unserem Kurs CSS-Einführung die jeweilige Definition. Ausführlichere Erklärungen liefert das Kapitel Schriftformatierungen dieses Kurses wowie die SelfHTML-Passagen zu Details zu Block- und Inline-Elementen.

Schritt 4: Hintergrundfarbe und Abstände definieren

Die folgende CSS-Regel weist dem Navigationsbereich eine Hintergrundfarbe zu und definiert dessen Innen- und Außenabstände sowie die Rahmenlinien oben und unten:

#navibereich {
  background-color: #F7FFC3;        /* Hintergrundfarbe für die Navigation */ 
  padding: 4px 0;                   /* Innenabstand: oben/unten 4px, li/re 0 */
  border-top: 3px solid #668BCC;    /* Rahmenlinie oben */
  border-bottom: 3px solid #668BCC; /* Rahmenlinie unten */
  margin: 0;                        /* Keinen Außenabstand */ 
}

Jetzt sieht der Navigationsbereich schon etwas ansehnlicher aus:

Der Navigationsbereich mit Farben und Abständen

Unterschiedliche Abstände in Internet Explorer und Firefox ausgleichen

Ungeordnete Listen haben ohne die Definition von padding und margin einen linken Einzug. Firefox erzeugt diesen als padding, der Internet Explorer als margin. Um die unterschiedlichen Browser-Stylesheets außer Kraft zu setzen, sollten Sie für eine Liste immer sowohl padding als auch margin definieren.

Horizontale Navigation mit CSS in 7 Schritten