Zum Textbeginn springen Zur Navigation springen

CSS 2.1 ::Tutorials

Site-Navigation mit Listen — Erweiterungen

Im ersten Teil dieses Tutorials haben wir ein einfaches Rollover-Menü ohne JavaScript erstellt. In diesem Teil wollen wir uns mit Verfeinerungen und Besonderheiten eines Site-Menüs befassen. Nicht alles funktioniert in jedem Browser, aber alles zeigt, welche Möglichkeiten CSS bietet.

Grafiken als Hintergrund:

Ebenso wie die Hintergrundfarbe lässt sich auch background-image mittels interaktiver Pseudoklassen verändern. Wer viele Ideen hat, dem sind praktisch keine Grenzen gesetzt. Hier einige einfache Beispiele:
Beispiel 12: Eine einfache Hintergrundgrafik bei :hover;
Beispiel 13: Zwei unterschiedliche Hintergrundgrafiken, die sich bei :link, :visited einerseits und :hover, :focus andererseits abwechseln;
Beispiel 14: Dasselbe mit bunten Glasbuttons - ‹I think, therefore iMac›;
Beispiel 15: Eine Grafik mit 'durchsichtigem' Dreieck und verschiedenen Hintergrundfarben (funktioniert auch mit Opera 6, nur das gewollt Dezente geht verloren);

Tipp:

Wenn für jede Hintergrundgrafik der verschiedenen Pseudoklassen jeweils eine eigene Datei verwendet wird, entsteht beim Darüberfahren mit der Maus eine kurzzeitige Lücke, bis die zweite Grafik geladen ist. Das vermeidet man, indem man beide bzw. alle Grafiken einer Navigation gemeinsam in derselben Datei unterbringt, z. B. so: navback4.gif. Das Hintergrundbild wird dann mit Hilfe von background-position in die richtige Lage gebracht.

Da auch die Padding-Fläche mit dem Hintergrundbild unterlegt wird, muss man dies bei der Erstellung der Grafik durch ausreichend große Freiflächen berücksichtigen.

3D-Effekt ohne Grafiken:

Ein 3D-Effekt soll nichts anderes darstellen als einen Button, der beim Darüberfahren mit der Maus 'eingedrückt' wird. Bewerkstelligen lässt sich dies am einfachsten durch die Schattenwirkung des Rahmenmusters. Die Eigenschaft border-style gibt uns zwei Werte, die wir hierzu nutzen können: inset und outset. Um den dreidimensionalen Eindruck etwas mehr hervorzuheben, können wir in den Regeln der interaktiven Pseudoklassen noch das padding um einen Pixel verändern. Zusätzlich fügen wir noch eine dünne Trennungslinie zwischen den einzelnen Buttons ein.
Beispiel 16

Sieht schon gar nicht schlecht aus, oder? Wir können das aber noch verbessern, insbesondere die Darstellung mit dem IE/Win, der die Werte inset und outset inkorrekt interpretiert. Deshalb lassen wir das Muster des Rahmens bei solid und ändern einfach nur seine Farbe an den vier Seiten der Buttons. Damit haben wir als Designer auch etwas mehr Kontrolle über das Aussehen der Navigation. Wer möchte, kann Firefox-Surfern einen kleinen Gefallen tun und die Ecken noch etwas abrunden.
Beispiel 17

Anzeige des aktuell gewählten Menüpunktes:

Auf einer Website mit vielen Inhalten und starker Untergliederung ist es für Besucher wichtig zu wissen, wo sie sich befinden. Dazu kann es eine Hilfe sein, dem zum aktuellen Kapitel gehörenden Button gestalterisch von den anderen abzuheben.

(Um dieses und das nächste Beispiel realisieren zu können, müssen wir die hierarchische Struktur der Site definiert haben, zumindest auf den ersten zwei Ebenen.)

