Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Es soll ein vierspaltiges Layout erstellt werden, dessen Spalten eine feste Breite besitzen.
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:
<div id="Kopfzeile">
[...]
</div>
<div id="linksAussen">
[...]
</div>
<div id="linksInnen">
[...]
</div>
[...]
<div id="rechtsInnen">
[...]
</div>
[...]
<div id="rechtsAussen">
[...]
</div>Dann geben Sie der Eigenschaft position für alle Spalten den Wert absolute. Mit den Eigenschaften left und top legen Sie die Positionen für die Spalten fest, wobei in diesem Fall Pixel als Einheiten benutzt werden:
#linksAussen {
position: absolute;
left: 5px;
width: 190px;
top: 44px;
background: #fff;
}
#linksInnen {
position: absolute;
left: 205px;
width: 190px;
top: 44px;
background: #fff;
text-align: justify;
border-width: 0;
}
#rechtsInnen {
position: absolute;
left: 405px;
width: 190px;
top: 44px;
background: #fff;
}
#rechtsAussen {
position: absolute;
left: 605px;
width: 190px;
top: 44px;
background: #fff;
}Diskussion
Durch die Verwendung von absoluten Längeneinheiten für die Eigenschaften left und top erhalten die Spalten feste Breiten. Diese Lösung ist genauso einfach wie die Arbeit mit nur zwei oder drei Spalten. Bedenken Sie aber, dass mehr als vier oder fünf Spalten schnell unpraktisch werden können.
Das Layout dieser Lösung eignet sich am besten für eine Kopfzeile, die nicht mehr als 44 Pixel hoch ist. Ist der enthaltene Text zu groß, kann dies möglicherweise das gesamte Layout zerstören, und die Kopfzeile wird unterhalb der Spalten dargestellt. Der Grund hierfür liegt in der absoluten Positionierung, durch die die Spalten vom normalen Dokumentenfluss ausgenommen werden.
Dieses Problem können Sie umgehen, indem Sie die Spalten ihrerseits mit einem div-Element umgeben, dem Sie den id-Wert Inhalt geben:
<div id="Kopfzeile">
[...]
</div>
<div id="Inhalt">
<div id="linksAussen">
[...]
</div>
<div id="linksInnen">
[...]
</div>
[...]
<div id="rechtsInnen">
[...]
</div>
[...]
<div id="rechtsAussen">
[...]
</div>
</div> <!-- Ende Inhalt -->Der Trick besteht jetzt darin, dass Sie in der CSS-Regel das umgebende div-Element (Inhalt) als relativ positioniert festlegen:
#Inhalt {
position: relative;
}Dieser zusätzliche Schritt berücksichtigt, dass die Höhe der Kopfzeile für das Gesamtlayout nun unerheblich ist, was auch vorteilhaft für die Skalierbarkeit ist. Aus diesem Grund kann die Deklaration top: 44px; auch bei allen Spalten entfernt werden.
Siehe auch
Das Rezept Zweispaltige Layouts mit festen Breiten und das Rezept Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats.
| << 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