Struktur durch CSS

Eine gut durchdachte Navigation verknüpft mit einer optimalen internen Verlinkung bietet zahlreiche Vorteile: Ihre Besucher kommen schneller an die gewünschten Informationen, aber auch die Platzierung Ihrer Website in der Trefferliste der Suchmaschine wird dadurch positiv beeinflusst.Ein Crawler oder Spider erfasst jede Seite einer Website einzeln. Für die Gewichtung der Seite spielt es eine Rolle, auf welcher Hierarchiestufe sich diese befindet, aber auch wie viele Verlinkungen intern auf die Webseite zeigen. Damit spielt der Aufbau der Website, aber vor allem die interne Verlinkung eine zentrale Rolle.

Gießkanne oder Abkürzung?

Beim Aufbau einer Website stehen Ihnen für die Verlinkung zwei wesentliche Vorgehensweisen zur Verfügung: Entweder Sie verlinken streng hierarchisch und immer noch von der höheren in die tiefere Ebene - das Gießkannenprinzip - oder Sie erlauben auch Abkürzungen, mit denen Sie beispielsweise wichtige Artikel vorstellen.Die Website von Spiegel.de besteht aus einer Vielzahl von Rubriken, wie etwa Politik, Wirtschaft oder Sport. Auf der Startseite finden Sie die wichtigsten Artikel aus den einzelnen Bereichen. Nach dem Anklicken gelangen Sie auf den vollständigen Bericht innerhalb der entsprechenden Rubrik. An diese Stelle wären Sie auch gelangt, wenn Sie sich über die Menüstruktur entlanggehangelt hätten.

Den Überblick nicht verlieren

Wenn Sie solche Abkürzungen auf Ihrer Website erlauben und einplanen, sollten Sie Ihren Besuchern helfen, damit diese nicht den Überblick verlieren. Viele Websites bedienen sich hierfür einer entsprechenden Orientierungshilfe: Unterhalb der Navigationsleiste finden Sie in Textform die Rubrik inklusive aller Unterrubriken wieder, in der Sie sich gerade befinden.Auf diese Darstellungsform greifen viele Websites, wie Bild.de, Spiegel.de oder auch Amazon zu. Der Online-Shop nutzt an dieser Stelle sogar zwei Stellen für die Darstellung der aktuellen Position im Shop: Auf der linken Seite haben Sie die Möglichkeit, sich immer weiter entlangzuhangeln und Ihre Treffermenge einzuschränken, oberhalb der Trefferliste sehen Sie parallel dazu, an welchem Ort Sie sich befinden.

Auf der richtigen Spur

Damit auch die Suchmaschinen den Überblick nicht verlieren, sollten Sie - nachdem Ihre Website einen gewissen Umfang erreicht hat - mit der Zusammenstellung von themenbezogenen Sitemaps beginnen. Diese Orientierungskarten nutzen nicht nur die Crawler der Suchmaschinen gerne, auch interessierte Leser finden auf diese Weise thematisch ähnliche Artikel schneller wieder.Ebenfalls hilfreich ist ein Verweis am Ende des Artikels auf andere Beiträge mit ähnlichem Inhalt. Damit haben Sie zum einen eine Abkürzung geschaffen, zum andern auch die Wertigkeit des Artikels im internen Ranking erhöht.

Umsetzung der Verlinkung

In den folgenden Beispielen zeigen wir Ihnen, wie Sie CSS für den Aufbau einer optimierten Navigation innerhalb einer Website einsetzen und was Sie dabei hinsichtlich der Browser-Kompatibilität beachten sollten.Aufgrund der verschiedenen Browser am Markt ist es sehr schwierig, eine Navigation komplett auf CSS aufzubauen, da gerade ältere Modelle wie der Internet Explorer 6 teilweise Probleme mit der Interpretation der Formatierungen haben. Diesem Umstand haben sich mehrere Entwickler gewidmet und dabei kam ein Skript heraus, das seitdem unter dem Namen Suckerfish zu finden ist.

Es geht auf einen Artikel zweier Entwickler aus dem Jahre 2003 zurück, die ihn unter dem Namen "Suckerfish Dropdowns" (www.alistapart.com/articles/dropdowns/ ) publiziert haben. Das Skript ist dann im Laufe der Zeit mehrfach verbessert worden und lebt heute unter dem Namen "Son of Suckerfish" im Internet weiter. Auf Basis des Skripts und mithilfe von CSS verwandeln wir eine normale Aufzählungsliste in eine mehrstufige horizontale und vertikale Navigation.

Das HTML-Grundgerüst

Ohne weitere Formatierungen stellen die Zeilen HTML-Code nichts anderes als eine Liste mit mehreren Hierarchiestufen dar.Im Beispiel wird bewusst neben den Überschriften mehr als eine Hierarchiestufe eingefügt, da vor allem die Positionierung der dritten Ebene einige Anfangsprobleme macht. Für den späteren Zugriff auf die Elemente erhält das erste <ul>-Tag eine ID mit dem Namen navi.

Mit den ersten Formatierungen für alle Elemente und im Besonderen für die Liste werden alle Aufzählungszeichen entfernt und der Außenabstand sowie der Innenabstand auf 0 gesetzt.

Alle Listenelemente wandern wie erwartet ohne Aufzählungszeichen an den linken Rand des Browserfensters. Als Nächstes erhalten nun alle Elemente einen virtuellen Kasten außen herum mit einer Breite von 10em und der Darstellung als Block.

Im nächsten Schritt erfolgt die horizontale Anordnung der Elemente. Dazu wird für jeden einzelnen Punkt in der Liste in Ebene 1 - gekennzeichnet durch den <li>-Tag, eine neue Spalte mit der Breite von 10em eröffnet.

Noch immer sind alle Elemente sichtbar - die Einträge der zweiten Ebene machen Sie fürs Erste über die Startposition von links unsichtbar. Verschieben Sie den Startwert um -999em, ist von den Werten nichts mehr zu sehen.

Diese Formatierung hängt an allen Punkten einer Liste, denen eine neue ungeordnete Liste mit einem <ul>-Tag startend folgt. Nachdem Sie die Liste ausgeblendet haben, möchten Sie diese bei einem :hover-Ereignis natürlich wiedersehen. Dazu setzen Sie entsprechend die CSS-Formatierung der linken Startposition auf auto und es wird der Wert herangezogen, der vor der Verschiebung um 999em gültig war.