Asymmetrische Layouts

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Es soll ein flexibles asymmetrisches oder organisches Layout erstellt werden, wie in der nächsten Abbildung gezeigt.

Lösung

Zuerst umgeben Sie die Inhalte mit div-Elementen und versehen die id-Attribute mit passenden Werten.

<div id="Kopfzeile">
 [...]
</div>
<div id="kleineSpalte">
 [...]
</div>
<div id="Hauptspalte">
 [...]
</div>
<div id="mittlereSpalte">
 [...]
</div>

Asymmetrische Platzierung der Inhalte

Abbildung: Asymmetrische Platzierung der Inhalte.

Im nächsten Schritt weisen Sie der Eigenschaft position für die einzelnen Spalten den Wert absolute zu. Die Platzierung der Spalten mit den Eigenschaften left und top wird hier mit Prozentwerten vorgenommen. Das gilt auch für die Positionierung des Hintergrundbildes (siehe folgende Abbildung):

body {
 margin: 5px 0 0 5px;
 background-image: url(flower5.jpg);
 background-position: 50% 35%;
 background-repeat: no-repeat;
}
#Kopfzeile {
 position: absolute;
 left: 65%;
 top: 50%;
 width: 125px;
 font-size: 0.7em;
}
#kleineSpalte {
 position: absolute;
 left: 35%;
 width: 15%;
 top: 1%;
 background: #fff;
 font-size: 0.7em;
}
#Hauptspalte {
 position: absolute;
 left: 5%;
 width: 45%;
 top: 40%;
 background: #fff;
 text-align: justify;
 border-width: 0;
 font-size: 1.1em;
}
#mittlereSpalte {
 position: absolute;
 left: 80%;
 width: 20%;
 top: 10%;
 background: #fff;
}

Seite in Standarddarstellung

Abbildung: Die Seite in der Standarddarstellung.

Diskussion

Neben traditionellen spaltenbasierten Layouts bietet CSS Webentwicklern noch einige andere Möglichkeiten, um ihre Dokumente zu gestalten. Mit den Eigenschaften position, top und left können Sie Ihre Inhalte in kleine Happen aufteilen, mit eigenen Stildefinitionen versehen und ganz nach Ihrem Geschmack anordnen.

Wird die Größe des Browserfensters geändert, wird auch das Hintergrundbild entsprechend angepasst, da Sie für dessen Position einen Prozentwert angegeben haben.

Anstatt die Werte für position, top und left von Hand zu ändern, können Sie die div-Elemente besser mit einem WYSIWYG-Programm wie Macromedia Dreamweaver einfügen.

Sollen die Spalten beim asymmetrischen oder organischen Layout feste Breiten erhalten, verwenden Sie anstelle von Prozentwerten Längeneinheiten, um die exakte Position der Inhalte und des Hintergrundbildes festzulegen.

body {
 margin: 5px 0 0 5px;
 background-image: url(flower5.jpg);
 background-position: -400px -200px;
 background-repeat: no-repeat;
}
#Kopfzeile {
 position: absolute;
 left: 500px;
 top: 200px;
 width: 125px;
 font-size: 0.7em;
}
#kleineSpalte {
 position: absolute;
 left: 200px;
 width: 125px;
 top: 10px;
 background: #fff;
 font-size: 0.7em;
}
#Hauptspalte {
 position: absolute;
 left: 50px;
 width: 375px;
 top: 175px;
 background: #fff;
 text-align: justify;
 border-width: 0;
 font-size: 1.1em;
}
#mittlereSpalte {
 position: absolute;
 left: 600px;
 width: 150px;
 top: 50px;
 background: #fff;
}

Siehe auch

Die Rezepte Nicht gekachelte Hintergrundbilder und Hintergrundbilder wiederholen zum Definieren von Hintergrundbildern für Webseiten sowie das Rezept CSS in Adobe Dreamweaver verwenden zum Erstellen von CSS mit Adobe Dreamweaver.

  

<< 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