 Bildernavigation mit CSS umsetzen
Hier wird erklärt, wie man eine Navigation, die mit Bildern aufgebaut ist auch mit CSS umsetzen kann.
Suchmaschinen können nicht lesen, was in einem Bild steht. Deshalb sollte man Bilder auf Webseiten nur zum Design und im Content einsetzen, aber nicht, wenn man Informationen vermitteln will. Allerdings werden Bilder gerne dazu verwendet, besonders schöne Navigationen mit Farbverläufen, Schatten und Lichteffekten umzusetzen, wie z. B. hier:
Hier ist die Navi mit Links umgesetzt, in denen jeweils eine Grafik mit dem img-Tag platziert ist:
<a title="Navipunkt" href="#">
<img width="158" height="39" border="0" alt="Navipunkt" src="/button.png"/>
</a>
<a title="Navipunkt" href="#">
<img width="158" height="39" border="0" alt="Navipunkt" src="/button.png"/>
</a>
<a title="Navipunkt" href="#">
<img width="158" height="39" border="0" alt="Navipunkt" src="/button.png"/>
</a>
Was hier schon relativ gut gemacht ist, ist dass für die Links je ein title-Attribut und für die Bilder je ein alt-Attribut definiert ist. Aber optimal ist das nicht, da es z. B. keinen Linktext gibt, den die Suchmaschine auslesen könnte, denn anstatt des Textes ist nur ein Bild platziert. Umsetzung in CSSUnser Ziel soll es sein, dass eben dieser Link-Text auftaucht, aber sonst alles genauso aussieht. Das geht mit ein bisschen CSS. HTML-Datei
Zuerst beginnen wir unsere neue und bessere Navi in HTML aufzubauen:
<ul id="hauptnavi">
<li>
<a href="#">Navipunkt</a>
</li>
<li>
<a href="#">Navipunkt</a>
</li>
<li>
<a href="#">Navipunkt</a>
</li>
</ul>
Wir nehmen eine unordered List. In den li-Elementen ist jeweils der Link platziert und wie man sieht, darin wiederrum der eigentliche Linktext. Das sieht so natürlich noch nicht so aus, wie unsere Navigation mit Bildern:
Und das ist der Punkt, an dem CSS ins Spiel kommt. CSS-Datei
a { text-decoration:none; }
#hauptnavi { margin-left:0px; padding-left:0px; list-style:none; }
#hauptnavi li { background-image: url(button_bg.png); float:left; height:39px; line-height:39px; margin-right:4px; width:158px; }
#hauptnavi li a { color:#FFFFFF; display:block; font-family:Arial; font-size:18px; font-weight:bold; padding-left:22px; }
#hauptnavi li a:hover { background-image: url(button_bg.png); background-position:bottom; }
In Zeile 1 wird zuerst definiert, dass unsere Navi-Links nicht mehr unterstrichen sind. In Zeile 2 wird für das ul-Element das margin und padding auf 0px gesetzt und mit list-style:none verhindert, dass die Aufzählungspunkte angezeigt werden. In Zeile 3 wird mit background-image die Hintergrundgrafik festgelegt. Die Grafik ist einfach der bisherige Button ohne den Schriftzug: 
Mit float:left sagen wir, dass der jeweils nächste Button sich links neben dem Vorhergehenden anordnen soll. Anschließend werden die Dimensionen (height und width) des Buttons definiert, damit das li-Element nicht nur so groß ist, wie der darin enthaltene Text. line-height sorgt dafür, dass der Text vertikal zentriert wird. Der Wert von line-height muss! gleich der Höhe des li-Elements sein. margin-right von 4px sorgt für den Abstand zum Button rechts davon. Zeile 4 widmet sich den eigentlichen Links. Mit color wird die Farbe auf Weiß gesetzt. display:block sorgt dafür, dass der Link den gesamten Platz einnimmt, der ihm vom Elternelement zur Verfügung gestellt wird. Die Schriftart wird mit font-family auf Arial gesetzt und mit font-weight auf fett. das padding-left von 22px macht den Abstand des Textes nach links aus. (Kann man am bisherigen Bilder-Button ausmessen) Zeile 5 behandelt nun lediglich noch die hover-Eigenschaft des Links, also das, was passiert, wenn man mit der Maus darüber fährt. An dieser Stelle wollen wir hier noch eine kleine Fleißarbeit machen und den Hintergrund des Buttons verändern. Dazu habe ich die Hintergrundgrafik so aufgebaut, dass sie quasi aus 2 verschiedenen Buttonhintergründen besteht, aber trotzdem noch eine einzige Grafik ist: 
Wir ändern bei hover nun nicht die Hintergrundgrafik, sondern nur die background-position. Wir sagen also per CSS, dass der untere Teil der Grafik angezeigt werden soll. That's it! So schaut dass dann fertig aus. Oben das Original und unten die suchmaschinenfreundliche-und-interaktive Variante:
|
Kommentare