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.

Abbildung 9.7: Die Navigation mit ziemlich großer Schrift im Firefox

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 }