CSS 2.1 ::Artikel
Horizontal-Navigation mit gleitenden Hintergründen
Das Original dieses Textes wurde zuerst am 20. Oktober 2003 unter dem Titel Sliding Doors of CSS im Online-Magazin A List Apart veröffentlicht. Der Autor ist Douglas Bowman. Die Übersetzung erfolgte mit Genehmigung von A List Apart und dem Autor.
Translated with the permission of A List Apart Magazine and the author.
Einleitung
Ein selten angesprochener Vorteil von CSS liegt darin, dass wir Hintergrundgrafiken in verschiedenen gedachten Ebenen anlegen können. Damit können wir sie virtuell über einander gleiten lassen, um bestimmte Effekte zu erzeugen. Beim derzeitigen Entwicklungsstand von CSS 2 braucht man für jedes Hintergrundbild ein separates HTML-Element. Das charakteristische Mark-Up der üblichen Navigationen enthält aber oft bereits mehrere Elemente, die wir für unsere Zwecke nutzen können.
Einer dieser Fälle ist die horizontale Balkennavigation mit Tabs. Tabs werden als Primärnavigation immer beliebter, deshalb sollten wir ihre Darstellung nicht länger unkontrolliert sich selbst überlassen. Da CSS heute weithin unterstützt wird, können wir es nutzen, um die Qualität und Erscheinung der Tabs auf unserer Website zu verbessern. Sie wissen sicher, dass man Stylesheets verwenden kann, um die Darstellung einfacher, ungeordneter Listen zu kontrollieren. Vielleicht haben Sie selbst schon Listen gesehen, die als Tabs gestylt waren und etwa wie im folgenden Diagramm aussahen.
Diagramm 1: Beispiel herkömmlicher CSS-basierter Tabs, eckig und mit Flächenfarben.
Was wäre, wenn wir denselben Code wie im Diagramm oben verwenden und daraus etwas machen könnten, das wie dieses Bild aussieht?
Diagramm 2: Stilisierte Tabs mit abgerundeten Ecken und unauffälliger 3D-Schattierung.
Mit ein wenig einfachem CSS ist das möglich.
Wo ist dabei die Innovation?
Ich habe viele CSS-basierte Tab-Designs gesehen, die alle unter den gleichen generischen Eigentümlichkeiten leiden: blockartige Farbrechtecke, vielleicht mit einer Außenlinie, für den aktuellen Tab verschwindet eine Rahmenseite oder eine Farbe ändert sich unter :hover. Ist das alles, was CSS uns zu bieten hat? Ein Haufen Rechtecke und gleichförmige Farben?
Im Bereich des Navigationsdesigns haben wir schon eine Menge Innovationen gesehen, bevor CSS weithin angenommen wurde: kreative Formen, meisterhafte Farbübergänge und die Nachempfindung natürlicher interaktiver Elemente der realen Welt. Diese Designs basierten aber oft stark auf komplizierten Konstruktionen von im Text eingebetteten Images oder sie waren von mehrfach geschachtelten Tabellen umgeben. Einfache Modifikationen am Text oder an der Tab-Folge wurden dadurch zu einem umständlichen Prozess und Änderungen an der Schriftgröße waren entweder gar nicht möglich oder verursachten größere Layoutprobleme.
Reine Textnavigation ist sehr viel einfacher zu pflegen und lädt schneller als grafikbasierte Navigationen. Zwar können wir jeder Grafik ein Attribut alt zur Seite stellen, dennoch bietet reiner Text eine bessere Zugänglichkeit (siehe Anmerk. d. Ü.), weil sehbehinderte Besucher die Textgröße anpassen können. Daher ist es kein Wunder, dass CSS-formatierte, rein text-basierte Navigationen heute im Webdesign ihre Renaissance erleben. Nach ihrer äußeren Erscheinung dagegen sind die meisten heutigen CSS-basierten Tab-Designs ein Rückschritt und sicherlich nicht etwas, das wir in unserem Design-Portfolio haben wollten. Eine neue Technik wie CSS sollte uns doch erlauben, etwas besseres zu schaffen, ohne auf die Designqualität der Tabellenhacks und grafikbasierten Tabs zu verzichten.
Die Schiebetürentechnik
Wir können bildschön gefertigte und vollständig flexible Navigationen erstellen, die sich mit der Textgröße verengen oder erweitern, wenn wir zwei separate Hintergrundbilder verwenden: eins für die linke und eins für die rechte Seite. Stellen Sie sich diese Bilder wie die beiden Seiten einer Schiebetür vor, wie sie z. B. in einem Eingang eingebaut sind. Beide Teile gleiten zusammen und überlappen sich mehr, wenn der Durchgang schmal ist. Sie gleiten auseinander und überlappen sich weniger, wenn der Durchgang breiter ist:
Diagramm 3: Zwei Paar Schiebetüren. Das erste Paar ist zusammen gedrückt und braucht weniger Platz. Das zweite Paar ist auseinander gezogen und benötigt mehr Platz.
Bei diesem Modell bedeckt die eine Grafik einen Teil der anderen Grafik. Wenn wir nun annehmen, dass jede Grafik auf ihrer Außenseite ein alleinstellendes Merkmal besitzt, z.B. abgerundete Ecken, dann wollen wir vermeiden, dass die 'vordere' Grafik die 'hintere' komplett verdeckt. Um das zu erreichen, erstellen wir die vordere Grafik so schmal wie möglich. Wir halten sie aber gerade so breit, dass ihr individueller Teil sichtbar bleibt. Wenn die Ecken auf der Außenseite abgerundet sind, sollte die vordere Grafik nicht breiter sein als die Ausrundung:
Diagramm 4: Links ein einzeln stehendes schmales Image der linken Seite mit abgerundeter linker Ecke. Daneben das gleiche Image vor einem Image der rechten Seite mit abgerundeter rechter Ecke.
Wenn das Objekt breiter wird als im Bild oben dargestellt, sei es durch unterschiedlichen Text oder durch Änderungen der Schriftgröße, werden die Grafiken auseinandergezogen und eine unschöne Lücke entsteht. Wir müssen deshalb willkürlich entscheiden, wieviel Ausdehnung wir höchstens unterbringen wollen. Wie groß kann das Objekt mit wachsender Schriftgröße maximal werden? Wir sollten realistischerweise eine Ausdehnung um mehr als 300% einkalkulieren und müssen unsere Images in entsprechender Größe herstellen. Die Grafiken unserer Beispiele sind 400×150 Pixel für die rechte Seite und 9×150 Pixel für die linke Seite groß.
Wir dürfen nicht vergessen, dass die Hintergrundgrafiken nur in dem verfügbaren 'Durchgang' des Elements sichtbar sind, an das sie angebracht wurden. Beide Images sind an den äußeren Ecken ihres jeweiligen Elements verankert. Ihr sichtbarer Teil passt sich innerhalb des Durchganges ein und bildet dort, wie in Diagramm 5 erkennbar, eine tab-ähnliche Figur.
Diagramm 5: Beide Images sind nach unten erweitert, das rechte Image ist zusätzlich zur linken Seite erweitert. Ihre sichtbaren Teile fügen sich nahtlos zu einer Tab-Figur zusammen.
Sollte der Tab einmal größer werden müssen, gleiten beide Images auseinander (der 'Durchgang' wird praktisch breiter) und ein größerer Teil der Images erscheint.
Diagramm 6: Beide Images leicht auseinander gezogen und etwas höher. Dadurch entsteht ein etwas breiterer, höherer Tab. Da diese Änderungen für beide Images einkalkuliert wurden, entsteht die Illusion eines Tabs, der sich natürlich mit dem Text ausdehnt.
Für dieses Beispiel habe ich mit Photoshop zwei leicht dreidimensional aussehende Tabs erstellt, wie sie am Beginn des Artikels gezeigt wurden. Einer der beiden Tabs wurde leicht aufgehellt mit abgedunkeltem Rand für die Darstellung des Tabs, der der aktuell vom User gewählten Seite entspricht. Wir nennen ihn hier den 'aktuellen Tab'. Beide Tabs sind nach der Beschreibung oben großflächig angelegt und, wie im Diagramm 7 gezeigt, in zwei Teile geschnitten.
Diagramm 7: Images für die rechte und die linke Seite.
Dasselbe muss nun noch für den zweiten Tab durchgeführt werden. Sobald alle 4 Grafiken fertig sind, können wir mit der Arbeit am Code und CSS beginnen.
Zusammenbau der Tabs
Wenn wir die Erstellung horizontaler Listen mit CSS recherchieren, stellen wir bald fest, dass es zwei Vorgehensweisen gibt, um eine Gruppe von Elementen in einer horizontalen Reihe zu arrangieren. Jede hat ihre eigenen Vor- und Nachteile. Beide verlangen, dass wir uns mit einigen ungewöhnlichen Aspekten des CSS auseinander setzen, die schnell verwirrend werden können. Eine Methode verwendet die Inline- Box, die andere verwendet float.
Die erste Methode ist möglicherweise etwas weiter bekannt. Hier wird jeder Listenpunkt als Inline- Box ausgegeben. Diese Arbeitsweise ist einfach zu verstehen und deshalb recht beliebt. Für unser spezielles Thema birgt sie aber einige Probleme in bestimmten Browsern, die wir weiter unten noch ansprechen. Wir konzentrieren uns hier auf die zweite Methode, bei der jeder Listenpunkt mit Hilfe von float in einer horizontalen Reihe gehalten wird. Floats können ebenso frustrierend sein wie Inline- Boxes. Ihr sichtlich unbeständiges Verhalten lässt sich mit einfacher Logik nicht erfassen. Aber ein wenig grundsätzliches Verständnis für den Umgang mit einer Vielzahl floatierter Elemente und für die Möglichkeiten, einen float-Bereich zuverlässig zu verlassen oder einzugrenzen, wirkt manchmal Wunder.
Wir werden verschiedene floatierte Elemente in ein anderes floatiertes Element schachteln, so dass das floatierte Elternelement die inneren Floats vollständig umschließt. Dadurch können wir hinter unseren Tabs noch zusätzliche Hintergrundeigenschaften deklarieren. Sehr wichtig ist dabei, dass das nächste Element unterhalb der Tabs sich durch die Eigenschaft clear völlig von den floatierten Elementen löst. Dadurch vermeiden wir, dass die Tabs die Position anderer Elemente der Seite beeinflussen.
Hier ist unser Anfangscode:
<div id="header"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
Es kann leicht sein, dass der Container header zusätzlich ein Firmenlogo oder ein Suchfeld enthalten muss. Auch haben wir für unser Beispiel den Wert href in den Links verkürzt, in der Realität ist er natürlich länger.
Wir beginnen, indem wir das Element header nach links floatieren. Das trägt mit dazu bei, dass dieser Container die innenliegenden floatierten Listenelemente auch wirklich umfasst. Wie immer bei floatierten Elementen, müssen wir eine Breite angeben und deklarieren sie mit '100%'. Der gelbe Hintergrund wird temporär eingefügt, um die tatsächlichen Ausmaße des Containers zu kontrollieren. Zusätzlich geben wir noch einige Texteigenschaften vor, sodass der Text in allen Tabs gleich aussieht:
#header { float:left; width:100%; background:yellow; font-size:93%; line-height:normal; }
Für den Moment setzen wir auch margin und padding unserer ungeordneten Liste und der Listenpunkte auf 0, entfernen die Listenmarker und floatieren alle Listenpunkte ebenfalls nach links:
#header ul { margin:0; padding:0; list-style:none; } #header li { float:left; margin:0; padding:0; }
Die Ankerelemente machen wir zu Block- Boxes, denn das gibt uns größere Kontrolle über ihr Aussehen und wir haben nicht die für Inline- Boxes typischen Probleme:
#header a { display:block; }
Dann unterlegen wir unsere Listenelemente mit dem Hintergrundbild für die rechte Seite:
#header li { float:left; background:url("norm_right.gif") no-repeat right top; margin:0; padding:0; }
Bevor wir das Bild für die linke Seite einfügen, sehen wir uns im Beispiel 1 an, was wir bis jetzt haben. (Die Regel für body dient nur der Formatierung der Beispieldatei, sie hat nichts mit dem Thema zu tun.)
Das linksseitige Bild können wir jetzt an das Ankerelement innerhalb von li anbringen. Dadurch gelangt es gleichzeitig 'vor' die rechtsseitige Grafik. Zusätzlich dehnen wir den Tab mit einigen Pixeln padding noch etwas aus:
#header a { display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px; }
Damit sind wir beim Beispiel 2. Unsere Tabs kommen langsam 'in Form'. An dieser Stelle sei ein Wort des Trostes an alle verwirrten IE/Mac-5-User gerichtet. Die fragen sich nämlich, warum für sie die Tabs immer noch übereinander gestapelt sind und die ganze Breite des Bildschirms einnehmen. Keine Angst, Sie werden sofort bedient. Bis dahin verfolgen Sie vielleicht den Lösungsgang im Geiste mit oder verwenden temporär einen anderen Browser.
Jetzt, nachdem wir unsere Hintergrundbilder für die normalen Tabs deklariert haben, müssen wir noch die Images für den aktuellen Tab ändern. Dazu haben wir schon den Listenpunkt mit dem Attribut id="current" und dem darin liegenden Element a. Da wir außer dem Image nichts am Hintergrund zu ändern brauchen, ist das ganz einfach:
#header #current { background-image:url("norm_right_on.gif"); } #header #current a { background-image:url("norm_left_on.gif"); }
An der Unterseite unserer Tabs fehlt uns noch eine Art Begrenzung. Jetzt könnten wir einfach die Eigenschaft border am Element header definieren. Wir wollen aber, dass die Hintergründe von aktuellem Tab und den Inhalten nahtlos ineinander übergehen. Deshalb erstellen wir schnell eine kleine Grafik, die an ihrer Unterseite den Rahmen enthält. Weil wir gerade dabei sind, fügen wir noch einen kleinen Gradienten hinzu:
Diagramm 8: Hintergrundgrafik der Tab-Leiste.
Diese Grafik definieren wir als Hintergrund des Containers header, schieben sie dort ganz nach unten und ersetzen das Gelb durch eine passende Farbe. Gleichzeitig entfernen wir das padding vom Element body und geben der Liste oben, rechts und unten noch ein wenig padding.
#header { float:left; width:100%; background:#DAE0D2 url("bg.gif") repeat-x bottom; font-size:93%; line-height:normal; } #header ul { margin:0; padding:10px 10px 0; list-style:none; }
Wie oben bereits angedeutet, soll zwischen dem aktuellen Tab und den Inhalten keine Trennungslinie verlaufen. Wir könnten das erreichen, indem wir border-bottom für die Tabs definieren und deren Farbe für den aktuellen Tab in Weiß ändern. Dadurch bleibt aber an der Außenseite unten eine kleine störende Stufe bestehen. Es ist besser, wenn wir padding an der Unterseite der Ankerelemente anbringen. Dadurch entsteht der Eindruck einer exakten Ecke, wie in Diagramm 9 vergrößert zu sehen ist.
Diagramm 9: Zwei Versionen der Unterseite der Tabs, links mit der durch border-bottom entstandenen 1-Pixel-Stufe, rechts mit dem durch padding erzeugten perfekten Winkel.
Wir erreichen das, indem wir den unteren Abstand der normalen Ankerelemente, aber nicht des aktuellen Ankers, um 1 Pixel verringern:
#header a { display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px 4px; } #header #current a { background-image:url("norm_left_on.gif"); padding-bottom:5px; }
Dadurch erscheint die Rahmenunterseite aller normalen Tabs, für den aktuellen Tab wird er jedoch versteckt. Das Ergebnis bis hierhin ist im Beispiel 3 zu sehen.
Letzte Korrekturen
Wer genau hingesehen hat, wird im vorangegangenen Beispiel die hellen Ecken außerhalb der Ausrundungen der Tabs bemerkt haben. Die Opazität dieser Ecken verhindert, dass die rechts-seitige 'hintere' Grafik durch die linke Ecke der linken 'vorderen' Grafik durchscheint. Theoretisch könnten wir die Ecken ebenso wie den Hintergrund einfärben. Unsere Tabs sind aber in der Höhe ebenfalls veränderbar, sodass die Farbe der Ecken nicht mehr mit dem Farbverlauf des Hintergrundes übereinstimmt, wenn die Tabs höher werden. Statt dessen ändern wir unsere Bilder so, dass ihre Ecken transparent werden. Als transparente Farbe wählen wir einen mittleren Ton des Farbverlaufs im Hintergrund.
Jetzt wird jedoch ein Teil des rechten Bildes hinter der durchscheinenden Ecke des Bildes links sichtbar. Um das zu verhindern, geben wir dem Listenelement (welches das rechte Bild enthält) an der linken Seite soviel padding, wie es der Breite des linken Bildes entspricht. Damit der Text zentriert bleibt, müssen wir ebenso viel padding am Ankerelement wieder entfernen (15 Pixel - 9 Pixel = 6 Pixel):
#header li { float:left; background:url("right.gif") no-repeat right top; margin:0; padding:0 0 0 9px; } #header a { display:block; background:url("left.gif") no-repeat left top; padding:5px 15px 4px 6px; }
Das kann aber ebenfalls nicht so bleiben, denn durch die 9 Pixel padding wird das links-seitige Bild nun vom linken Rand weggedrückt. Da die Bilder sich jetzt nicht mehr gegenseitig überdecken, können wir sie auch umtauschen. Das linksseitige Bild wird an das Listenelement angebracht und das rechtsseitige Bild an den Anker. Die Bilder für den aktuellen Tab müssen ebenfalls geändert werden.
#header li { float:left; background:url("left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } #header a, #header strong, #header span { display:block; background:url("right.gif") no-repeat right top; padding:5px 15px 4px 6px; } #header #current { background-image:url("left_on.gif"); } #header #current a { background-image:url("right_on.gif"); padding-bottom:5px; }
Damit sind wir bei Beispiel 4 angelangt. Die kleinen Tricks, die notwendig waren, um den Ecken Transparenz zu geben, bewirken auch einen kleinen Freiraum auf der linken Seite, der nicht anklickbar ist. Er liegt zwar außerhalb des Textes, mag aber doch dem einen oder anderen User auffallen. Es ist nicht unbedingt notwendig, die transparenten Ecken zu haben. Wenn wir lieber den klickfreien Raum vermeiden wollen, können wir hinter unseren Tabs auch eine Flächenfarbe definieren, mit der wir ebenfalls die Ecken unserer Tabs einfärben. Für unser Beispiel bleiben wir bei der transparenten Lösung.
Zum Schluss modifizieren wir noch die Texteigenschaften der Tabs, um den Text an user Design anzupassen. Alle Änderungen sind im Beispiel 5 erkennbar.
Ein Hack für Einheitlichkeit
Unter Beispiel 2 wurde auf ein Problem des IE/Mac 5 hingewiesen, der jedem Tab die gesamte Breite des Browserfensters gibt. Dadurch werden die Tabs gezwungenermaßen untereinander dargestellt. Von dem beabsichtigten Effekt ist das weit entfernt.
In den meisten Browsern bewirkt die Floatierung eines Elements, dass es auf die kleinste mögliche Größe, die seine Inhalte erlauben, zurückgeschrumpft wird. Wenn das floatierte Element eine Grafik enthält (oder eine Grafik ist), dann wird es auf die Breite der Grafik geschrumpft. Wenn es nur Text enthält, wird es auf die Breite der längsten Inline- Box geschrumpft.
Das Problem des IE/Mac tritt auf, wenn ein Block- Level- Element mit automatischer Breite in ein floatiertes Element eingefügt wird. Andere Browser schrumpfen das außenliegende Float-Element ungeachtet des darin liegenden Blocks auf die kleinstmögliche Breite. IE/Mac 5 dagegen expandiert erst die Blocks auf die größtmögliche Breite und legt dann den Float außen herum. Zur Umgehung dieses Problems müssen wir die Ankerelemente auch floatieren, aber nur für IE/Mac 5, um nicht die anderen Browser wieder 'aus der Bahn' zu werfen. Dazu floatieren wir zuerst das Element a. Anschließend ergänzen wir für alle anderen Browser eine Regel, die den float wieder entfernt. Diese Regel verstecken wir vor dem IE/Mac 5 mit dem Kommentar- Backslash-Hack:
#header a { float:left; display:block; background:url("right.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #header a {float:none;} /* End IE5-Mac hack */
Wie im Beispiel 6 gezeigt, sollte IE/Mac 5 die Tabs jetzt auch wie geplant ausgeben. Für alle anderen Browser sollte sich nichts geändert haben.
Beachten Sie bitte, dass IE/Mac 5.0 eine Menge Fehler aufweist, die aber mit dem Upgrade zur Version 5.1 beseitigt wurden. Aus dem Grund ist die Darstellung im IE/Mac 5.0 jenseits des Punktes, bis zu dem Hacks sich noch lohnen. Der Upgrade ist jetzt seit geraumer Zeit verfügbar, sodass der Anteil an OS-9-Macs, die noch IE 5.0 nutzen, langsam aber sicher verschwinden sollte.
Variationen
Damit sind wir alle Punkte der Schiebetürentechnik durchgegangen. Wir haben eine Tab-Navigation mit reinem Text erstellt, basierend auf einer ungeordneten Liste und sie mit ein paar speziellen Style-Regeln angepasst. Sie lädt schnell, ist einfach zu unterhalten und ihr Text kann in größerem Ausmaß skaliert werden, ohne dass Design zu sprengen. Müssen wir noch betonen, wie flexibel diese Technik für grafisch anspruchsvolle Navigationen sein kann?
Den Verwendungsmöglichkeiten dieser Technik sind nur durch unsere Phantasie Grenzen gesetzt. Unser letztes Beispiel zeigt nur eine Möglichkeit, aber wir sollten uns durch ein Beispiel nicht einschränken lassen.
So müssen die Tabs nicht unbedingt symmetrisch sein. Ich hab schnell mal eine zweite Version der Tabs kreiert, die zwar nicht den 3D-Look der anderen Tabs haben, aber dafür schrägwinklige Ecken und eine breitere und mehr detaillierte linke Seite. Abhängig vom Design können wir auch die linksseitigen Bilder mit den rechtsseitigen vertauschen. Wenn wir vorausschauend planen und die Bilder an den Hintergrund anpassen, kann auch der untere Rahmenteil wegfallen, wie es in der deco-inspirierten Version 3 zu sehen ist. Mit Hilfe eines Style-Switchers lässt sich sogar zwischen verschiedenen Designs derselben Masterdatei wechseln.
Es gibt noch weitere Effekte, die wir hier nicht behandelt haben. In unserem durchgehenden Beispiel hab ich nur die Textfarbe für den hover-Status geändert. Es könnten aber auch ganze Grafiken ausgetauscht und damit interessante Rollover-Effekte erzeugt werden. Wann immer zwei verschachtelte Elemente im Code vorhanden sind, können wir mit CSS Hintergrundbilder in zwei Schichten anordnen. Und damit Effekte erzielen, die wir uns heute noch nicht vorstellen können.
Hier haben wir eine horizontale Reihe mit Tabs geschaffen, aber das Verfahren der CSS-Schiebetüren kann auch bei vielen anderen Gelegenheiten genutzt werden. Was fällt Ihnen dazu ein?
TOP
Doug Bowman hat diese Technik noch in verschiedene Richtungen weiterentwickelt. Diese werden im Teil 2 vorgestellt.
Anmerkung d. Ü.:
Der veraltete Ausdruck für Zugänglichkeit ist 'Barrierefreiheit'. Er ist im deutschen Sprachraum noch weit verbreitet, wird aber den aktuellen Entwicklungen und Diskussionen auf diesem Gebiet seit etwa 2002 nicht mehr gerecht. Er sollte daher nicht weiter verwendet werden. Auf dieser Website wird durchgängig der mehr angemessene Ausdruck 'Zugänglichkeit' verwendet.
Hinweis:
Das Original dieses Textes wurde zuerst am 20. Oktober 2003 unter dem Titel Sliding Doors of CSS im Online-Magazin A List Apart veröffentlicht. Der Autor ist Douglas Bowman. Die Übersetzung erfolgte mit Genehmigung von A List Apart und dem Autor.
Translated with the permission of A List Apart Magazine and the author.
