Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
Schritt 5: Den aktuellen Navigationspunkt hervorheben
In diesem Schritt geht es um die Rollover-Effekte und die Hervorhebung des aktuellen Navigationspunkts.
ToDo: Den aktuellen Navigationspunkt hervorheben
- Ergänzen Sie die vorhandenen Regeln wie folgt:
#startseite #navi01 a,
#galerieseite #navi02 a,
#kontaktseite #navi03 a {
color: black;
background-color: white;
border-left-color: #d90000; /* ersetzt #ffe574 */
border-bottom: none; /* Unterstreichung aus */
}
#navibereich a:hover,
#navibereich a:focus {
color: black;
background-color: white;
border-left-color: #d90000;
border-bottom: none;
}
#navibereich a:active {
color: black;
background-color: #d9d9d9;
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
Browser.
Auch diese Deklarationen sind für sich genommen nicht schwierig. Der Trick liegt darin, dass die linke 3 Pixel breite Rahmenlinie eine andere Farbe bekommt. Zum Schluss wird noch die untere Rahmenlinie auf none gesetzt. Voilà! Fertig ist die Navigation. Oder zumindest fast:
