Direktnavigation
Weitere Infos
Sie lesen:
LB Teil 1 (2009)
Aktuell (2015)
Einstieg in CSS
2. Auflage!
Schritt 3: Die Listenelemente in der Navigation gestalten
Sie beginnen mit der Vorbereitung der Box-Modell-Eigenschaften für die ungeordnete Liste und deren Bestandteile.
Zunächst bekommt die ul-Liste eine Breite. Damit die Navigationspunkte auch bei einem Textzoom mitwachsen, wird die Breite in der Einheit em definiert, die auf der Schriftgröße basiert. 1em ist die für das Element definierte Schriftgröße und die Liste erbt font-size:small von body, was ziemlich genau 13px entspricht. 6em wären also eine Breite von 78px.
Die roten Linien für die Navigation werden geschickt aufgeteilt, sodass keine der horizontalen Linien gedoppelt wird:
- Die obere Linie wird mit border-top an das ul gegeben (und nicht an die Listenelemente).
Die Linien links und unten bekommen die Listenelemente.
ToDo: Die Listenelemente in der Navigation gestalten
- Ergänzen Sie die CSS-Regeln für ul und li im Navigationsbereich wie folgt:
#navibereich ul {
width: 6em;
border-top: 1px solid #d90000;
}
#navibereich li {
list-style-type: none;
border-left: 1px solid #d90000;
border-bottom: 1px solid #d90000;
margin: 0;
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.
Und so sehen die Seiten danach im Browser aus:
