Tabs haben auf Webseiten nichts mit Corega zu tun, sondern sind die gängige Bezeichnung für das, was man auf Deutsch Karteireiter oder Register nennt.

Tabs werden gerne zur Navigation eingesetzt, weil sie die einzelnen Optionen deutlich hervorheben und vielen Anwendern vertraut sind.

Vorbereitende Maßnahmen für #navibereich

Quasi zur Vorbereitung ändern Sie ein paar Einstellungen für #navibereich:

• Der Text im Navigationsbereich wird mithilfe der Eigenschaft text-align:right rechtsbündig ausgerichtet.
• Der Hintergrund wird dem des Kopfbereichs angepasst, damit Kopf- und Navigationsbereich wie ein Bereich aussehen.
• Das padding wird ein wenig geändert, damit der Bereich hübscher aussieht.
• Der Navigationsbereich erhält zur optischen Abgrenzung eine hellgraue, untere Rahmenlinie.

Nach diesen Änderungen sieht der obere Bereich der Webseite in etwa so aus:

Abbildung 9.3: Text rechts, Farbe anders, dunkle Rahmenlinie unten

Eine Anmerkung noch zur Ausrichtung der Listenelemente: text-align ist eine Eigenschaft zur Ausrichtung von Text und Inline-Elementen innerhalb eines Block-Elements. Da Listenelemente aber von Haus aus Block-Elemente sind, dürfte text-align hier eigentlich gar nicht funktionieren. text-align funktioniert nur deshalb, weil die li-Elemente im Navibereich per display:inline gebeten wurden, sich wie Inline-Elemente zu verhalten.

Statt des Werts right können Sie für text-align auch left (Standardwert) oder center probieren.

Die Hyperlinks im Navigationsbereich ändern

Die Hyperlinks im Navigationsbereich müssen ebenfalls etwas angepasst werden:

• Die Links bekommen eine eigene Hintergrundfarbe.
• Das padding wird erhöht, damit der Text etwas Abstand vom Kistenrand hat.
• Die Hyperlinks bekommen rundherum die gleiche Rahmenlinie wie der Navigationsbereich unten.

Da die Hyperlinks jetzt ein eigenes padding bekommen, ist der rechte Außenrand für die Listenelemente nicht mehr nötig und wird im ToDo von 10px auf 0 gesetzt.

Nach diesen Änderungen sieht der obere Bereich der Webseite etwa so aus:

Abbildung 9.4: Mit geänderten Hyperlinks – schon fast fertig

Einen Rollover-Effekt für die Hyperlinks definieren

Die Hyperlinks in der Navigation sollen einen Rollover-Effekt mit folgenden Gestaltungsmerkmalen bekommen. Sobald der Mauszeiger über den Links weilt,

• wird die Unterstreichung der Links in jedem Fall entfernt,
• bekommen die Hyperlinks schwarze Schrift auf weißem Hintergrund,
• verschwindet die untere Rahmenlinie, sodass der Tab sich scheinbar nach unten öffnet.

Das Verschwinden der Rahmenlinie erreichen Sie durch eine einfache, aber geniale Variation: Wenn der Mauszeiger über dem Hyperlink schwebt, wird die untere Rahmenlinie weiß statt grau.

Nach diesen Änderungen sieht der obere Bereich der Webseite ungefähr so aus:

Abbildung 9.5: Gar nicht schlecht – die Navigation mit Rollover- Effekt