EfA 2006 – Teil 4: Alles im Fluss
Findige CSS-Spezialisten werden es sicher schon herausgefunden haben: auch bei unserem neuen Layout ist alles im Fluss. Diesmal noch konsequenter als bei den Vorgängern und weitestgehend ohne zusätzliche Tricks im HTML-Markup der Seiten.
Autor: tc
Das bisherige Layout basierte auf dem Stand der Technik des Entstehungsjahres. Zwar wurden bisher schon sämtliche Elemente der Seiten im CSS per float: an ihre Stelle gerückt und dadurch ein Layout erreicht, dass sich flexibel an die unterschiedlichsten Fenster- und Schriftgrößen anpasst. Allerdings ging das bisher nicht ohne zusätzliche, eigentlich unnötige, Tags im HTML, mit denen diese float-Zustände wieder aufgehoben wurden.
Die zusätzlichen Zeilen in der Art von div style="clear:both;"></div> hielten wir damals für gerechtfertigt, zumal diese Methode vom W3C selbst empfohlen wird. Nun ist die Entwicklung aber dank der Offenheit des Netzes weiter fortgeschritten: findige Webdesigner haben Lösungen gefunden, wie man Seiten flexibel und vor allem ohne zusätzliches Markup aufbaut.
Die Theorie hinter dem float-Modell, die Probleme in der Umsetzung und die möglichen Lösungen im Detail zu erklären sprengt den Rahmen dieser Serie. Daher verweisen wir im Anhang auf Artikel, die sich mit diesem Themenkomplex beschäftigen.
Dieser neue Ansatz resultiert darin, dass sich die wesentlichen Block-Level-Elemente einer Seite allesamt in einer Art Schwebezustand zueinander befinden und dieser erst ganz am Ende der Seiten mit einem einzigen Element aufgehoben wird. In unserem Fall ist dies eine horizontale Linie <hr>, die sich unmittelbar vor der Fußzeile befindet, die sämtliche Floats aufhebt, und die bei flexibler Auslegung der Standards sogar noch semantisch zu rechtfertigen ist.
Alles ist relativ
Die wesentlichen Bemaßungen sind nach wie vor in relativen Einheiten angegeben. Dabei wurde darauf geachtet, dass sämtliche horizontalen Abstände und Positionen in Prozentwerten angegeben sind, um relativ zur Breite des Browserfensters zu sein. Sämtliche vertikalen Angaben hingegen sind in Relation zur Schriftgröße gesetzt – bei einer abweichenden Schriftgröße positionieren sich die verschiedenen Blöcke der Seiten also immer relativ zueinander und das Layout bleibt intakt.
Alles ist sortiert
In der vorangegangenen Folge hatten wir den Aufbau des Kopfbereiches besprochen, nun geht es um den eigentlichen Inhalt der Seite. Die einzelnen Bereiche befinden sich jeweils in DIV-Tags mit eindeutiger Kennzeichnung per id="navi", id="blog", id="artikel" etc., damit diese als Blöcke per float: zueinander positioniert werden können.
Die Inhalte der jeweiligen Blöcke sind allesamt in eine Überschriftenstruktur eingebettet, die mit einer <h1> beginnt und dann weitere Überschriften <h2>, <h3> etc. oder je nach Funktion andere Elemente wie ul>, <ol>, <dl>, <p> etc. beinhaltet, zum Beispiel den Bereich mit den aktuellen Meldungen aus dem Weblog. Dieser beginnt mit einer Überschrift <h1>, die den Bereich eröffnet. Darauf folgt das Datum der Veröffentlichung als <h2>, da es täglich mehrere Meldungen geben kann und diese sich somit unterhalb ihres Veröffentlichungsdatums einsortieren. Das Datum selbst ist verlinkt und ein Klick darauf öffnet die Tagesansicht.
Die Meldungen selbst bekommen folgerichtig eine <h3>, wobei die Überschrift wie bei Weblogs üblich ebenfalls mit einem Link (sog. Permalink) ausgestattet ist, der eine Einzelansicht öffnet und damit die Meldung nach guter alter Hypertext-Tradition referenzierbar macht. In einem Screenreader ist diese Hierarchie damit ebenfalls bequem zu benutzen (in JAWS drückt man dazu kurzerhand mehrfach die Taste h).
Alles ist erreichbar
Streng genommen würden die ID’s der umgebenden DIV-Tags als Linkziel zum Beispiel für interne Skip Links ausreichen. Leider ist die Unterstützung für dies Form der Navigation selbst in aktuellen Screenreadern noch so unzureichend, dass zusätzliche Tags nach der Art von a id="inhalt" name="inhalt"></a> notwendig sind, um die Ziele der Skip Links auch in alternativen Ausgabeformen erreichbar zu machen.
Den Abschluss der Seite bilden der besprochene horizontale Trenner <hr> und die Fußzeile. Da letztere Informationen zum Anbieter der Seite enthält findet sie folgerichtig in dem dafür im HTML-Standard vorgesehenen address-Tag statt.
Anhang: Weiterführende Literatur zu Float
- Dirk Jesse:
»YAML – Ein flexibles CSS-Spaltenlayout auf Basis von float-Umgebungen« - Onno K. Gent:
»Einschließen von Floats ohne zusätzliches Markup« - Big John, Holly Bergevin:
»Flowing and Positioning: Two Page Models«. - Big John, Holly Bergevin:
»Float: The Theory« - Deutsche Übersetzung von Andreas Kalt und Jens Grochtdreis:
»Float: Die Theorie«. - Alex Robinson:
»In search of the One True Layout« - Jonathan Snook:
»Getting your DIVs to behave like TABLEs« - Eric Meyer:
»Containing Floats«. - Roger Johansson:
»Clearing floated images in body text« - Zoe Gillenwater :
»Creating Liquid Faux Columns« - Alex Walker:
»Simple Clearing of Floats« - Anne van Kesteren:
»Super simple clearing floats« - Dave Shea:
»Clearance« - Claire Campbell:
»Flexi-Floats ~ A Multi Column CSS Layout« - Zoe Gillenwater:
»Curing Float Drops and Wraps«
In der nächsten Folge geht es dann um die Folgeseiten…
Diskutieren Sie mit!
Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.