- readme.txt
- Die Einleitung (I) Kapitel 1
- HTML – Grundlagen (II) Kap. 2 bis 4
- CSS – Grundlagen (III) Kap. 5 bis 11
- CSS – Positionierung (IV) Kap. 12 bis 14
- CSS – mehrspaltige Layouts (V) Kap. 15 bis 19
- Nützliche Werkzeuge (VI) Kapitel 20
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:
9.3 Tabbed Navigation – Navigation mit Registern
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.
ToDo: Den Navigationsbereich für die Register vorbereiten
- Ändern Sie den Navigationsbereich im CSS wie folgt:
#navibereich {
text-align: right; /* rechtsbündig */
color: black;
background: #ffe574 url(farbverlauf.jpg) repeat-y top left;
padding: 5px 10px 4px 10px;
border-bottom: 1px solid #8c8c8c;
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.
Nach diesen Änderungen sieht der obere Bereich der Webseite in etwa so aus:
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.
ToDo: Die Hyperlinks im Navigationsbereich vorbereiten
- Ändern Sie das CSS für den Navigationsbereich wie folgt:
#navibereich li {
display: inline;
list-style-type: none;
margin: 0; /* war vorher 10px für rechts */
}
#navibereich a {
color: black;
background-color: #ffeda0;
padding: 4px 8px 4px 8px;
border: 1px solid #8c8c8c;
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.
Nach diesen Änderungen sieht der obere Bereich der Webseite etwa so aus:
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.
ToDo: Rollover-Effekt für die Links im Navigationsbereich definieren
- Ändern Sie das CSS für den Navigationsbereich wie folgt:
#navibereich a:hover,
#navibereich a:focus {
color: black;
background-color: white;
border-bottom-color: white; /* war #d90000 */
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.
Nach diesen Änderungen sieht der obere Bereich der Webseite ungefähr so aus: