Problem 34. Wie ersetze ich die Bilder in der Navigation durch CSS? Lösung

Transkript

1 D3kjd3Di38lk323nnm 73 Wenn Sie sich nicht auf einen Webauftritt aus nur einer einzigen Seite beschränken, müssen Sie eine Seitennavigation entwerfen. Tatsächlich ist die Navigation einer der wichtigsten Teile eines jeden Webdesigns und erfordert eine gute Planung, damit Ihre Besucher sich leicht auf Ihrer Website zurechtfinden. Eine einfachere Seitennavigation ist einer der Bereiche, in denen CSS seine eigentlichen Stärken besitzt. Ältere Methoden zum Entwurf einer Navigation stützten sich oft auf jede Menge Bilddateien, verschachtelte Tabellen und JavaScript, die allesamt die Gebrauchstüchtigkeit und Zugänglichkeit/Barrierefreiheit einer Seite ernsthaft beeinträchtigen können. Wenn man auf Ihrer Website mit einem Gerät, das beispielsweise kein JavaScript unterstützt, nicht navigieren kann, werden nicht nur alle Benutzer ausgeschlossen, die in ihren Browsern Java- Script deaktiviert haben, sie schließen auch alle Benutzer von Lesegeräten aus, die nur Text interpretieren können, wie etwa Screenreader, sowie die Robots der Suchmaschinen. Diese werden nie weiter als auf Ihre Startseite kommen und können deshalb auch Ihre Inhalte nicht indexieren. Falls Ihre Kunden nichts von Zugänglichkeit wissen wollen, sagen Sie ihnen, dass ihr schwerfälliges Menü eine anständige Platzierung in den Suchmaschinen verhindert. Mit CSS können Sie ansprechende Navigationsmenüs entwickeln, die in Wirklichkeit aus nichts anderem als aus Text bestehen. Dieser kann so ausgezeichnet werden, dass er sowohl zugänglich ist als auch von allen Benutzern verstanden werden kann, die nicht in der Lage sind, Ihr Design optisch zu erfassen, aber Ihre Inhalte trotzdem erfahren möchten. In diesem Kapitel sehen wir uns eine Reihe von Lösungen an. Einige davon eignen sich für die direkte Übernahme in ein bestehendes Design und verkürzen damit die Ladezeit der Seite. Gleichzeitig wird die Zugänglichkeit erheblich verbessert, wenn eine altmodische, grafikbasierte Navigation ersetzt wird. Andere Beispiele eignen sich besser für Websites mit einem reinen CSS-Layout. Seitennavigation mit guter Zugänglichkeit Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

2 74 Problem 34 Wie ersetze ich die Bilder in der Navigation durch CSS? Navigationsbuttons als Bilder zu erstellen ist immer noch eine gängige Methode, eine Seitennavigation zu entwerfen. Normalerweise enthalten diese Bilder eine Aufschrift, die das Linkziel bezeichnet. Mit der Verwendung von Bildern als Navigationsbuttons sind jedoch vielfältige Probleme verbunden: Um eine neue Schaltfläche einzufügen, muss ein neues Bild erzeugt werden. Wenn Sie an dieser Stelle bemerken, dass Sie Ihre Original- Photoshop-Datei nicht mehr finden, müssen Sie die gesamte Navigation von Grund auf neu erzeugen. Stellen Sie sich vor, Ihre Navigationsbuttons werden dynamisch erzeugt, möglicherweise aus Inhalten, die in einer Datenbank gespeichert sind. Obwohl es möglich ist, neue Bilder dynamisch zu erzeugen, muss man viel mehr Code schreiben, um diese neuen Navigationsbuttons in jede Seite zu integrieren. Benutzer, die die Anzeige von Bildern deaktiviert haben, oder andere Geräte wie etwa Screenreader verwenden, können keine Aufschriften auf Schaltflächen lesen. Zusätzliche Bilder verlangsamen die Ladezeit einer Seite. Lösung Navigationsmenüs der alten Schule sind oftmals mit Layouttabellen und Bildern realisiert. Solche grafikbasierten Menüs können mithilfe von CSS durch textbasierte Menüs ersetzt werden. Die folgenden beiden HTML- und CSS-Beispiele erzeugen ein einfaches Navigationsmenü, in dem die Zellen einer Tabelle und die darin enthaltenen Links mit CSS gestaltet werden. Listen sind meistens die beste Wahl! In diesem Beispiel habe ich eine Tabelle verwendet, aber einzig und allein in der Hoffnung, dass es für Sie hilfreich sein möge, falls Sie versuchen, eine ältere Website nachzurüsten, ohne die Seite komplett neu aufzubauen. Wenn Sie Ihre Navigation neu erstellen, sollten Sie Ihre Menüeinträge von vornherein als ungeordnete Liste definieren, genau darum geht es in der folgenden Lösung von Problem 35»Wie mache ich aus einer strukturierten Liste ein Navigationsmenü?«.