Eine Lösungsmöglichkeit wäre, für jedes Kapitel ein Extramenü zu erstellen und das z.B. per Script oder serverseitig einzufügen. Besser ist es, nur ein Menü zu haben, in dem die Provisionen für unterschiedliche Darstellungen der Buttons bereits vorhanden sind. Mit ein wenig CSS lässt sich das machen.

Dazu definieren wir zunächst Klassen (übrigens das erste Mal in diesem Tutorial), eine für jeden Button. Wir nennen sie hier ca, cb, cc und cd. Dies ist die einzige Ergänzung des Menüs, die notwendig ist, und sie gilt für alle Abschnitte/Kapitel der Site.

Zusätzlich definieren wir für jedes Kapitel der Website einen Identifier — im Beispiel sind sie mit ia bis id benannt. Die Navigation (oder die ganze Seite) wird dann umfasst mit einem Element DIV, dessen Attribut ID auf einen dieser Werte gesetzt ist. Dieser Wert ist abhängig vom Hauptkapitel unserer Website, zu dem das aktuelle Webdokument gehört.

Im Stylesheet brauchen wir dann nur noch zu bestimmen, welche Identifier mit welchen Klassen zusammengehören und für diesen Fall besondere Deklarationen zu definieren. Da jede dieser Regeln zwei ID-Selektoren enthält, haben sie eine relativ hohe Spezifizität und damit Vorrang vor anderen Regeln.
Beispiel 18

Anzeige der zweiten Hierarchiestufe:

In einer streng hierarchisch gegliederten Website bietet es sich gelegentlich an, auch die zweite Hierarchieebene im selben Menü darzustellen. Um das Ziel genau zu umreißen: Wir wollen, dass nach dem Klick auf einen der Punkte des Hauptmenüs die zu diesem Punkt gehörenden Punkte der nächsten Hierarchiestufe angezeigt werden, aber nur diese.

Das klingt zu kompliziert? Gut, wer möchte, kann sich am Endresultat im Beispiel 19 schon einmal ansehen, wie es gemeint ist, wir werden mit der Erklärung so lange warten.

Dies ist eigentlich eine Domäne des Dynamischen HTML — wir wollen hier versuchen, inwieweit etwas ähnliches mit Abstrichen auch ohne JavaScript möglich ist. Wir können dabei im Grunde genommen auf die im vorhergehenden Schritt angewandte Technik aufbauen.

Aus den vorhandenen Links unseres Menüs entfernen wir zunächst alle Klassenattribute, denn diese Links sollen ja immer, und immer gleich, dargestellt werden. Danach ergänzen wir die Links zweiter Ordnung. Im Beispiel wurde gleichzeitig die Liste in mehrere UL-Elemente aufgeteilt. Diese lassen sich dadurch unabhängig voneinander formatieren.

Auf die neu hinzugefügten Links wenden wir die bereits aus Beispiel 18 bekannte Kombination aus Klasse und ID-Attribut an, um die Links unter bestimmten Bedingungen darzustellen und um Style-Regeln anzuwenden. Das reicht aber nicht dazu aus, um ihre Darstellung immer dann zu unterdrücken, wenn sie nicht gewollt ist. Deshalb führen wir eine zusätzliche Klasse ein, im Beispiel n genannt, um die Deklaration display:none auch durchzusetzen.

Die Spezifizität der ersten Regel ist höher (0-2-1-1 vs. 0-1-1-1), dadurch wird gewährleistet, dass alle Menüpunkte, die wir brauchen, auch angezeigt werden.

Die Darstellung in IE/Win bis Version 6 ist nun noch nicht optimal, denn er lässt noch Lücken an den Stellen, wo die Darstellung der Links unterdrückt ist. Das liegt daran, dass er die Elemente LI als Blockelemente darstellt. Wir schaffen also Abhilfe mit display:inline für alle Elemente LI.

