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 diesem Beispiel wurde generell die Schrift im Navigationsbereich verändert. Außerdem wurde
eine andere Hintergrundfarbe gewählt, um den Bereich hervorzuheben:
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:
Ü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;.
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.
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.