Man kann in CSS genauer unterscheiden, wie bestimmte Elemente an verschiedenen Stellen dargestellt werden sollen. Dies bietet sich besonders bei Hyperlinks an. In einem ganz normalen Absatz soll ein Link vielleicht anders dargestellt werden als in einer Navigationsleiste. Um dies zu erreichen, muss man zunächst im HTML-Dokument einen Abschnitt mit dem Tag <nav> </nav> als Navigationbereich auszeichnen. Danach kann man sich in der CSS-Datei darauf beziehen und Schrift, Hintegrundfarbe, Darstellung von Hyperlinks etc. unabhängig vom Rest der Seite gestalten.
Navigationsbereich festlegen
Wie oben schon geschrieben, kann man mit <nav> </nav> den Navigationsbereich kennzeichnen:
In der CSS-Datei nehmen wir folgendermaßen darauf Bezug:
In diesem Beispiel wurde generell die Schrift im Navigationsbereich verändert. Außerdem wurde eine andere Hintergrundfarbe gewählt, um den Bereich hervorzuheben.
So sieht das Ergebnis im Browser aus:
Die Hyperlinks im Navigationsbereich verhalten sich hier noch so wie die im normalen Text - sie werden gelb hervorgehoben. Nach der Übungsaufgabe sehen wir, wie man sie separat verändern kann.
Übungsaufgabe
Erstelle in einer Deiner HTML-Seiten einen Navigationsbereich und hebe ihn mithilfe von CSS optisch hervor.
Design der Links im Navigationsbereich
Um die Links im Navigationsbereich anders zu designen als die im normalen Text, muss man sie in CSS mit nav a beschreiben. Nehmen wir als Beispiel denselben HTML-Code und beziehen wir uns auf eine andere CSS-Datei:
Die neue CSS-Datei:
Die neue Darstellung im Browser:
Übungsaufgabe
Modifiziere Deine Seite aus der letzten Aufgabe so, dass die Links im Navigationsbereich anders aussehen und auf die Maus anders reagieren als die Links im restlichen Dokument.
Navigationsleiste mit Tabelle
Eine gute Möglichkeit, eine leichte Navigation auf einer Website zu ermöglichen ist, eine Navigationsleiste zu entwerfen. Wir beschränken uns hier auf horizontale Leisten, weil diese etwas einfacher zu erstellen sind.
Sehen wir uns zunächst an, was genau gemeint ist. In diesem Beispiel sehen wir klar erkennbar die weiße Leiste am oberen Rand:
Eine solche Navigationsleiste kann man zum Beispiel mit einer Tabelle erstellen. In diesem Fall wurde eine Tabelle mit einer Zeile und drei Spalten benutzt:
In der CSS-Datei wurde dann einerseits beschrieben, wie Links im Navigationsbereich aussehen sollen und andererseits, wie Tabellen in diesem Bereich dargestellt werden sollen. Dies geht, weil man sich mithilfe von nav auf diesen Bereich beziehen kann:
Übungsaufgabe
Erstelle in einer Deiner HTML-Seiten eine Navigationsleiste mithilfe einer Tabelle. Gestalte sie mit CSS.
Vertiefung: Navigationsleiste mit Liste
Eine alternative Möglichkeit, ein Navigationsmenü zu erstellen ist durch Listen gegeben. Das ist etwas komplizierter bietet aber in einigen Aspekten mehr Gestaltungsfreiheit. Dieses Abschnitt sollten sich aber nur diejenigen ansehen, die sich schon sehr sicher in der Materie fühlen.
Sehen wir uns hier ein erstes Navigationsmenü an, das mit einer Liste erstellt wurde:
Mittels CSS werden die Punkte in der Liste entfernt. Das geschieht durch die Angabe list-style-type: none;.
Darstellung im Browser:
Wir ändern mittels CSS das Erscheinungsbild der Liste weiter ab. Die auffälligste Veränderung ist, dass wir durch die Angabe nav li{ display: inline; } dafür sorgen, dass die Einträge der Liste nebeneinander erscheinen. Dadurch werden die verschiedenen Menüpunkte von links nach rechts aufgezählt. Auf vielen modernen Seiten sieht man so eine Anordnung anstatt der sonst üblichen zentrierten Darstellung wie oben bei der Tabelle.
Die vollständige CSS-Datei sieht hier so aus:
Hier das Ergebnis:
Möchte man die Menüpunkte doch wieder zentrieren, so gelingt dies durch die Angabe von text-align: center; im Tag nav ul in der CSS-Datei.
Zusatzaufgabe
Erstelle eine Navigationsleiste mithilfe einer Liste.