- readme.txt
- Die Einleitung (I) Kapitel 1
- HTML – Grundlagen (II) Kap. 2 bis 4
- CSS – Grundlagen (III) Kap. 5 bis 11
- 5. CSS kennen lernen
- 6. Selektoren, Einheiten und Farben
- 7. Das Box-Modell
- 8. Stylesheet aufräumen
- 9. Navigation und Kontaktformular
- 9.1 Horizontale Navigation
- 9.2 Punktsieg: Spezifität
- 9.3 Navigation mit Registern
- 9.4 Aktuelle Seite hervorheben
- 9.5 Die Navigation im Überblick
- 9.6 Kontaktformular erstellen
- 10. Skip-Links, Druckversion, Tabellen
- 11. Die Kaskade
- 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.5 Die fertige Navigation im Überblick
Mit wenigen CSS-Regeln haben Sie eine ganz normale ungeordnete HTML-Liste in eine recht ansehnlich horizontale Navigation mit Registern verwandelt.
Standardkonform, barrierefrei und flexibel
Wofür Webdesigner früher diverse Grafiken und Tabellenzellen benötigten, reichen heute ein paar Zeilen CSS, und das Ergebnis wird den Möglichkeiten des Mediums gerecht:
- Standardkonform – HTML und CSS entsprechen den W3C-Standards.
- Barrierefrei – ohne CSS bleibt eine einfache Linkliste, die von einem Screenreader problemlos vorgelesen werden kann.
- Flexibel – wenn die Schrift vergrößert wird, wächst die Navigation einfach mit.
Einziger potenzieller Nachteil einer horizontalen Navigation mit display: inline ist, dass Breite und Höhe der Register von der Beschriftung abhängen. Da die li-Elemente sich im Browser wegen display:inline wie Inline-Elemente verhalten, kennen sie kein width und height und können demzufolge auch keine feste Breite oder Höhe haben.
Um den Eindruck gleich breiter Navigationspunkte zu erwecken, bleibt nur ein bisschen Experimentieren mit den Beschriftungen der Navigationspunkte und das Ausbalancieren mit einigen unkaputtbaren Leerstellen .
Eine horizontale Navigation mit fest definierten Breiten geht natürlich auch, aber nicht mit display:inline, sondern mit einer Eigenschaft namens float, die Sie weiter hinten noch kennenlernen.
Die Styles zur Navigation im Überblick
Im Folgenden finden Sie das komplette CSS zur Erstellung der horizontalen Navigation mit Tabs, inklusive Hervorhebung des aktuellen Menüpunkts:
74 #kopfbereich {
75 background-color: #f3c600;
76 color: black;
77 background-image: url(farbverlauf.jpg);
78 padding: 10px 20px 0 20px;
79 }
80 #kopfbereich p {
81 padding: 5px 0 5px 0;
82 margin-bottom: 0; /* war 1em */
83 }
84 div#kopfbereich p span {
85 color: #d90000;
86 }
87 #navibereich {
88 text-align: right;
89 color: black;
90 background: #ffe574 url(farbverlauf.jpg) repeat-y top left;
91 padding: 5px 10px 4px 10px;
92 border-bottom: 1px solid #8c8c8c;
93 }
94 #navibereich ul { margin-bottom: 0; }
95 #navibereich li {
96 display: inline;
97 list-style-type: none;
98 margin: 0; /* war vorher 10px für rechts */
99 }
100 #navibereich a {
101 color: black;
102 background-color: #ffeda0;
103 padding: 4px 8px 4px 8px;
104 border: 1px solid #8c8c8c;
105 }
106 /* "Sie sind hier" */
107 #startseite #navi01 a,
108 #kontaktseite #navi02 a {
109 color: black;
110 background-color: white;
111 border-bottom-color: white;
112 }
113 #navibereich a:hover,
114 #navibereich a:focus {
115 color: black;
116 background-color: white;
117 border-bottom-color: white;
118 }
119 #navibereich a:active {
120 color: black;
121 background-color: white;
122 border-bottom-color: white;
123 }