Cascading Style Sheets ::Tutorials
Site-Navigation mit Listen — Grundaufbau
Grundlagen:
Menüs mit Rollover-Effekten sind im Web bekannt, seit es JavaScript gibt. Weit verbreitet wurden sie durch die DHTML-Welle am Ende der 1990er Jahre. Heute ist es möglich, diese Effekte ganz ohne JavaScript und nur mit CSS zu erreichen.
Man findet an vielen Stellen im Web fertig-kodierte CSS-Menüs, die heruntergeladen und eingebaut werden können. Meistens sind sie aus verschachtelten DIV- oder A-Elementen zusammengesetzt.
Das ist nicht falsch, Site-Navigationen sind in der Regel aber nichts anderes als Linklisten. Da die nötigen semantischen Informationen in den Elementen OL, UL und LI bereits vorhanden sind, bietet es sich an, diese für Navigationslisten zu nutzen.
Ziel dieses Tutorials ist, das Hintergrundwissen dazu zu vermitteln, so dass sich jeder solche Linklisten selbst nach seinen eigenen Erfordernissen erstellen kann. Im ersten Teil soll eine Site-Navigation auf der Basis einer geordneten/ ungeordneten Liste erstellt werden, die in allen standards-orientierten modernen Browsern gleich funktioniert und ähnlich aussieht. Browser der Version 4.x interpretieren einige der verwendeten Eigenschaften falsch, sie können deshalb die hier entwickelte Navigation nicht korrekt darstellen.
Im zweiten Teil wollen wir uns dann besonderen Problemen und Verfeinerungen zuwenden, dort wird es erst richtig interessant. Die dort gezeigten Möglichkeiten werden allerdings nicht mehr von allen heute benutzten Browsern unterstützt. Als kleiner Vorgeschmack hier schon einmal der Blick auf Beispiel 14: Rollover-Buttons à la iMac, ganz ohne JavaScript.
Der Anfang
Für den Anfang erstellen wir uns zunächst ein einfaches Webdokument, das nur aus einer Linkliste und dem Hauptteil besteht. Den Hauptteil positionieren wir so, dass für ein einfaches Menü links genug Platz bleibt, 200 Pixel sollten genügen. In den Beispielen sind der Hintergrund der Navigation und der einzelnen Listenpunkte zur besseren Erkennbarkeit unterschiedlich eingefärbt.
(siehe das Anfangsbeispiel)
Das hier gezeigte Menü ist relativ klein. Die Größe des Menüs spielt für die Funktion von Stylesheets aber keine Rolle — der Browser wertet sie an langen Menüs ebenso aus wie an kurzen. Ein anderes Problem ergibt sich, wenn die Website im Laufe der Zeit wächst und die neu hinzu gekommenen Inhalte alle im Menü reflektiert werden sollen. Anstatt die Ergänzung des Menüs jedesmal in jeder Datei per Hand vornehmen zu müssen, ist es einfacher, die Navigation als Ganzes auszulagern und beim Aufruf jeder Seite serverseitig einzufügen. Dazu gibt es eine Reihe von Techniken mit und ohne Datenbankanbindung. Letztlich ist dies aber kein Problem, das sich mit Hilfe von Stylesheets lösen lässt.
Struktur
In einer Navigationsliste brauchen wir keine Bullets oder Gliederungsziffern vor den einzelnen Listenpunkten, wir wollen also im ersten Schritt diese Bullets entfernen: LI {list-style:none}. Deshalb könnten wir an Stelle einer ungeordneten Liste (UL) ebenso gut eine geordnete Liste (OL) verwenden.
(siehe Beispiel 1)
In diesem Moment stoßen wir auf erste Unterschiede in der Darstellung durch die verbreiteten Browser. In den Elementen OL und UL sind Randabstände margin und padding voreingestellt, die sich von Browser zu Browser unterscheiden. Wer möchte, kann sich einmal die Zeit nehmen, das Beispiel 1 mit verschiedenen Browsern zu betrachten. Die hellblau unterlegten Abstände sind durch padding verursacht, die violetten durch margin, beides jeweils am Element UL. Diese unkontrollierten Abstände vermeiden wir, indem wir die Werte für padding und margin auf 0 setzen. Dennoch bleiben in Opera 6 und 7 noch schmale Abstände unter den Listenpunkten. Wir stellen dies ab, indem wir für die einzelnen Listenelemente margin:0 einsetzen. Für alle Fälle setzen wir auch padding explizit auf 0.
(siehe Beispiel 2)
Jetzt zeigt sich auch, dass die Breite der LI-Elemente sich nach der Textbreite ausrichtet. Sie werden nur so breit wie der längste Text es erfordert bzw. im Opera 6 sind alle LI unterschiedlich breit. Wenn wir die Breite für die LI-Elemente explizit vorgeben, in diesem Fall vorläufig mit 150 Pixel, haben wir auch das Problem gelöst.
(siehe Beispiel 3)
Funktion
Nun kommen wir langsam zum Kern der Sache, zu den Links. Da erscheint es zunächst etwas einfacher als bei 'normalen' Links. Auf den ersten Blick reichen nämlich die Pseudoklasse :link und :hover aus. Dennoch können wir auf :visited nicht verzichten, da standardskonforme Browser zwischen besuchten und unbesuchten Links unterscheiden und besuchte Links anderenfalls unformatiert darstellen würden.
Aus Gründen der Zugänglichkeit bringen wir auch noch :focus mit ein. So lassen sich die einzelnen Menüpunkte auch mit der Tabulatortaste durchgehen. Zumindest für alle, die mit Firefox 1.0+ oder mit IE 7+ surfen. Im Beispiel sind die Pseudoklassen, die gleich aussehen sollen, jeweils in Gruppen zusammengefasst.
Ganz nebenbei bemerkt, ist dies tatsächlich die einzige Stelle, an der wir Änderungen im HTML-Teil vornehmen. Ansonsten bleibt der Hypertext, wie er ist und alle Änderungen finden im Stylesheet statt.
Ach ja, und: wenn wir die Sache mit der Webzugänglichkeit ernst nehmen, dann gehört natürlich auch ein Attribut title an jeden Link.
(siehe Beispiel 4)
Im Beispiel 4 fällt der rechte Flatterrand der Links unschön auf, so sollte es eigentlich nicht bleiben. Wir legen also auch hier die Breite explizit fest, und sehen — dass wir nichts sehen. Was ist da passiert? Ganz einfach: A-Elemente sind Inline- Level- Elemente, deren Breite nur durch die Breite ihres Inhaltes bestimmt wird. Deshalb hat ein angegebener width-Wert keine Auswirkung, auch nicht mit dem Zusatz !important. Das ändert sich, wenn wir die A-Elemente mit der Regel display:block; als Block- Level- Elemente definieren. Nur Opera 6 akzeptiert das nicht. Deshalb fügen wir diese Regel zusätzlich mit einem einfachen A-Selektor vor den anderen Navigations- Linkregeln ein. Damit ist nun auch Opera 6 'zufrieden'.
(siehe Beispiel 5)
Vor das nächste Problem stellt uns der Browser aller Browser, IE/Win 6: er zeigt den Hover-Effekt nur über dem Text, nicht aber über die ganze Breite des A-Elementes. Abhilfe schaffen wir uns, indem wir eine zusätzliche Breitenangabe für die Pseudoelemente einführen. Was uns also im letzten Schritt nichts gebracht hat, wird nun notwendig.
(siehe Beispiel 6)
Ver(un)schönerungen
Nun wollen wir unsere Links noch mit einem Rahmen versehen. Sobald wir das aber tun, fällt in Opera 6 die Zeilenhöhe auf Schrifthöhe zusammen. Hier bietet wieder der einsame A-Selektor Abhilfe, den wir vorher bereits eingefügt hatten. Wir erweitern den Deklarationsblock um die Deklarationen für den Rahmen und auch Opera 6 verhält sich wieder normal.
(siehe Beispiel 7)
Was für die einzelnen Links geht, funktioniert auch für den gesamten Menüaufbau: wir bringen jetzt noch einen Rahmen um das äußere DIV der Navigation an; gleichzeitig wollen wir mit Hilfe der Positionierung das ganze Gebilde etwas aus der Ecke herausziehen. Ein kurzer Check zeigt: Opera 6 - ok; Opera 7 - braucht vielleicht ein Refresh, ist aber sonst in Ordnung; Opera 8 - dito; Opera 9 - nanu? Der Rahmen auf der rechten Seite ist nur noch 1 Pixel breit? Ein neuer Fehler im Opera? Wir werden uns das noch genauer ansehen, doch zunächst IE 6 und 7: beide lassen die Hintergrundfarbe unter dem Rahmen vermissen, IE 7 zeigt darüber hinaus dasselbe Verhalten wie Opera 9; Firefox - verhält sich wie Opera 9 und IE 7. Ist das überhaupt ein Fehler?
(siehe Beispiel 8a)
Nein, das ist schon so richtig. Erinnern wir uns an den letzten Schritt: wir hatten allen Links einen 2 Pixel breiten Rahmen gegeben. Da sie 150 Pixel breit sind, benötigen sie jetzt ein 154 Pixel breites umschließendes Element. Dies ist das Element LI, das wir aber ebenfalls bereits auf 150 Pixel Breite festgelegt haben. Entsprechend den CSS-2-Regeln soll ein Element in diesem Fall überlaufen, das Elternelement aber nicht vergrößert werden. Daher ist die Überlappung korrekt und die neuesten Versionen der Browser stellen das auch richtig dar. Beide Breitenangaben werden jedoch benötigt, die eine vom IE 6, die andere von Opera 6. Deshalb müssen wir entweder die Regel für LI oder die Regel für A in der Breite, entsprechend der Rahmenstärke von A, anpassen. Hier haben wir LI auf 154 Pixel verbreitert.
(siehe Beispiel 8)
Kleine Anmerkung hierzu:
Rahmen sehen nicht immer gut aus und man sollte sie nach Möglichkeit nur verwenden, wenn man einen bestimmten Effekt erzielen will.
Bis jetzt haben wir an den Listenelementen UL/OL und LI noch keinerlei sichtbaren Rahmen, margin oder padding angebracht. Das sollte auch so bleiben, diese Elemente dienen lediglich der Struktur. Wollen wir im Innern den Text noch etwas freistellen, dann ändern wir die Regeln für das Element A. Ein Randabstand an diesem Element sollte jedoch mit Vorsicht angewandt werden, in jedem Fall muß die Hintergrundfarbe der Ahnenelemente beachtet werden. Auch die Breite von LI muß wieder angepasst werden: da wir die Links mit padding:3px; versehen haben, ist LI in diesem Fall also 160 Pixel breit.
(siehe Beispiel 9)
So, wie es jetzt ist, wirkt das Menü etwas überladen und detachiert. Deshalb wollen wir die ganze Sache nun ein wenig ansehnlicher gestalten. Auch in der Produktion wird man sicher nicht alles gleichzeitig anwenden, was in diesem Tutorial gezeigt wurde. Zudem können wir den Code etwas 'aufräumen'. Alle strukturellen Regeln, die jetzt unter den Link- und Interaktions- Pseudoklassen stehen, lassen sich z. B. unter #navigation A zusammenfassen, ohne dass sich die Darstellung in einem Browser ändern würde. Ebenso werden die unterschiedlichen Hintergrundfarben jetzt nicht mehr gebraucht. Die Deklaration background-color: transparent erscheint zwar überflüssig, wir stellen damit aber sicher, dass der Hintergrund neutral bleibt und auch unbeabsichtigt keine andere Farbe annimmt.
(siehe Beispiel 10 oder Beispiel 11)
Vielleicht ist es dem/der einen oder anderen schon aufgefallen: wir konnten bis jetzt völlig auf Klassen verzichten, nur ein ID-Attribut wurde verwendet. Dennoch ist bis hierhin das gezeigte Menü in 99.5 % aller heute verwendeten Browser voll funktionsfähig und sieht fast gleich aus.
TOP
Weiter zum Teil 2.
