Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Es soll ein vierspaltiges Layout erstellt werden, bei dem die Spaltenbreiten an die Breite des Browserfensters angepasst werden (siehe folgende Abbildung).

Vierspaltiges Layout mit prozentualen Breitenangaben

Abbildung: Ein vierspaltiges Layout mit prozentualen Breitenangaben.

Lösung

Zuerst umgeben Sie die Inhalte mit div-Elementen. Diese haben id-Attribute, die hier zu Demonstrationszwecken auf die Positionierung der Elemente innerhalb der Seite verweisen (siehe nächste Abbildung):

<div id="Kopfzeile">
 [...]
</div>
<div id="linksAussen">
 [...]
</div>
<div id="linksInnen">
 [...]
</div>
 [...]
<div id="rechtsInnen">
 [...]
</div>
 [...]
<div id="rechtsAussen">
 [...]
</div>

Standarddarstellung des Inhalts

Abbildung: Die Standarddarstellung des Inhalts.

Bei der Definition der CSS-Regeln verwenden wir die Eigenschaft position mit dem Wert absolute. Die Positionierung der Spalten wird mit den Eigenschaften left und top vorgenommen:

#linksAussen {
 position: absolute;
 left: 1%;
 width: 20%;
 top: 4em;
 background: #fff;
}
#linksInnen {
 position: absolute;
 left: 22%;
 width: 28%;
 top: 4em;
 background: #fff;
 text-align: justify;
 border-width: 0;
}
#rechtsInnen {
 position: absolute;
 left: 51%;
 width: 28%;
 top: 4em;
 background: #fff;
}
#rechtsAussen {
 position: absolute;
 left: 80%;
 width: 19%;
 top: 4em;
 background: #fff;
}

Diskussion

Wenn Sie der Eigenschaft position für ein bestimmtes Element den Wert absolute geben, wird dieses komplett vom Textfluss des Dokuments ausgenommen. Wird das Element jedoch mit der Eigenschaft float angeordnet, kann es von anderen Elementen umflossen werden. Hat position für ein Element den Wert absolute, wird es wie ein Geist behandelt.

Standardmäßig werden absolut positionierte Elemente in der linken oberen Ecke des am nächsten gelegenen Vorfahrenelements oder des ursprünglichen umgebenden Blocks platziert. Anders gesagt: um ein Kindelement, dessen Wert für position als absolute definiert wurde, innerhalb seines Elternelements zu positionieren, müssen Sie vorher dem Elternelement ebenfalls den Wert absolute oder relative (allerdings nicht static!) zuweisen. Enthält das Dokument weitere Elemente, so kann es leicht zu Überlappungen kommen (siehe nächste Abbildung).

Überschneidung von Bild und absolut positioniertem Text

Abbildung: Überschneidung von einem Bild und absolut positioniertem Text.

Um dieses Problem zu vermeiden, können Sie die vier CSS-Eigenschaften top, left, bottom und right verwenden, um das Element an eine beliebige Position im Dokument zu verschieben. Verwenden Sie dabei Prozentwerte, damit die Spaltenbreiten bei Änderungen des Browserfensters angepasst werden können.

Auch für die Eigenschaft left sollten Prozentwerte benutzt werden, um die Entfernung des Elements von der linken Seite des Ansichtsbereichs festzulegen. Für die Eigenschaft top benutzen Sie allerdings besser em-Einheiten, um Platz für die Überschrift zu schaffen. Soll für die Überschrift ein Bild verwendet werden, benutzen Sie anstelle von em-Einheiten besser Pixel, um genügend Platz für die Grafik zu reservieren.

Diese Methode bietet große Freiheiten bei der Platzierung von Elementen, allerdings hat die absolute Positionierung auch ihre Nachteile. Während die Anordnung der Spalten nebeneinander recht einfach durchzuführen ist, kann die Platzierung einer Fußzeile unterhalb der Spalten Schwierigkeiten bereiten, wenn Sie die genaue Höhe der Spalten nicht kennen.

Falls Sie horizontale Innenabstände und Rahmen für die div-Elemente verwenden wollen, sollten Sie den Boxmodell-Fehler des Internet Explorers für Windows bis Version 5.5 berücksichtigen und dem IE eine eigene Breite zuweisen (siehe das Rezept Besondere Werte für Internet Explorer 5.x für Windows). Am einfachsten geht dies, wenn Sie die sogenannten Conditional Comments (siehe das Rezept Conditional Comments) verwenden.

Siehe auch

  

<< zurück vor >>

 

 

 

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

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" 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.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln