Container
Inhaltsübersicht:
- Seitenstrukturierung durch Container
- Reihenfolge der Container
- Hinweise zur Formatierung von Containern
Seitenstrukturierung durch Container
Eine Alternative zum Frame-Aufbau
(siehe Frames)
ist das Aufteilen einer Seite in <div>-Elemente,
sog. Container.
Bildbeschreibung "Ausgabe Container 1 - Navigation vor Inhalt": Bildschirmfoto. Mit Hilfe von Containern kann das gleiche Layout abgebildet werden wie mit Frames.
Container können mehrere Elemente wie Text,
Grafiken und Tabellen in einen gemeinsamen Bereich einschließen,
über Style Sheets fest
positioniert werden und äquivalent zum
Frame-Gerüst
verschiedene Bereiche einer Webseite
repräsentieren. Das nachfolgende Beispiel
zeigt, wie zwei Container nebeneinander positioniert
werden. Container 1 hat die Klasse navigation und
erhält 20 Prozent der verfügbaren Seitenbreite. Container
2 mit der Klasse inhalt erhält links einen dem
ersten Container entsprechenden Abstand von 20 Prozent und die
restliche verbleibende Breite der Webseite von 80 Prozent.
Beispiel CSS-Datei - Container (Ausschnitt):
div.navigation {
position: absolute;
width: 20%;
}
div.inhalt {
margin-left: 20%;
position: absolute;
width: 80%;
}
Bei der Entwicklung einer Website
ist zu beachten, dass diese auch für Nutzer mit
geringer Bildschirmauflösung lesbar ist. Für ein
barrierefreies bzw. barrierearmes
Webdesign ist das
Layout der Seite deshalb
flexibel aufzubauen, so dass sich Elemente des Fließtextes
bei kleiner Fenstergröße nicht überlagern. Das kann
durch eine relative Breitenangabe für die
einzelnen Container erreicht werden, bspw.
"width:20%" für den Navigationscontainer.
Beispiel XHTML-Datei - Container mit Navigation vor Inhalt (Ausschnitt):
<body>
<!-- Container mit Navigation -->
<div class="navigation">
Alle Elemente und Inhalte des Menüs.
</div>
<!-- Container mit eigentlichem Inhalt -->
<div class="inhalt">
Der eigentliche Inhalt.
</div>
</body>
In HTML5 stehen neue Elemente zur
Verfügung, die bestehende Container mit Standard-Inhalten ablösen, z.B.
das
<nav>-Element für einen Container mit Navigationselementen (siehe
HTML5
zur Strukturierung).
Reihenfolge der Container
Die Reihenfolge der <div>-Elemente
im Quelltext ist ausschließlich in Zusammenhang mit
der Linearisierung von Bedeutung aber somit für den
Nutzer eines Text-Browser
oder Screenreader
entscheidend. Container mit für den Nutzer relevanten Inhalten
sind immer an den Anfang eines Dokumentes zu stellen, sich
wiederholende Elemente, wie bspw.
aktuelle Meldungen oder Besucherstatistiken, können in
Container eingebettet werden, die im Quelltext erst zum Ende hin
erscheinen. Ein die Hauptnavigation enthaltender Container kann
bspw. nur in der Startseite im
Quelltext an erster Stelle stehen, in den darauffolgenden
Dokumenten dann jedoch an das Ende verlegt werden.
Beispiel XHTML-Datei - Container mit Inhalt vor Navigation (Ausschnitt):
<body>
<!-- Container mit eigentlichem Inhalt -->
<div class="inhalt">
Der eigentliche Inhalt.
</div>
<!-- Container mit Navigation -->
<div class="navigation">
Alle Elemente und Inhalte des Menüs.
</div>
</body>
Durch das Positionieren der Container über CSS werden Nutzer grafischer Ausgabegeräte diese Feinheit nicht weiter bemerken. Sowohl das nachfolgende als auch das vorangegangene Bildschirmfoto der optischen Browser-Ausgabe sind identisch, da sowohl die Navigation als auch der Inhalt in einem entsprechenden Container notiert sind und diese über Style Sheets fest definiert und positioniert werden.
Bildbeschreibung "Ausgabe Container 2 - Navigation vor Inhalt": Diese und die vorangegangene Ausgabe sind identisch, da sowohl die Navigation als auch der Inhalt in einem entsprechenden Container notiert sind und diese über Style Sheets fest definiert und positioniert werden. Optisch befindet sich deshalb die Navigation weiterhin vor dem Inhalt, auch wenn in diesem Beispiel die Notation im Quellltext genau andersherum ist.
Hilfreich ist das unterschiedliche Positionieren im Quelltext jedoch für Nutzer eines Text-Browser oder Screenreader, wie die linearisierte Variante im nachfolgenden Beispiel zeigt.
Bildbeschreibung "Linearisierung Container 1 - Navigation vor Inhalt": Hier wird der Unterschied zwischen beiden Container-Varianten deutlich. Der im Quelltext zuerst notierte Bereich wird bei Linearisierung auch zuerst betrachtet. In diesem Fall zuerst die Navigation und dann der Inhalt.
Bildbeschreibung "Linearisierung Container 2 - Inhalt vor Navigation": Hier wird der Unterschied zwischen beiden Container-Varianten deutlich. Der im Quelltext zuerst notierte Bereich wird bei Linearisierung auch zuerst betrachtet. In diesem Fall zuerst der Inhalt und dann die Navigation.
Hinweise zur Formatierung von Containern
Soll eine bestimmte Container-Höhe definiert
werden, ist das CSS-Attribut
min-height zu verwenden. Dann wächst bei umfangreichen
Inhalten bzw. bei Skalierung der
Inhalte auch der Container mit. Andernfalls (bei Verwendung des
Attributes height) würden die Inhalte über die
Ränder des Containers hinausragen. Das kann bei komplexen
Formatierungs-Maßnahmen, der Verwendung mehrerer Container
mit unterschiedlichen Formatzuweisungen (Hintergrundfarben, farbige
Container-Rahmen) zu ungewollten optischen Überlappungen
führen.
Bildbeschreibung "Skalierbarkeit von Containern":
Zwei Container - einer mit ungewollten Inhalts-Überschneidungen
durch Höhenangabe über height (links) und
einer mit dynamischer Anpassung durch Höhenangabe über
min-height (rechts).
Beispiel CSS-Datei - Höhenangabe für Container (Ausschnitt):
div.rahmen {
min-height: 10em;
/* dynamische Mindesthöhe */
... weitere Angaben zu Rahmen, Schriftart,
Schriftgröße usw.
}
Weiterführende Literatur:
- Münz, Stefan und Nefzger, Wolfgang:
- HTML
& Web-Publishing Handbuch, Band 1,
Seite 174,
Franzis' Verlag GmbH, Poing, 2002,
ISBN 3772375162