Schritt 4: Die Hyperlinks in der Navigation gestalten
In diesem Schritt geht es um die Gestaltung der Hyperlinks im Navigationsbereich.
ToDo: Die Hyperlinks in der Navigation gestalten
- Ergänzen Sie die Regel für Hyperlinks im Navigationsbereich wie folgt:
#navibereich a {
display: block; /* ganze Fläche anklickbar machen*/
text-decoration: none;
color: black;
background-color: #ffe574;
padding: 4px;
border-left: 3px solid #ffe574; /* nicht sichtbar */
}
- Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.
In der ersten Deklaration werden die Hyperlinks zum Block-Element befördert, wodurch der Hyperlink so breit wie das umgebende li und der gesamte Navigationspunkt anklickbar wird.
Abbildung 16.5: Das gesamte Listenelement ist anklickbar
Ein kleines padding und eine nicht sichtbare 3 Pixel breite Rahmenlinie links in derselben Farbe wie der Hintergrund runden die Sache ab. Was das mit der unsichtbaren Rahmenlinie soll, wird im nächsten Schritt klar.