Das Problem mit der Reihenfolge der Inhalte

Das vorherige Layout mit den schwebenden Seitenleisten sieht fantastisch aus. Das Layout mit den absolut positionierten Bereichen hat demgegenüber aber einen Vorteil: Wenn Bereiche absolut positioniert werden, spielt es keine Rolle, in welcher Reihenfolge die Spalten im HTML-Quelltext erscheinen. Das mag Ihnen nicht wichtig erscheinen, aber für Benutzer, die Ihre Seite mit Browsern besuchen, die CSS nicht unterstützen, oder mit einem Screenreader, ist es sehr wohl wichtig. Bei unserem Layout mit den schwebenden Seitenleisten müssen sich diese Benutzer erst durch alle Inhalte der Seitenleisten kämpfen, bevor sie zu den Inhalten des Hauptbereichs kommen, der am Ende des HTML-Codes steht.

Wenn Sie das Stylesheet deaktivieren, wird dies ganz offensichtlich, denn dann sehen Sie die Inhalte der Seite in der Reihenfolge, in der sie im Quelltext stehen. Kommentieren Sie den Link zu Ihrem Stylesheet aus und aktualisieren Sie die Ansicht in Ihrem Browser: Sie sehen dann, wieviel »Gerümpel« vor den Hauptinhalten der Seite angezeigt wird. (Die folgende Abbildung zeigt einen Teil davon.) Stellen Sie sich einmal vor, dass auf jeder Ihrer Seiten die Inhalte der Seitenleisten zuerst angezeigt werden. Für Benutzer von Screenreadern wäre das eine ziemlich ermüdende Angelegenheit, wenn sie sich auf jeder Seite, die sie besuchen, jedesmal dieselben Inhalte anhören müssten.

So wird die Seite ohne Formatierungen angezeigt

Abbildung: So wird die Seite ohne Formatierungen angezeigt.

Dieses Problem kann man umgehen, indem man einen Link einfügt, um die Navigation zu überspringen. Wenn ein Benutzer diesen Link anklickt, kann er wiederholte oder uninteressante Teile der Seite überspringen, um an die wichtigen Informationen der Seite zu gelangen. Diese Lösung ist einfach umzusetzen: Wir verweisen einfach auf eine id, die am Anfang der Hauptinhalte der Seite steht.

Um diese Technik auszuprobieren, müssen Sie nur einen weiteren Link in die Navigationsliste der Kopfleiste einfügen:

<ul>
  <li><a href="">Contact Us</a> | </li>
  <li><a href="">About Us</a> | </li>
  <li><a href="">Privacy Policy</a> | </li>
  <li><a href="">Sitemap</a> | </li>
  <li><a href="#content">Jump to content</a></li>
</ul>

Laden Sie die Seite in Ihren Browser und klicken Sie auf den Link. Die Anzeige springt sofort ein Stückchen die Seite hinunter, sodass das div-Element #content möglichst oben im Browserfenster angezeigt wird. Sie sehen es in der nächsten Abbildung.

Mit einem Klick zu den wichtigen Informationen der Seite

Abbildung: Mit einem Klick zu den wichtigen Informationen der Seite.

Obwohl solche Links für Besucher, die keine Screenreader oder Textbrowser benutzen, nicht besonders sinnvoll sind, hat man sich verschiedene Methoden ausgedacht, diese Links zu verbergen, sodass sie nur für Screenreader und Browser, die kein CSS unterstützen, sichtbar sind. Unglücklicherweise können diese Methoden für manche Screenreader problematisch sein. Das hängt von der Art und Weise ab, wie diese CSS und JavaScript interpretieren. Deshalb wird empfohlen, diese Links sichtbar zu lassen und sie irgendwo oben in der Seite unterzubringen, um eine optimale Zugänglichkeit zu gewährleisten. Einige Seitenbetreiber, wie etwa Molly Holzschlag, haben sich Lösungen ausgedacht, um die Links partiell zu verbergen. Auf Mollys Seite, die Sie in der folgenden Abbildung sehen, bleibt der Link verborgen, solange Sie nicht mit der Maus den Bereich unmittelbar am Seitenanfang überfahren.

Der Link zu den Hauptinhalten bei molly.com

Abbildung: Der Link zu den Hauptinhalten bei molly.com.

Weitere Layoutmethoden

Es gibt noch andere Methoden zur Entwicklung mehrspaltiger Layouts mit Fußleiste, die eine sinnvollere Anordnung der Inhalte im Quelltext ermöglichen. Diese Methoden verlangen aber zumeist, dass an anderer Stelle Kompromisse geschlossen werden müssen. Das Beispiel mit richtig angeordneten Inhalten im Quelltext, die »Source Ordered Columns« auf der Internetseite Position is Everything, die Sie in der folgenden Abbildung sehen, ist eine solche alternative Methode. Der Kompromiss bei dieser Vorgehensweise besteht darin, dass die Breite aller Spalten flexibel sein muss: Sie muss in Prozenten anstatt mit festen Werten in Pixeln gesetzt werden.

Das Beispiel »Source Ordered Columns« auf der Seite »Position is Everything«

Abbildung: Das Beispiel »Source Ordered Columns« auf der Seite »Position is Everything«.

Die Seite »Position is Everything« ist eine ausgezeichnete Quelle für Demonstrationen und neue Ideen für die Entwicklung von CSS-basierten Layouts. Sie finden dort auch einen Artikel mit dem Titel »In Search of the One True Layout«, in dem ein Beispiel für ein dreispaltiges Layout mit Fußzeile vorgestellt wird, das die oben geforderten Eigenschaften erfüllt. Allerdings macht es regen Gebrauch von einigen komplexen Technologien und vielen Browser-Hacks. Während Sie weiter mit CSS arbeiten und Ihnen diese Technologie immer vertrauter wird, können diese Beispiele eine unschätzbare Hilfe zur Lösung Ihrer Probleme werden. Es macht aber genauso viel Spaß, mit den Beispielen herumzuexperimentieren, wenn man die Zeit dazu hat.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg