Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

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
  1. 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 */
    }

  2. 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
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.