Webmaster-Crashkurs

horizontale Navigation mit CSS erstellen

Für Navigationen ist das Strukturelle Element der Unsortierten Listen ideal.

<div id="steuerungoben">
  <ul>
    <li>Startseite</li>
    <li>News</li>
    <li>Kontakt</li>
  </ul>
</div>

Das hat aber die Eigenschaft, dass es als Blockelement nach unten für jeden Listeneintrag eine neue Zeile anzeigt.

  • Startseite
  • News
  • Kontakt

Um eine horizontale Navigation mit dem Listen-Element zu erstellen, gibt es 2 Möglichkeiten. Im Folgenden lernen wir die einfachste kennen:

Damit wir sehen, was passiert und wo wir arbeiten wird im ersten Schritt für das Element ul eine Hintergrundfarbe vergeben und für die Elemente li eine andere.

verschachteltete Selektoren

Dabei werden wir den verschachtelten Selektor verwenden, da ja nur die Steuerung umgebaut werden soll.

Es wird im CSS verschachtelt über Nennung des ID-Selektor und dann des Typ-Selektors

#steuerungoben li {
   ...
}

In der CSS-Datei steht nach dem ersten Schritt:

#steuerungoben {
    background-color: silver;
}

#steuerungoben li
    background-color: lime;
}

Das Element <li> ist ein Blockelement, was für unser Vorhaben natürlich gerade sehr unpraktisch ist. Aber über CSS können wir das Verhalten von <li> beeinflussen. Über den CSS-Befehl display: inline; ändern wir das verhalten. Dadurch fallen auch die Aufzählungspunkte weg (die man ansonsten über den CSS-Befehl list-style-type: none; beseitigen könnte).

Unsere Steuerungpunkte sitzen nun nebeneinander.

#steuerungoben ul {
    background-color: silver;

}

#steuerungoben li {
    background-color: lime;
    display: inline;
    list-style-type: none;
}

Jetzt kann noch Design gemacht werden, indem die Listenpunkte über padding und margin voneinander getrennt werden und auch eine Abgrenzung zwischen den einzelnen Punkten über border: ist problemlos möglich.

  • Startseite
  • News
  • Kontakt

Und nehmen wir die Hintergrundfarben wieder heraus, sieht die Steuerung schon nach was aus:

  • Startseite
  • News
  • Kontakt
HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2018   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit Videos