Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

9.1 Einfache horizontale Navigation: display: inline

In diesem Abschnitt erstellen Sie eine einfache horizontale Navigation, indem Sie die Listenelemente nebeneinander stellen und dann gestalten.

Die folgende Methode ist nicht die einzige Möglichkeit, das Ziel von nebeneinander stehenden Listenelementen zu erreichen, aber sie hat den Vorteil, dass Sie alles dazu Notwendige bereits wissen. Kreative Anwendung von einfachen Sachverhalten ist beim Gestalten mit CSS oft der Schlüssel zum Erfolg.

Der verschachtelte Selektor #navibereich li

Die Grundlage für Navigationen bilden wie erwähnt meist ganz normale ungeordnete Listen, auch wenn man dies den gestalteten Navigationsleisten nicht mehr ansieht.

Listenelemente sind Block-Elemente und stehen deshalb normalerweise untereinander. Mit der CSS-Eigenschaft display können Sie die Art der Anzeige ändern, z. B. ein Block- als Inline-Element darstellen lassen oder umgekehrt.

Die Anweisung display: inline bedeutet im Klartext ungefähr Folgendes:

»Liebe Listenelemente, ihr seid zwar Block-Elemente, aber bitte verhaltet euch im Browser doch ausnahmsweise einmal wie Inline-Elemente, damit ihr nebeneinanderstehen könnt. Vielen Dank und bis bald. Euer Seitenbauer.«

Um die Änderungen an den Listenelementen auf den Navigationsbereich zu beschränken, benutzen Sie den verschachtelten Selektor #navibereich li, sprich »Alle Listenelemente im Navigationsbereich«.

Vorher wird im folgenden ToDo die Hintergrundfarbe für den Navigationsbereich definiert.

ToDo: Listenelemente in der Navigation nebeneinanderstellen
  1. Fügen Sie die hervorgehobenen Zeilen in das Stylesheet ein:

    #navibereich {
      background-color: #ffeda0;
      padding: 5px 20px 5px 20px;
    }
      #navibereich li {
        display: inline; /* li nebeneinander anzeigen */
        list-style-type: none; /* ohne Aufzählungspunkte */
      }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

So sieht der Navigationsbereich mit diesen Anweisungen aus:

Abbildung 9.1: Listenelemente nebeneinander – schon fast gut
Abbildung 9.1: Listenelemente nebeneinander – schon fast gut

Drei Dinge bleiben noch zu tun:

  1. Zwischen Kopf- und Navigationsbereich ist eine weiße Lücke.
  2. Der Navigationsbereich hat einen zu großen Abstand nach unten.
  3. Der erste Navigationspunkt hat eine ungewollte Einrückung von links.

Für alle drei Mängel stehen im Stylesheet Anweisungen, die sich hier ungewollt bemerkbar machen. Die Schwierigkeit ist, die jeweiligen Verursacher zu finden. Aber der Reihe nach:

  • Der weiße Zwischenraum entsteht durch das margin-bottom von 1em für die Absätze. Dadurch erhält auch das p im Kopfbereich diesen Außenabstand.
  • Der große Abstand nach unten im Navigationsbereich wird durch das margin-bottom der ungeordneten Listen ul verursacht.
  • Die ungewollte linke Einrückung des ersten Navigationspunkts entsteht, weil die Listenelemente li einen linken margin von 1em haben.

Feineinstellungen: Abstände und Hyperlinks anpassen

Zur Korrektur aller drei Fehler benutzen Sie verschachtelte Selektoren, die die Änderungen auf den jeweiligen Bereich beschränken. Im ToDo wird zusätzlich die Schriftfarbe für Hyperlinks in der Navigation auf Schwarz gesetzt.

Am besten speichern Sie nach jedem Schritt das Stylesheet und überprüfen die Änderungen im Browser.

ToDo: Abstände und Hyperlinks für den Navigationsbereich ändern
  1. Fügen Sie unterhalb des Styles für #kopfbereich folgende Regel in das Stylesheet ein:
    #kopfbereich p {
      padding: 5px 0 5px 0;
      margin-bottom: 0; /* war 1em */
    }
  2. Fügen Sie unterhalb des Styles für #navibereich die hervorgehobenen Zeilen ein:
    #navibereich ul { margin-bottom: 0; }
    #navibereich li {
      display: inline;
      list-style-type: none;
      margin: 0 10px 0 0; /* rechts 10px, sonst 0 */
    }
    #navibereich a { color: black; }
  3. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

So sieht es schon etwas ansprechender aus:

Abbildung 9.2: Eine einfache horizontale Navigation
Abbildung 9.2: Eine einfache horizontale Navigation