Direktnavigation
Weitere Infos (Randbereich)
Inhaltsbereich
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.
In »Little Boxes, Teil 2« wandeln Sie das hier gezeigte Inline-Beispiel in eine float-basierte Navigation um und lernen dabei jede Menge Feinheiten über das Verhalten von Inline- und Block-Elementen.
IE7: Und es hat Zoom gemacht
Der Internet Explorer 7 kann viel besser CSS als seine Vorgänger, hat aber eine neue Zoom-Funktion, die beim Vergrößern von Inline-Elementen oft Probleme bereitet. In der Navigation aus dem Beispiel fühlt sich das Wort »Kontakt« beim Zoomen plötzlich einsam, springt aus seinem Kästchen und schmiegt sich an die »Startseite«. Dieser Fehler wird im Kapitel über »Patches« behoben (im Buch ab Seite 360).
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 }