3 Wie ersetze ich die Bilder in der Navigation durch CSS? 75 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="de"> <head> <title>replaceimages</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="replaceimages.css" /> </head> <body> <table id="navigation"> <tr> <td> <a href="#">rezepte</a> </td> </tr> <tr> <td> <a href="#">kontakt</a> </td> </tr> <tr> <td> <a href="#">artikel</a> </td> </tr> <tr> <td> <a href="#">online kaufen</a> </td> </tr> </table> </body> </html> body { background-color: #ffffff; color: #000000; margin: 0; padding: 1em; font: 1em Arial, Helvetica, sans-serif; Beispiel 4 1 replaceimages.html Beispiel 4 2 replaceimages.css #navigation { width: 180px; padding: 0; margin: 0; border-collapse: collapse; Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

4 76 #navigation td { border-bottom: 2px solid #460016; background-color: #FFDFEA; color: #460016; #navigation a:link, #navigation a:visited { display: block; margin: 0.4em 0 0.4em 1em; color: #460016; background-color: transparent; font-size: 90%; text-decoration: none; font-weight: bold; * html #navigation a { width: 100%; Diese Technik könnte eingesetzt werden, um die Verwaltung einer bestehenden Internetseite zu vereinfachen, weil zusätzliche Menüpunkte eingefügt werden können, ohne dass neue Bilddateien erzeugt werden müssen. Gleichzeitig wird die Ladezeit der Seite minimiert. Erörterung Navigationsmenü mit Bilddateien in Tabellenspalten Durch einfache Formatierungen von Text können mit CSS attraktive Navigationssysteme entwickelt werden. Die Abbildung 4 1 zeigt ein Menü, bei dem Bilddateien in Tabellenspalten eingefügt wurden, eine allgemein übliche Methode, Navigationsmenüs zu erstellen. Abb. 4 1 Häufig werden Bilddateien zum Erzeugen einer Navigation benutzt.

5 Wie ersetze ich die Bilder in der Navigation durch CSS? 77 Dies ist der HTML-Code für diese Navigation: <table width="180" cellpadding="0" cellspacing="0"> <tr> <td> <a href="#"><img src="images/nav1.gif" width="180" height="28" alt="rezepte" border="0" /></a> </td> </tr> <tr> <td> <a href="#"><img src="images/nav2.gif" width="180" height="28" alt="kontakt" border="0" /></a> </td> </tr> <tr> <td> <a href="#"><img src="images/nav3.gif" width="180" height="28" alt="artikel" border="0" /></a> </td> </tr> <tr> <td> <a href="#"><img src="images/nav4.gif" width="180" height="28" alt="online kaufen" border="0" /></a> </td> </tr> </table> Wenn man die Bilder herausnimmt und jeden Menüpunkt durch Text ersetzt, wird der gesamte Code sofort kleiner und die Seite zugänglicher. Allerdings trägt die Benutzung von schlichtem Text nicht zum guten Aussehen der Seite bei, wie Sie in der Abbildung 4 2 erkennen können. Abb. 4 2 Das Navigationssystem sieht ohne Bilder langweilig aus. Mit CSS können wir das ursprüngliche Aussehen dieses Menüs auch ohne Bilder wiederherstellen. Als Erstes weisen wir der Navigationsta- Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

6 78 belle einen Namen zu, der es uns ermöglicht, diese Tabelle innerhalb des Dokuments anzusprechen. Außerdem erzeugen wir CSS-Selektoren für die Elemente innerhalb dieser Tabelle. Wir können dann den CSS-Code für die ID-Navigation schreiben, was bedeutet, dass wir auch keine Attribute für das <table>-tag mehr brauchen. Beispiel 4 3 Ausschnitt aus replaceimages.html Beispiel 4 4 Ausschnitt aus replaceimages.css <table id="navigation"> Im Folgenden nun der CSS-Code, der das Aussehen der Tabelle als Ganzes steuert: #navigation { width: 180px; padding: 0; margin: 0; border-collapse: collapse; Die Einstellung der Eigenschaft border-collapse auf den Wert collapse bewirkt, dass die Tabellenzellen zusammenrücken, sodass es nur eine einzige Randlinie zwischen den Zellen gibt. In der Standardeinstellung haben alle Tabellenzellen ihre eigene Randlinie und zusätzliche Abstände zwischen den Zellen. Wir werden als Nächstes die <td>-tags der Tabelle gestalten. Jede Tabellenzelle soll eine Hintergrundfarbe und eine untere Randlinie erhalten. Beispiel 4 5 Ausschnitt aus replaceimages.css #navigation td { border-bottom: 2px solid #460016; background-color: #FFDFEA; color: #460016; Es sieht schon recht gut aus, wie Sie in der Abbildung 4 3 erkennen können. Abb. 4 3 Das Navigationsmenü im neuen Stil ( #FFDFEA entspricht Rosa).

7 Wie mache ich aus einer strukturierten Liste ein Navigationsmenü? 79 Jetzt brauchen wir noch ein CSS-Format für die Links innerhalb der Tabellenzellen. Wir müssen einen Abstand zum linken Rand festlegen, damit der Text eingerückt wird. Dann folgen noch Farbe, Schriftgröße, Schriftfamilie, die Entfernung der Unterstreichung bei den Links sowie der Schriftgrad. #navigation a:link, #navigation a:visited { display:block; padding: 0.4em 0 0.4em 1em; color: #460016; background-color: transparent; font-size: 90%; text-decoration: none; font-weight: bold; Beispiel 4 6 Ausschnitt aus replaceimages.css In der Abbildung 4 4 sehen Sie das fertige Ergebnis. Abb. 4 4 Das Navigationsmenü mit CSS anstelle von Bildern Wie mache ich aus einer strukturierten Liste ein Navigationsmenü? Das vorige Beispiel veranschaulichte, wie ein Navigationsmenü innerhalb einer Tabelle mit CSS gestaltet werden kann. Diese Methode hat sich überall dort als äußerst nützlich erwiesen, wo Sie eine bestehende Website nachrüsten müssen, um deren Zugänglichkeit und ihre Ladezeiten zu verbessern. Aber bei neuen Websites ist es wahrscheinlicher, dass Sie versuchen, ein Layout ohne Tabellen zu erstellen oder sie nur da benutzen, wo es absolut unumgänglich ist. Deshalb sind Lösungen, die nicht auf Tabellen beruhen, sinnvoll und wenn Sie die <table>-tags aus Ihren Seiten verbannen, werden Sie feststellen, dass diese weitaus weniger HTML-Tags enthalten. Problem 35 Seitenlayout ohne Tabellen ist sinnvoll. Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

8 80 Lösung Navigation als formatierte Liste Eine Navigation ist, einfach gesprochen, eine Liste von Seiten, die von Benutzern besucht werden können. Aus diesem Grund sind Listen die ideale Methode zur Auszeichnung Ihrer Navigation. Das Menü in Abbildung 4 5 ist eine Liste, die mit CSS formatiert wurde. Abb. 4 5 Menüs können aus CSS-formatierten Listen erzeugt werden. Beispiel 4 7 listnav1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="de"> <head> <title>listnav1 - Navigation mit Listen</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="listnav1.css" /> </head> <body> <div id="navigation"> <ul> <li><a href="#">rezepte</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">artikel</a></li> <li><a href="#">online kaufen</a></li> </ul> </div> </body> </html>

9 Wie mache ich aus einer strukturierten Liste ein Navigationsmenü? 81 #navigation { width: 200px; #navigation ul { list-style: none; margin: 0; padding: 0; #navigation li { border-bottom: 1px solid #ED9F9F; #navigation li a:link, #navigation li a:visited { font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515; border-right: 1px solid #711515; background-color: #B51032; color: #FFFFFF; text-decoration: none; Beispiel 4 8 Ausschnitt aus listnav1.css Erörterung Um eine Navigation mit einer Liste zu erstellen, müssen Sie zuerst die Liste erzeugen und jeden Link der Navigation in ein <li>-element einschließen. <ul> <li><a href="#">rezepte</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">artikel</a></li> <li><a href="#">online kaufen</a></li> </ul> Beispiel 4 9 Ausschnitt aus listnav1.html Diese Liste platzieren Sie in ein <div>-tag mit einer passenden ID. <div id="navigation"> <ul> <li><a href="#">rezepte</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">artikel</a></li> <li><a href="#">online kaufen</a></li> </ul> </div> Beispiel 4 10 Ausschnitt aus listnav1.html Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

10 82 Wie die Abbildung 4 6 zeigt, sieht das mit den Standardeinstellungen des Browsers ziemlich alltäglich aus. Abb. 4 6 Eine unformatierte Liste ist recht einfach. Als Erstes müssen wir das Containerelement, in das die Navigation eingebettet ist, gestalten. Hier heißt dieser Container #navigation. Beispiel 4 11 Ausschnitt aus listnav1.css #navigation { width: 200px; Ich habe dem Container #navigation eine Breite zugewiesen. Wenn dieser Container ein Teil eines CSS-Layouts wäre, hätte ich dieser ID wahrscheinlich noch ein paar Angaben über die Positionierung hinzugefügt. Als Nächstes formatieren wir die Liste: Beispiel 4 12 Ausschnitt aus listnav1.css #navigation ul { list-style: none; margin: 0; padding: 0; Wie Sie in Abbildung 4 7 sehen, entfernen die obigen Regeln die Aufzählungszeichen und die Einrückungen, die von den Browsern automatisch für Listen gesetzt werden. Abb. 4 7 Aufzählungszeichen und Einrückungen wurden entfernt.

11 Wie erzeuge ich einen Rollover-Effekt für ein Menü ohne Bilder oder JavaScript? 83 Im nächsten Schritt wird eine Regel für die <li>-tags innerhalb von #navigation definiert, die ihnen eine Grundlinie hinzufügt. #navigation li { border-bottom: 1px solid #ED9F9F; Beispiel 4 13 Ausschnitt aus listnav1.css Und zum Schluss formatieren wir die Links: #navigation li a:link, #navigation li a:visited { font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515; border-right: 1px solid #711515; background-color: #B51032; color: #FFFFFF; text-decoration: none; Beispiel 4 14 Ausschnitt aus listnav1.css Die meiste Arbeit ist damit erledigt. Wir haben Regeln definiert, die rechts und links einen Rand setzen, die die Unterstreichung entfernen und so weiter. Die zweite Deklaration in den obigen Regeln setzt die Eigenschaft display auf den Wert block. Dadurch wird der Link als Blockelement angezeigt, mit der Folge, dass die gesamte Fläche des»navigationsbuttons«aktiviert ist, wenn Sie mit der Maus darüberfahren. Denselben Effekt würden Sie auch sehen, wenn Sie ein Bild benutzt hätten. Wie erzeuge ich einen Rollover-Effekt für ein Menü ohne Bilder oder JavaScript? Problem 36 Sehr oft enthalten Navigationsmenüs als Besonderheit Rollover- Effekte, sodass beim Darüberfahren mit der Maus ein neues Bild angezeigt und die Schaltfläche dadurch hervorgehoben wird. Um diesen Effekt in einer grafikbasierten Navigation zu erzielen, müssten Sie zwei Bilder und JavaScript einsetzen. Lösung Wenn Sie Ihr Navigationsmenü mit CSS realisieren, sind ansprechende Rollover-Effekte weitaus einfacher zu erzielen, als wenn Sie Bilder verwenden würden. CSS-Rollovers werden mit der Pseudoklasse a:hover erzeugt, genauso als würden Sie einem ganz normalen Link ein Format für den Status hover zuweisen. Rollover-Effekte mit der Pseudoklasse a:hover erzeugen Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

12 84 Wenn wir die Listennavigation des obigen Beispiels weiterverwenden, können wir mit der folgenden Regel einen Rollover-Effekt erzeugen: Beispiel 4 15 Ausschnitt aus listnav2.css #navigation li a:hover { background-color: #711515; color: #FFFFFF; In der Abbildung 4 8 sehen Sie das Menü, wenn die Maus über dem zweiten Menüeintrag steht. Abb. 4 8 Das CSS- Navigationsmenü mit einem Rollover-Effekt Hover hier? Hover da! Im Mozilla und im Internet Explorer 7 können Sie den Pseudoselektor :hover auf jedes beliebige Element anwenden, im Internet Explorer 6 jedoch nur auf Links. In älteren Versionen des Internet Explorers kann man nur das Ankerelement selbst anklicken, weil der Link nicht das gesamte umgebende Element einnimmt (hier: das <li>-element). Das bedeutet dass der Benutzer gezwungen wird, auf den Text zu klicken, um einen Menüeintrag auszuwählen, anstatt auch auf den Hintergrund. Eine Möglichkeit, dieses Verhalten zu korrigieren, ist ein Hack, der die Breite des Links ausdehnt. Das funktioniert aber nur im Internet Explorer 6 und früher. Hier ist die Regel, mit der dies möglich ist: * html #navigation li a { width: 100%; Mehr browserübergreifende Techniken werden wir uns im Kapitel 7 ansehen.

13 Wie erzeuge ich mit CSS und Listen mehrstufige Navigationssysteme? 85 Erörterung Der CSS-Code, der dieses Menü erzeugt hat, ist sehr einfach. Hover- Effekte für komplex formatierte Links können auf die gleiche Weise erzeugt werden wie für unformatierte Links. In diesem Beispiel habe ich einfach nur die Hintergrundfarbe ausgetauscht, sodass sie gleich wie die Farbe des linken Randes ist. Sie könnten jedoch auch die Farben des Hintergrunds, des Textes und des Randes ändern, und somit andere interessante Effekte kreieren. Wie erzeuge ich mit CSS und Listen mehrstufige Navigationssysteme? Problem 37 In den bisherigen Beispielen dieses Kapitels wurde angenommen, dass Ihre Navigation nur eine Ebene besitzt. Manchmal sind aber mehrere Ebenen notwendig, was mit CSS und formatierten Listen möglich ist. Lösung Listen mit Unterlisten sind eine perfekte Möglichkeit, mehrstufige Navigationssysteme darzustellen. Wenn die beiden Ebenen auf diese Weise ausgezeichnet sind, ist das alles einfach zu verstehen, auch für Browser, die kein CSS interpretieren können. Um eine mehrstufige Navigation zu schaffen, können wir die obige einstufige Navigation in der Abbildung 4 8 bearbeiten und darin eine Liste einbetten, der wir mit CSS Farben, Ränder und Eigenschaften für die Links zuweisen. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="de"> <head> <title>listnav_sub - Navigation mit Listen</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="listnav_sub.css" /> </head> <body> <div id="navigation"> <ul> <li><a href="#">rezepte</a> <ul> <li><a href="#">vorspeisen</a></li> <li><a href="#">hauptgerichte</a></li> Mehrstufige Navigationssysteme mit Unterlisten generieren Beispiel 4 16 listnav_sub.html Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

14 86 <li><a href="#">desserts</a></li> </ul> </li> <li><a href="#">kontakt</a></li> <li><a href="#">artikel</a></li> <li><a href="#">online kaufen</a></li> </ul> </div> </body> </html> Beispiel 4 17 listnav_sub.css #navigation { width: 200px; #navigation ul { list-style: none; margin: 0; padding: 0; #navigation li { border-bottom: 1px solid #ED9F9F; #navigation li a:link, #navigation li a:visited { font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515; border-right: 1px solid #711515; background-color: #B51032; color: #FFFFFF; text-decoration: none; * html #navigation li a { width: 100%; #navigation li a:hover { background-color: #711515; color: #FFFFFF; #navigation ul ul { margin-left: 12px; #navigation ul ul li { border-bottom: 1px solid #711515; margin:0;

15 Wie erzeuge ich mit CSS und Listen mehrstufige Navigationssysteme? 87 #navigation ul ul a:link, #navigation ul ul a:visited { background-color: #ED9F9F; color: #711515; #navigation ul ul a:hover { background-color: #711515; color: #FFFFFF; Die Abbildung 4 9 zeigt das Ergebnis. Abb. 4 9 Dieses CSS-Listenmenü enthält ein Untermenü. Erörterung Verschachtelte Listen sind hervorragend geeignet, um das Menü, das wir hier benutzt haben, zu beschreiben. Die übergeordnete Liste enthält die Hauptmenüeinträge der Website und die Liste, die unter dem Eintrag»Rezepte«angeordnet ist, enthält die Untermenüeinträge zur Kategorie»Rezepte«. Auch ohne CSS ist die Struktur der Liste klar ersichtlich und verständlich, wie Sie in der Abbildung 4 10 sehen. Abb Auch ohne CSS ist das Menü verständlich. Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

16 88 Im HTML-Code dieser Liste wird einfach eine zweite Liste innerhalb des entsprechenden <li>-tags des Haupteintrags eingefügt. <ul> <li><a href="#">rezepte</a> <ul> <li><a href="#">vorspeisen</a></li> <li><a href="#">hauptgerichte</a></li> <li><a href="#">desserts</a></li> </ul> </li> <li><a href="#">kontakt</a></li> <li><a href="#">artikel</a></li> <li><a href="#">online kaufen</a></li> </ul> Ohne irgendwelche Änderungen am CSS-Code sieht das Menü wie in Abbildung 4 11 aus: Das <li>-tag erbt die Formate des Hauptmenüs. Abb Das Untermenü übernimmt die Formate des Hauptmenüs. Wir werden nun CSS-Regeln für das Untermenü definieren, damit man auf einen Blick sieht, dass es sich bei diesen Einträgen um ein Untermenü handelt. Beispiel 4 18 Ausschnitt aus listnav_sub.css #navigation ul ul { margin-left: 12px; Diese Regeln rücken das Untermenü auf der linken Seite ein. An der rechten Kante schließt es mit dem Hauptmenü ab, wie Sie in Abbildung 4 12 sehen.

17 Wie erstelle ich ein horizontales Menü mit CSS und Listen? 89 Abb Ein eingerücktes Untermenü Um das Ergebnis zu vervollständigen, definieren wir noch ein paar Regeln für die <li>- und <a>-tags innerhalb der eingebetteten Liste: #navigation ul ul li { border-bottom: 1px solid #711515; margin: 0; #navigation ul ul a:link, #navigation ul ul a:visited { background-color: #ED9F9F; color: #711515; #navigation ul ul a:hover { background-color: #711515; color: #FFFFFF; Beispiel 4 19 Ausschnitt aus listnav_sub.css Wie erstelle ich ein horizontales Menü mit CSS und Listen? Problem 38 Bis jetzt drehten sich alle Beispiele in diesem Kapitel um vertikale Navigationssysteme, die in der Regel in einer Spalte rechts oder links vom Hauptbereich einer Seite angeordnet sind. Es ist jedoch ebenso gebräuchlich, ein horizontales Menü an den Anfang eines Dokuments zu setzen. Lösung Wie die Abbildung 4 13 zeigt, können auch solche Menüs mit CSSformatierten Listen erzeugt werden. Der Eigenschaft display des <li>- Tags muss der Wert inline zugewiesen werden, sodass die Listeneinträge nicht auf der jeweils nächsten Zeile angezeigt werden. display: inline im <li>-tag Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

18 90 Abb Erstellen Sie horizontale Menüs mit Listen. Hier sind der HTML- und der CSS-Code, die diese Anzeige erzeugen: Beispiel 4 20 listnav_horiz.html Beispiel 4 21 listnav_horiz.css <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="de"> <head> <title>listnav_horiz - Menü als horizontale Liste</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="listnav_horiz.css" /> </head> <body> <div id="navigation"> <ul> <li><a href="#">rezepte</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">artikel</a></li> <li><a href="#">online kaufen</a></li> </ul> </div> </body> </html> #navigation { font-size: 90%; #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; #navigation li { display: inline; #navigation a:link, #navigation a:visited { padding: 0.4em 1em 0.4em 1em; color: #FFFFFF; background-color: #B51032;

19 Wie erstelle ich ein horizontales Menü mit CSS und Listen? 91 text-decoration: none; border: 1px solid #711515; #navigation a:hover { color: #FFFFFF; background-color: #711515; Erörterung Um ein horizontales Navigationsmenü zu erstellen, beginnen wir mit derselben Liste, die wir für das vertikale Menü erzeugt haben. <div id="navigation"> <ul> <li><a href="#">rezepte</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">artikel</a></li> <li><a href="#">online kaufen</a></li> </ul> </div> Beispiel 4 22 Ausschnitt aus listnav_horiz.html Für die ID navigation definieren wir eine paar grundlegende Regeln zur Formatierung der Schrift, wie wir das auch bei dem vertikalen Menü gemacht hatten. In einem CSS-Layout würde diese ID wahrscheinlich auch einige Eigenschaften zur Festlegung der Position des Menüs auf der Seite enthalten. #navigation { font-size: 90%; Beispiel 4 23 Ausschnitt aus listnav_horiz.css Bei der Formatierung des <ul>-tags entfernen wir die Aufzählungszeichen und die vorgegebene Einrückung, die der Browser automatisch für Listen anzeigt. #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; Beispiel 4 24 Ausschnitt aus listnav_horiz.css Die Eigenschaft, die unsere Liste von vertikal in horizontal umformt, wird dem <li>-tag zugewiesen. Nachdem die Eigenschaft display den Wert inline erhalten hat, sieht unsere Liste so aus, wie in der Abbildung 4 14 gezeigt wird. Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

20 92 Abb Die Liste wird horizontal dargestellt. Beispiel 4 25 Ausschnitt aus listnav_horiz.css #navigation li { display: inline; Nun müssen wir nur noch entsprechende Regeln für die Links in unserem Menü definieren. Beispiel 4 26 Ausschnitt aus listnav_horiz.css #navigation a:link, #navigation a:visited { padding: 0.4em 1em 0.4em 1em; color: #FFFFFF; background-color: #B51032; text-decoration: none; border: 1px solid #711515; #navigation a:hover { color: #FFFFFF; background-color: #711515; Wenn Sie um jeden Link einen Rahmen zeichnen, wie ich das hier getan habe, vergessen Sie nicht, einen größeren Zwischenraum zwischen dem Text und dem Rand des umgebenden Elements zu definieren. Sie müssen mit den Eigenschaften padding-left und paddingright links und rechts einen größeren Abstand einfügen. Um den Abstand zwischen den Listeneinträgen zu vergrößern, benutzen Sie die Eigenschaften margin-left und margin-right für die Links. Problem 39 Anklickbare Buttons ohne JavaScript Wie erzeuge ich mit CSS ein Menü im Button-Stil? Navigationsmenüs, die so aussehen, als wären sie mit anklickbaren Buttons erzeugt worden, findet man auf vielen Webseiten. Diese Menüs werden oft mit Bildern realisiert, deren Kanten abgeschrägt sind, sodass sie aussehen wie dreidimensionale Buttons. Oft wird Java- Script zum Bildwechsel benutzt, das einen Button als»gedrückt«anzeigt, wenn man ihn mit der Maus überfährt oder wenn er angeklickt wird. Ist es möglich, mit CSS solche Navigationssysteme im Button-Stil zu erstellen? Absolut!

21 Wie erzeuge ich mit CSS ein Menü im Button-Stil? 93 Lösung Einen Button-Effekt, wie er in Abbildung 4 15 dargestellt ist, zu erzeugen, ist mit CSS möglich, und zwar ohne viel Aufwand. Dieser Effekt hängt davon ab, wie Sie die CSS-Eigenschaften für die Ränder definieren. Abb Menüs im Button-Stil mit CSS Hier kommt der Code, den Sie dafür brauchen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="de"> <head> <title>listnav_button - Navigationsbuttons</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="listnav_button.css" /> </head> <body id="contact"> <div id="navigation"> <ul> <li><a href="#">rezepte</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">artikel</a></li> <li><a href="#">online kaufen</a></li> </ul> </div> </body> </html> Beispiel 4 27 listnav_button.html #navigation { font-size: 90%; #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; Beispiel 4 28 listnav_button.css Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

22 94 #navigation li { display: inline; #navigation a:link, #navigation a:visited { margin-right: 0.2em; padding: 0.2em 0.6em 0.2em 0.6em; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #717171; border-right: 1px solid #717171; #navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; Erörterung Um diesen Effekt zu erzielen, benutzen wir das horizontale Menü aus dem vorherigen Beispiel. Um aber die Schaltflächen wie Buttons aussehen zu lassen, verwenden wir für die oberen und linken Ränder der Schaltfläche eine andere Farbe wie für die unteren und rechten Ränder. Wenn wir die oberen und linken Ränder in einer helleren Farbe darstellen als die rechten und unteren Ränder, entsteht der Eindruck, als wäre die Schaltfläche leicht erhöht. Beispiel 4 29 Ausschnitt aus listnav_button.css #navigation a:link, #navigation a:visited { margin-right: 0.2em; padding: 0.2em 0.6em 0.2em 0.6em; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #717171; border-right: 1px solid #717171; Um den Effekt eines gedrückten Buttons zu erzielen (wenn die Maus darüberfährt), tauschen wir die Randfarben aus.

23 Wie erzeuge ich mit CSS ein Menü mit Karteireitern? 95 #navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; Beispiel 4 30 Ausschnitt aus listnav_button.css Damit die Buttons zum Design Ihrer Seite passen, können Sie mit breiteren Rändern oder anderen Hintergrundfarben experimentieren. Wie erzeuge ich mit CSS ein Menü mit Karteireitern? Navigationssysteme, die oben quer über einer Seite angeordnet sind und wie Karteireiter aussehen, werden zunehmend beliebter. Bei vielen Seiten werden solche Effekte mit Bildern erzeugt. Allerdings bringt diese Vorgehensweise die Nachteile von Texten in Bildern mit, auf die wir im Problem 34»Wie ersetze ich die Bilder in der Navigation durch CSS?«näher eingegangen sind. Es ist jedoch möglich, Karteireiter- Effekte mit CSS zu erzeugen, indem Hintergrundbilder und formatierter Text miteinander kombiniert werden. Problem 40 Karteireiter mit purem CSS Lösung Das Karteireiter-Menü, das in der Abbildung 4 16 gezeigt wird, kann mit einer erweiterten Version der horizontalen Liste realisiert werden. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="de"> <head> <title>tabs - Navigation mit Karteireitern</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="tabs.css" /> </head> <body id="recipes"> <div id="header"> <ul> <li class="recipes"><a href="#">rezepte</a></li> <li class="contact"><a href="#">kontakt</a></li> <li class="articles"><a href="#">artikel</a></li> <li class="buy"><a href="#">online kaufen</a></li> </ul> </div> <div id="content"> Beispiel 4 31 tabs.html Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

24 96 <h1>rezepte</h1> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis tellus sit amet diam consectetuer scelerisque. Nulla facilisi. Praesent sit amet justo. Sed mattis arcu sed nisl. Vestibulum ante urna, gravida rhoncus, porta vel, sodales id, nisl. Vestibulum lectus velit, dignissim quis, molestie vel, iaculis quis, tellus.</p> <p>cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nulla nunc, interdum nec, interdum non, hendrerit in, enim. Donec eget risus. In eget neque vel nunc posuere iaculis. In adipiscing justo in enim. Donec commodo, dui ac pharetra interdum, libero wisi tincidunt arcu, sed ornare magna velit vel elit. Sed nec risus a massa imperdiet euismod. Nunc hendrerit. Fusce sit amet eros. Etiam vitae nulla at lectus fermentum rhoncus. </p> </div> </body> </html> Abb Ein CSS-Menü mit Karteireitern Dieses Menü wurde mit dem oben angegebenen HTML-Code und dem folgenden Stylesheet erzeugt: Beispiel 4 32 tabs.css body { font:.8em/1.8em Verdana, Arial, sans-serif; background-color: #FFFFFF; color: #000000; margin: 0 10% 0 10%;

25 Wie erzeuge ich mit CSS ein Menü mit Karteireitern? 97 #header { float: left; width: 100%; border-bottom: 1px solid #8DA5FF; margin-bottom: 2em; #header ul { margin: 0; padding: 2em 0 0 0; list-style: none; #header li { float: left; background-image: url("images/tab_left.gif"); background-repeat: no-repeat; margin: 0 1px 0 0; padding: px; #header a { float: left; display: block; background-image: url("images/tab_right.gif"); background-repeat: no-repeat; background-position: right top; padding: 0.2em 10px 0.2em 0; text-decoration: none; font-weight: bold; color: #333366; #recipes #header li.recipes, #contact #header li.contact, #articles #header li.articles, #buy #header li.buy { background-image: url("images/tab_active_left.gif"); #recipes #header li.recipes a, #contact #header li.contact a, #articles #header li.articles a, #buy #header li.buy a { background-image: url("images/tab_active_right.gif"); background-color: transparent; color:#ffffff; Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

26 98 Erörterung Diese hier gezeigte Vorgehensweise für eine Navigation mit Karteireitern ist eine einfache Version der Methode von Douglas Bowman, die unter dem Namen Sliding Doors of CSS 1 bekannt ist. Es ist eine bewährte und getestete Technik für Schnittstellen mit Karteireitern. Die Struktur, die diesem Navigationsmenü zugrunde liegt, ist dieselbe Art einfacher, ungeordneter Listen, mit denen wir schon im ganzen Kapitel arbeiten, außer dass jeder Listeneintrag ein class-attribut besitzt, das den Link darin beschreibt. Zudem haben wir die gesamte Liste in ein <div>-element mit der ID header eingeschlossen. Diese Technik erhielt ihren Namen von den beiden Bildern, die zur Umsetzung benötigt werden. Die Bilder überlappen sich und passen sich der Beschriftung an, indem sie zur Seite gleiten, wenn der Text länger ist. Sie brauchen für diesen Effekt vier Bilder: Zwei für die normale Farbe des Reiters und zwei für die Farbe des ausgewählten Reiters. Abbildung 4 17 zeigt die Bilder, die ich verwendet habe. Wie Sie sehen, sind sie weitaus breiter und höher als normalerweise für einen Karteireiter notwendig ist. Das gibt uns aber jede Menge Platzreserven, sodass der Reiter»wachsen«kann, falls der Benutzer die Schrift in seinem Browser vergrößert. Abb Die Bilddateien, die für diesen Effekt gebraucht werden 1.

27 Wie erzeuge ich mit CSS ein Menü mit Karteireitern? 99 Das ist die zugrunde liegende Liste der Menüeinträge: <div id="header"> <ul> <li class="recipes"><a href="#">rezepte</a></li> <li class="contact"><a href="#">kontakt</a></li> <li class="articles"><a href="#">artikel</a></li> <li class="buy"><a href="#">online kaufen</a></li> </ul> </div> Beispiel 4 33 Ausschnitt aus tabs.html Im ersten Schritt formatieren wir den <div>-container, der die Navigation umschließt. Wir fügen unserem header eine einfache untere Randlinie hinzu, hier nur zur Übung, denn in einer wirklichen Anwendung würde dieser Container zusätzlich zu unseren Karteireitern wahrscheinlich noch andere Elemente enthalten (etwa ein Logo oder ein Suchformular): #header { float: left; width: 100%; border-bottom: 1px solid #8DA5FF; margin-bottom: 2em; Beispiel 4 34 Ausschnitt aus tabs.css Wie Sie wahrscheinlich schon gesehen haben, lassen wir unseren header nach links schweben. Ebenso die individuellen Listeneinträge. Wenn man den Container, der die Einträge enthält, nach links schiebt, ist sichergestellt, dass die Einträge selber nach dem Verschieben immer noch darin enthalten sind und die Randlinie darunter angezeigt wird. Als Nächstes erstellen wir eine Stilregel für das <ul>-element innerhalb von header: #header ul { margin: 0; padding: 2em 0 0 0; list-style: none; Beispiel 4 35 Ausschnitt aus tabs.css Mit dieser Regel entfernen wir die Aufzählungszeichen und die Innenund Außenabstände von der Liste. Das <ul>-element bekommt einen oberen Innenabstand von 2em. Was wir bis hierher erreicht haben, können Sie in der Abbildung 4 18 sehen: Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

28 100 Abb Das Menü, nachdem das <ul>-tag formatiert wurde. Nun müssen die Listeneinträge gestaltet werden: Beispiel 4 36 Ausschnitt aus tabs.css #header li { float: left; background-image: url("images/tab_left.gif"); background-repeat: no-repeat; margin: 0 1px 0 0; padding: px; In dieser Regel verwenden wir die Eigenschaft float, um alle Listeneinträge oben in einer Zeile darzustellen und trotzdem ihren Status als Blockelemente beizubehalten. Dann fügen wir das erste»sliding door«-bild, das schmale linke Ende des Karteireiters, als Hintergrundbild hinzu. Ein schmaler rechter Außenrand des <li>-elements mit 1 Pixel Breite erzeugt eine kleine Lücke zwischen den Reitern. In der Abbildung 4 19 sehen Sie die linken Hintergrundbilder der Karteireiter.

29 Wie erzeuge ich mit CSS ein Menü mit Karteireitern? 101 Abb Die Karteireiter mit den neuen Stilregeln Als Nächstes formatieren wir die Links und vervollständigen das Aussehen der Karteireiter im nicht ausgewählten Zustand. #header a { float: left; display: block; background-image: url("images/tab_right.gif"); background-repeat: no-repeat; background-position: right top; padding: 0.2em 10px 0.2em 0; text-decoration: none; font-weight: bold; color: #333366; Beispiel 4 37 Ausschnitt aus tabs.css Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

30 102 Das Ergebnis unserer Bemühungen können Sie in der Abbildung 4 20 bewundern. Abb Das Design der Navigationslinks Wenn Sie den Schriftgrad im Browser vergrößern, werden Sie sehen, dass die Karteireiter artig mitwachsen. Tatsächlich wachsen sie mit, ohne sich zu überlappen und ohne dass der Text aus den Reitern hinausläuft. Der Grund dafür ist, dass unsere Hintergrundbilder groß genug sind, um mitwachsen zu können. Um unser Karteireiter-Menü fertigzustellen, müssen wir noch den Reiter, der mit der angezeigten Seite korrespondiert, hervorheben. Sie erinnern sich, dass jedem Listeneintrag eine Klasse mit einem eindeutigen Klassennamen zugewiesen wurde. Wenn wir für das <body>-tag der entsprechenden Seite eine ID vergeben, deren Wert dem der Klasse des Reiters entspricht, den wir auf dieser Seite hervorheben wollen, erledigt CSS den Rest: Beispiel 4 38 Ausschnitt aus tabs.html <body id="recipes"> Obwohl das kompliziert aussieht, ist der CSS-Code, der den passenden Reiter zur ID des <body>-tags gestaltet, relativ unkompliziert. Die verwendeten Bilder sind exakte Kopien der linken und rechten Hintergrundbilder, mit denen die restlichen Reiter unterlegt sind, sie haben lediglich eine andere Farbe, wodurch der ausgewählte Tab hervorgehoben wird.

31 Wie erzeuge ich mit CSS ein Menü mit Karteireitern? 103 Das ist der CSS-Code: #recipes #header li.recipes, #contact #header li.contact, #articles #header li.articles, #buy #header li.buy { background-image: url("images/tab_active_left.gif"); #recipes #header li.recipes a, #contact #header li.contact a, #articles #header li.articles a, #buy #header li.buy a { background-image: url("images/tab_active_right.gif"); background-color: transparent; color: #FFFFFF; Beispiel 4 39 Ausschnitt aus tabs.css Mit diesem Code sorgt die ID recipes im <body>-tag dafür, dass der Rezepte-Reiter hervorgehoben wird, die ID contact hebt den Reiter für Kontakt hervor und so fort. Die Ergebnisse sind in der Abbildung 4 21 dargestellt. Abb Wenn die ID contact dem <body>-tag hinzugefügt wird, ist der entsprechende Reiter hervorgehoben. Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

32 104 Nützliche Techniken Eine ID für das <body>-tag zu definieren, kann eine sehr nützliche Technik sein. Beispielsweise, wenn Sie verschiedene Farbschemata für verschiedene Bereiche Ihrer Website verwenden, um dem Benutzer die Orientierung zu erleichtern. Sie können einfach den Namen des Bereichs als ID dem <body>-tag hinzufügen und dann innerhalb des Stylesheets aufgreifen, wie wir das im letzten Beispiel gezeigt haben. Problem 41 Wie ändere ich den Typ des Cursors? Wenn die Maus über einen Link geführt wird, ist es üblich, dass der Browser den Cursor als Hand darstellt, egal in welchem Bereich der Seite man sich befindet. Gelegentlich wollen Sie vielleicht das Aussehen des Cursors ändern, damit er sich beispielsweise einer bestimmten Benutzerschnittstelle anpasst. Lösung Mit der CSS-Eigenschaft cursor kann das Aussehen des Cursors verändert werden. Die Tabelle 4 1 listet die Werte für die Eigenschaft cursor auf, die in der CSS2-Spezifikation festgelegt sind, wie sie im Internet Explorer 6 dargestellt werden. In der Abbildung 4 22 sehen Sie diese Eigenschaft in Aktion. Abb Mit dem Wert wait zeigen Sie eine Sanduhr als Cursor an.

33 Wie ändere ich den Typ des Cursors? 105 Cursor-Wert auto crosshair Aussehen (im IE6) n/a Tab. 4 1 CSS2-Standard-Cursor default e-resize help move n-resize ne-resize nw-resize pointer s-resize se-resize sw-resize text url(url) w-resize n/a wait Erörterung Die Eigenschaft cursor kann eine ganze Menge von Werten annehmen, mit denen Cursor erzeugt werden können, wie sie in grafischen Benutzerschnittstellen üblich sind. Die Änderung des Cursors kann hilfreich sein, den Besuchern in einer Webanwendung mit einer benutzerfreundlichen Schnittstelle Rückmeldungen zu geben. Beispielsweise können Sie den Cursor als Fragezeichen darstellen, um auf Hilfetexte aufmerksam zu machen. Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

34 106 Die Änderung des Cursors kann Benutzer verwirren Sie sollten sorgfältigen Gebrauch von dieser Möglichkeit machen und daran denken, dass Benutzer im Allgemeinen an das normale Verhalten des Browsers gewöhnt sind, bei dem der Cursor zum Beispiel beim Überfahren eines Links als Hand dargestellt wird. In der Tabelle 4 1 wurden die verschiedenen Eigenschaften des CSS- Standards aufgeführt, die von den meisten modernen Browsern, einschließlich Internet Explorer 6 und größer, unterstützt werden. In der Tabelle 4 2 sind die zusätzlichen Werte dargestellt, die nur vom Internet Explorer (wenngleich jede neue Version von Firefox mehr dieser Extrawerte implementiert) unterstützt werden. Tab. 4 2 Cursor, die nur vom Internet Explorer unterstützt werden Cursor-Wert all-scroll col-resize Aussehen (im IE6) hand no-drop not-allowed progress row-resize vertical-text Problem 42 Wie erzeuge ich Rollover-Effekte ohne JavaScript? CSS-Menüs bieten zwar einige wirklich interessante Möglichkeiten, aber es gibt immer noch Fälle, in denen man auf Bilder angewiesen ist. Ist es möglich, die Vorteile einer textbasierten Navigation zu nutzen und trotzdem Bilder zu verwenden? Lösung Man kann Bilder und CSS kombinieren und daraus Rollover-Effekte erzeugen, die kein JavaScript benötigen. Diese Lösung basiert auf einer

35 Wie erzeuge ich Rollover-Effekte ohne JavaScript? 107 Technik, die auf der Seite WellStyled.com (wellstyled.com/css-nopreload-rollovers.html) beschrieben wird. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="de"> <head> <title>images - Rollover-Effekte ohne JavaScript</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="images.css" /> </head> <body> <ul id="nav"> <li><a href="#">rezepte</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">artikel</a></li> <li><a href="#">online kaufen</a></li> </ul> </body> </html> ul#nav { list-style-type: none; padding: 0; margin: 0; #nav a:link, #nav a:visited { display: block; width: 150px; padding: 10px 0 16px 32px; font: bold 80% Arial, Helvetica, sans-serif; color: #FF9900; background: url("peppers.gif") top left no-repeat; text-decoration: none; * html #nav a { width: 100%; #nav a:hover { background-position: 0-69px; color: #B51032; #nav a:active { background-position: 0-138px; color: #006E01; Beispiel 4 40 images.html Beispiel 4 41 Ausschnitt aus images.css Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

36 108 Das Ergebnis sehen Sie in Abbildung Weil dieser Effekt von den Farben abhängt, sollten Sie dieses Beispiel selbst ausprobieren. Vergessen Sie nicht, einen oder zwei Links anzuklicken. Abb Dieses Menü nutzt Bilder vorteilhaft aus (Farben durch Grauwerte ersetzt). Erörterung In dieser Lösung wird gezeigt, wie man Bilder in einem Menü verwenden kann, ohne dass Mengen von einzelnen Bilddateien umsortiert oder vorab geladen werden müssen. Das Navigationssystem hat drei Status. Diese drei Status sind nicht in drei einzelne Bilddateien umgesetzt, sondern es wird ein einziges, großes Bild verwendet, das alle drei Bilder enthält, wie Sie in Abbildung 4 24 sehen können. Abb Das Bild enthält Paprikas für alle drei Status. Die Navigation ist als einfache Liste realisiert. Beispiel 4 42 Ausschnitt aus images.html <ul id="nav"> <li><a href="#">rezepte</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">artikel</a></li> <li><a href="#">online kaufen</a></li> </ul>

37 Wie erzeuge ich Rollover-Effekte ohne JavaScript? 109 Im CSS-Code zeigt die Regel für die Links das Hintergrundbild an. Weil dieses Hintergrundbild weitaus größer ist als der Bereich, der für dieses Element gebraucht wird, sehen wir zuerst nur den ersten, gelben Paprika: #nav a:link, #nav a:visited { display: block; width: 150px; padding: 10px 0 16px 32px; font: bold 80% Arial, Helvetica, sans-serif; color: #FF9900; background: url("peppers.gif") top left no-repeat; text-decoration: none; Beispiel 4 43 Ausschnitt aus images.css Der Status :hover verschiebt das Hintergrundbild einfach um eine bestimmte Anzahl von Pixeln nach oben, genau so viel, dass der rote Paprika zum Vorschein kommt. Ich musste das Bild um 69 Pixel verschieben, aber diese Distanz hängt von der Größe des Hintergrundbildes ab. Diese Distanz können Sie mathematisch berechnen, Sie können es aber auch so machen wie ich, indem Sie die Distanz so lange um einige Pixel vergrößern oder verkleinern, bis das Bild beim Darüberfahren mit der Maus an der exakten Position angezeigt wird. #nav a:hover { background-position: 0-69px; color: #B51032; Beispiel 4 44 Ausschnitt aus images.css Der Status :active verschiebt das Bild wieder, diesmal, um den grünen Paprika anzuzeigen, wenn der Link angeklickt wird. #nav a:active { background-position: 0-138px; color: #006E01; Beispiel 4 45 Ausschnitt aus images.css Das ist alles, was man braucht! Dieser Effekt kann allerdings daneben gehen, wenn man die Schrift vergrößert, sodass dann die Ränder der verborgenen Bilder erscheinen können. Man kann dieses Problem zu einem gewissen Grad umgehen, wenn man genug Raum zwischen den einzelnen Bildern lässt, aber man muss sich dieses Problems bewusst sein. Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

38 110 Flackernde Bilder im Internet Explorer Bei dieser Technik kann es im Internet Explorer passieren, dass die Navigation flackert. In meinen Tests schien es nur dann zum Problem zu werden, wenn die verwendeten Bilder größer waren als unsere hier. Falls Ihre Navigation flackert, gibt es jedoch dagegen eine gut dokumentierte Methode a. a. Problem 43 Kann ich ausklappbare Menüs nur mit CSS erstellen? Wir haben bereits gelernt, wie man Rollover-Effekte ohne Bilder und JavaScript mit CSS erzielen kann. Gilt das auch für ausklappbare Menüs? Lösung Die Antwort heißt ja..., aber nicht für den Internet Explorer 6! Trotzdem sehen Sie diese interessante Technik in der Abbildung 4 25, und mit der Verbreitung des Internet Explorer 7 wird sie in der Zukunft besser nutzbar. Abb Ein ausklappbares Menü wurde nur mit CSS gestaltet. Hier folgt der HTML-Code für dieses Beispiel: Beispiel 4 46 menus.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="de"> <head> <title>menus - Aufklappbare Menüs mit CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="menus.css" /> </head> <body> <ul id="nav"> <li><a href="#">vorspeisen</a>

39 Kann ich ausklappbare Menüs nur mit CSS erstellen? 111 <ul> <li><a href="">fisch</a></li> <li><a href="">früchte</a></li> <li><a href="">suppen</a></li> </ul> </li> <li><a href="#">hauptgerichte</a> <ul> <li><a href="">fleisch</a></li> <li><a href="">fisch</a></li> <li><a href="">vegetarisches</a></li> </ul> </li> <li><a href="#">desserts</a> <ul> <li><a href="">früchte</a></li> <li><a href="">pudding</a></li> <li><a href="">eis</a></li> </ul> </li> </ul> </body> </html> Und das sind die Stilregeln, die diesen Effekt erzeugen: body { font: 1em verdana, arial, sans-serif; background-color: #FFFFFF; color: #000000; margin: 1em 0 0 1em; #nav, #nav ul { padding: 0; margin: 0; list-style: none; #nav li { float: left; position: relative; width: 10em; border: 1px solid #B0C4DE; background-color: #E7EDF5; color: #2D486C; font-size: 80%; margin-right: 1em; Beispiel 4 47 menus.css Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

40 112 #nav a:link, #nav a:visited { display: block; text-decoration: none; padding-left: 1em; color: #2D486C; * html #nav a { width: 100%; #nav ul { display: none; position: absolute; padding: 0; #nav ul li { float: none; border: 0 none transparent; border-bottom: 1px solid #E7EDF5; border-top:.5em solid #FFF; background-color: #F1F5F9; font-size: 100%; margin-bottom: -1px; margin-top: 1px; padding: 0; #nav li:hover ul { display: block; Erörterung Dieser attraktive und einfach zu realisierende Effekt wird vom Internet Explorer 6 nicht unterstützt, sondern nur von einigen neueren Browsern. Mit dieser Lösung können Sie ein ausklappbares Menü ohne JavaScript erstellen. Diese Technik basiert auf den»suckerfish«- Menüs, die im Detail auf der Seite A List Apart 2 beschrieben sind. Das Menü selber wurde aus einfachen ungeordneten Listen erstellt. Der obersten Menüebene entspricht eine Hauptliste und alle untergeordneten Menüeinträge sind darin in verschachtelten Listen untergebracht. 2.

41 Kann ich ausklappbare Menüs nur mit CSS erstellen? 113 <ul id="nav"> <li><a href="#">vorspeisen</a> <ul> <li><a href="">fisch</a></li> <li><a href="">früchte</a></li> <li><a href="">suppen</a></li> </ul> </li> Beispiel 4 48 Ausschnitt aus menus.html Wie Sie in Abbildung 4 26 sehen, werden diese Listen ohne die Formatierung durch CSS in den Browsern nach ihrer ursprünglichen, logischen Struktur geordnet als Listen mit Unterlisten angezeigt, die leicht zu verstehen sind. Abb Die Anzeige logisch strukturierter Listen in Browsern, die kein CSS unterstützen. Wir beginnen mit der Formatierung der Hauptliste, indem wir die Aufzählungszeichen entfernen und die Listeneinträge mit float nach links verschieben, sodass sie sich horizontal stauen. Die Listeneinträge positionieren wir relativ, sodass wir die ausklappbaren Menüs später darin positionieren können. #nav, #nav ul { list-style: none; #nav li { float: left; position: relative; width: 10em; margin-right: 1em; Beispiel 4 49 Ausschnitt aus menus.css Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN

42 114 Die Links innerhalb des Menüs zeigen wir als Blöcke an, sodass die Menüeinträge die rechteckigen Flächen ausfüllen, die durch einen Menüeintrag definiert sind. Der Internet Explorer 6 (und früher) kann dies alles nicht interpretieren, aber wenn man die Breite eines Links auf 100% setzt, wird wenigstens die anklickbare Fläche so vergrößert, dass sie den umgebenden Block ausfüllt. Beispiel 4 50 Ausschnitt aus menus.css #nav a:link, #nav a:visited { display: block; * html #nav a { width: 100%; Als Nächstes sorgen wir dafür, dass unsere eingeschachtelten Listen, die zu ausklappbaren Menüs werden, standardmäßig verborgen sind (display: none). Allerdings definieren wir für sie eine abolute Position, wenn sie denn sichtbar sind, sodass sie keinen Einfluss auf den normalen Textfluss des restlichen Dokuments haben. Beispiel 4 51 Ausschnitt aus menus.css #nav ul { display: none; position: absolute; Um die Listeneinträge im ausklappbaren Teil des Menüs vor einer horizontalen Verschiebung zu bewahren, so wie die Hauptmenüeinträge, müssen wir ihre Eigenschaft float auf den Wert none setzen: Beispiel 4 52 Ausschnitt aus menus.css #nav ul li { float: none; Zum Schluss benutzen wir die Pseudoklasse :hover, um das Ausklappmenü innerhalb jedes Hauptmenüeintrages anzuzeigen, wenn die Maus darüberfährt. Beispiel 4 53 Ausschnitt aus menus.css #nav li:hover ul { display: block;

43 Kann ich ausklappbare Menüs nur mit CSS erstellen? 115 Wie das Menü mit diesen CSS-Regeln angezeigt wird, sehen Sie in Abbildung Abb So sieht das Menü mit einigen grundlegenden CSS-Regeln aus. Zunächst setzt dieser Code die Eigenschaft display für die untergeordneten Listen auf den Wert none. Wenn der Benutzer mit der Maus über einen Hauptmenüeintrag fährt, wird display für diese untergeordnete Liste auf den Wert block gesetzt und das Untermenü wird angezeigt. Weil die Pseudoklasse :hover im Internet Explorer nur für Links unterstützt wird und sonst für keine Elemente, kann dieses Menü dort auch nicht dargestellt werden. Die restlichen CSS-Regeln definieren nur noch visuelle Effekte, damit das Menü ansprechend aussieht. Wenn man zwischen den Blöcken sitzt Wenn sich ein Ausklappmenü öffnet, muss der Benutzer mit der Maus herunterfahren, um einen Menüeintrag auszuwählen. In dem Moment, in dem die Maus bei dieser Bewegung das Element, welches das Menü aufklappt, verlässt, schließt sich das Menü augenblicklich, da die Pseudoklasse :hover nicht mehr gilt. Wenn Sie sich den CSS-Code für diese Seite anschauen, sehen Sie, dass die eingebettete Liste absolut positioniert ist, um über dem Seiteninhalt angezeigt zu werden, ohne ihn zu beeinflussen. Wenn man nun einfach einen kleinen Innenabstand oben in dieser Liste einfügt, erzeugen wir einen kleinen Freiraum zwischen den Hauptmenüeinträgen und dem Ausklappmenü. Theoretisch sollte es möglich sein, einen kleinen Abstand zwischen Hauptmenüeinträgen und Ausklappmenüs einzufügen, indem für die Listen oben ein Außenabstand definiert wird. Im Internet Explorer 7 verschwinden diese Ausklappmenüs jedoch, wenn der Cursor auf den Abstand trifft und dadurch wird das Menü unbenutzbar. Deshalb habe ich dem Menü oben einen weißen Rand hinzugefügt. Rachel Andrew, Der CSS-Problemlöser, dpunkt.verlag, ISBN