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
- Startseite
- Video-Kurs
- HTML lernen
- CSS lernen
- Einbinden von CSS
- Aufbau CSS-Anweisung
- CSS kontrollieren mit CSS-Validator
- CSS und Farbe
- Schriften mit CSS gestalten
- Rahmen in CSS
- CSS Box Modell Hierarchie
- Hintergrundbilder mit CSS
- CSS-Selektoren
- Layout über CSS
- horizontale Navigation
- einfache vertikale Steuerung
- Tabellen mit CSS formatieren
- Formulare über CSS gestalten
- Erklärung zu display
- CSS Tipps und Tricks
- Webhosting u. Domain
- Werkzeuge
- Rund um Websites
- Impressum
hier klicken für
mehr Informationen