Im Beispiel ist an den Links der zweiten Hierarchiestufe der obere Rahmen entfernt und die einzelnen Menüpunkte sind durch einen negativen Randabstand margin-top:-1px; etwas nach oben gezogen. Dadurch werden die Rahmen zwischen den einzelnen Menüpunkten der zweiten Hierarchiestufe unsichtbar. Um den gleichen Effekt im Opera 6 ebenfalls zu erreichen, muß der margin-Wert auf -5px gesetzt werden. Dadurch können aber die Abstände in den anderen Browsern zu eng erscheinen. Zum Vergleich ist dieser Abstand in den Beispiel 19a und 19b auf -1px, in den Beispielen 19c und 19d auf -5px gesetzt.

Über- und Unterschriften an Menüs:

Da wir gerade dabei sind, die Möglichkeiten der Eigenschaft display auszuloten, können wir gleich noch etwas anderes ausprobieren: erklärenden Text unter einem Menü auszugeben. (Den Anstoß zu diesem Beispiel gab übrigens der Artikel in Eric Meyer's css/edge.) Man muß sich das so vorstellen, dass dieser Text den Inhalt des Menüpunktes erklärt, über dem der Mauszeiger steht, und mit Hilfe der Pseudoklasse :hover ausgegeben wird. Er könnte also praktisch das Attribut title ersetzen.

Wie geht das vor sich? Es kann nur so gehen, dass der gewünschte Text innerhalb des Elementes A steht, auf das die Pseudoklassen wirksam sind. Laut CSS 2.1 sollte :hover auf jedes Element wirken, leider funktioniert das im IE/Win bis Version 6 noch nicht. Deshalb muß man hier darauf achten, welche Eigenschaften vom Element A weitervererbt werden.

Wir separieren diesen Text zunächst mit Hilfe des Elements SPAN, um sicherzustellen, dass der normale Linktext nicht durch die Eigenschaft display beeinflusst wird. Dann unterdrücken wir ihn generell per display:none und definieren im Deklarationsblock für :hover, dass und wie er ausgegeben wird.

Nun müssen wir nur noch einige Regeln für das Aussehen und die Positionierung der Beschreibung deklarieren: siehe Beispiele 23 und 24.

Breitenangaben in em:

Möglicherweise ist es Ihnen aufgefallen, dass der Text des vierten Buttons ('Browser-Support') im Beispiel 11 in einigen Browsern umgebrochen wird. Vom Beispiel 12 an heißt es dann nur noch 'Browsers'. Dieses Umbrechen des Textes ist zwar ein positiver Nebeneffekt, der verhindert, dass der Menüpunkt in den Textbereich hineinragt. Dies ist aber keinesfalls immer erwünscht. Der Grund für diesen Effekt ist, dass die Einstellungen der Schriftgröße in den Browsern unterschiedlich sind.

Dem könnten wir begegnen, indem wir die font-size, genauso wie die Breite des Menüs, pixelgenau festlegen. Der eine oder andere wird diese Lösung, das Layout praktisch 'in Beton zu gießen', vielleicht bevorzugen. Sie hat aber den Nachteil, dass bei einer Änderung der Schriftgröße jedesmal auch die Menübreite nachjustiert werden muss. Ein Besucher der Seite, der sich die Schrift in seinem Browser besonders groß eingestellt hat, kann die Breite des Menüs natürlich nicht ändern und findet so vielleicht ein zerschlagenes Layout vor.

Besser ist es, die Menübreite an der Schriftgröße auszurichten und im Sinne des Liquid Design flexibel zu halten. Dann erscheinen die Menüs zwar nicht immer und überall pixelgenau gleich groß, man hat aber den oben beschriebenen Nebeneffekt vermieden. Wir könnten es uns in diesem Fall sogar leisten, überhaupt keine Schriftgröße für unser Webdokument festzulegen und somit die Wahl der Schriftgröße komplett den Benutzern überlassen.

Diese Beispiele zeigen, wie die Seite aussieht, wenn man verschiedene (vom Benutzer eingestellte) Schriftgrößen annnimmt:
font-size: 9px
font-size: 12px
font-size: 15px
font-size: 18px

Wie erreichen wir das nun? Einfach, indem wir die horizontalen Abstände von Pixel-Einheiten in Em-Einheiten umrechnen. Dabei setzen wir 1 Em etwa gleich mit 14 bis 16 Pixel. Ein Pixel entspricht dabei etwa 0,07 Em. Deshalb sollten wir die Em-Einheiten auf zwei Dezimalstellen genau angeben, um Rundungsfehler klein zu halten und ihre Auswirkungen möglichst auszuschalten.

Die Breite des Elementes A richten wir daran aus, welche Breite für unseren Text notwendig ist, padding und margin rechnen wir direkt um. Es sieht besser aus, wenn die Abstände bei größerer Schrift ebenfalls größer werden. Deshalb könnte man die vertikalen Abstände ebenfalls in Em-Einheiten umrechnen. Im Beispiel hab ich das nicht gemacht.

Alles, was jetzt bleibt, ist, die absolute Positionierung der Navigation auszurichten und das margin-left des Textbereichs auf die neu erforderliche Weite abzustimmen.

Nun ist nur noch die Strichstärke des Rahmens in Pixel angegeben. Damit soll vermieden werden, dass der Rahmen bei kleinerer Schriftgröße durch Rundungsfehler nicht mehr dargestellt wird. Oder nur teilweise, was noch schlechter aussieht. (Aus dem Grund sind auch Prozentangaben für border-width in CSS 2.1 nicht erlaubt.) Wir können dafür zwischen Navigation und Text etwas Reserveabstand zugeben. Dies nimmt maximal 0.14 Em auf, wenn jemand den Text in seinem Browser auf 7 Pixel eingestellt hat.

Horizontales Menu:

Bis jetzt wurde hier nur die herkömmliche Art, ein Menü zu plazieren, besprochen, nämlich links neben dem Text. Vielfach wird das Menü heute aber auch als horizontales Balkenmenü im Header der Seite untergebracht. Es ist ganz einfach, dieses 'Versäumnis' nachzuholen.

Das Layout der Seite wird dadurch sogar etwas einfacher, denn wir brauchen das Menü nicht mehr absolut zu positionieren. Da es oberhalb des Textteils steht, können wir es im normalen Elementfluß belassen.

Nun gibt es zwei Möglichkeiten: Zum einen können wir alle Elemente A mit display:inline; deklarieren. Dies ist der Initialwert, der bewirkt, das sie als Inline- Level- Elemente, wie innerhalb eines Textes, dargestellt werden. Wer wenig Platz zur Verfügung hat, wird diese Lösung bevorzugen, denn dadurch wären die einzelnen Menübuttons an die Länge des Menütextes angepasst. Die Abmessungen der Menü-Tabs sind dann abhängig von der Länge des Textes und von den Werten der Eigenschaften line-height, border-width und padding.

Eine andere Möglichkeit ist, die Elemente A als Block- Level- Elemente zu deklarieren. Diese sollten wir in Betracht ziehen, wenn wir margin, width und height anwenden wollen. Dazu gehört natürlich auch die Eigenschaft float, mit der wir ereichen, dass die Block- Level- Elemente nebeneinander dargestellt werden.

Ganz so ohne weiteres klappt das aber nicht, denn wo es mit allen anderen Browsern funktioniert, tanzt der IE/Win 6 aus der Reihe. Hier macht sich eins der Probleme bemerkbar, die IE/Win immer noch im Zusammenhang mit der Eigenschaft float hat: nicht schön, aber anders. Das bügeln wir aus, indem wir display:inline für LI deklarieren.
Beispiel 21

Auch in diesem Beispiel sind die Proportionen des Menüs wieder von der Schriftgröße abhängig gemacht. Anders sieht es aus, wenn font-size auf 9 Pixel, 12 Pixel oder 18 Pixel eingestellt ist.

Man kann natürlich auch hier die in den Beispielen 18 und 19 gezeigten Techniken anwenden, um bestimmte Tabs besonders hervorzuheben. Beispiel 22 illustriert, wie das aussehen könnte. Mit Hilfe von PNG-Grafiken und der Eigenschaft z-index lassen sich noch zusätzlich hübsche Schatteneffekte realisieren. Im Beispiel wurden jedoch mit Rücksicht auf Probleme, die IE/Win bis zur Version 6 mit dem Alpha-Kanal hat, keine PNG-Grafiken verwendet. Deshalb macht es einen relativ unvollständigen Eindruck, wenn man es mit dem Original vergleicht.

`position:fixed` auch für IE/Win 6:

Oft, insbesondere bei Webdokumenten mit längerem Inhalt, ist es wünschenswert, dass die Navigation beim Scrollen am oberen Bildrand stehen bleibt. Dadurch lässt sich relativ schnell der nächste Menüpunkt anklicken, ohne wieder zurück zu scrollen.

Dies ist für fast alle modernen standardstreuen Browser realisierbar. Wir haben die Möglichkeit, mit Hilfe der Deklaration position:fixed Elemente (und auch Hintergründe) fest innerhalb einer Webpage zu plazieren, so dass sie sich beim Scrollen nicht mitbewegen. Wer erinnert sich nicht noch an die Zeiten der Version-4-Browser, in denen so etwas nur per JavaScript möglich war. Leider gibt es einen Browser, der diesen Zeiten auch heute noch nicht so ganz entwachsen scheint: IE/Win.

Wie die Regel position:fixed sich auswirkt, kann an diesen beiden Beispielen beobachtet werden: 25 und 26. Nicht nur, dass IE/Win die entsprechende Regel einfach übergeht (wie CSS 2.1 es vorschreibt), nein, das Layout wird völlig zerrissen.

Es macht aber keinen Sinn, deshalb auf fixe Positionierungen ganz zu verzichten. 90% aller Bildschirme sind heute bereits 1024×768 oder größer. Da ist es unwahrscheinlich, dass eine Navigation darauf keinen Platz findet. Natürlich sollte man bei großen Navigationen nichts riskieren, denn wenn eine fixed positionierte Navigation mehr Platz benötigt als der Bildschirm ihr gibt, ist sie in Teilen völlig unzugänglich.

Im Web werden bereits einige Wege besprochen, wie position:fixed auch für den IE funktionsfähig gemacht werden kann. Dabei handelt es sich aber in der Regel um CSS-Hacks, die auf browserspezifischen Fehlern oder proprietären Eigenschaften basieren. Es wird sogar mit in das Stylesheet integrierten JavaScript-Brocken experimentiert. Dass alle diese Ansätze nicht standard- konform sind und daher auch nicht validieren, versteht sich von selbst. Darüber hinaus hat jede dieser "Lösungen" einen Effekt auf andere Browser, der dann mit weiteren Umgehungsregeln wieder rückgängig gemacht werden muss.

Die beste Lösung für dieses Problem bietet, wie sollte es anders sein, JavaScript. Dies gehört im Grunde genommen nicht zum Thema einer Website wie dieser, die sich ausschließlich mit CSS befasst. Es bietet uns aber einen derartig großen Vorteil, dass wir uns da nicht verschließen wollen. Das am besten dokumentierte Script, mit dem Hintergründe und Elemente fixed positioniert werden können, findet man bei Andrew Clover. Es sorgt dafür, dass IE/Win ab Version 5 die Deklarationen background-attachment:fixed und position:fixed korrekt interpretiert. Die Beispiele von oben funktionieren dann so: 25a und 26a.

Damit sind wir am Ende des Teils 2 von "Sitenavigation mit CSS-formatierten Listen" angelangt. Wer möchte, kann jetzt noch einmal den Teil 1 rekapitulieren, in dem der grundsätzliche Aufbau CSS-formatierter Navigationslisten erläutert wird. Der nächste Artikel zum Thema 'CSS-Navigation' stellt eine innovative Technik zum Aufbau anpassungsfähiger horizontaler Navigationsleisten vor.
TOP

Notizen: