Beispielrezept:

7.9 Asymmetrische Layouts

Problem

Es soll ein flexibles asymmetrisches oder organisches Layout erstellt werden, wie in Abbildung 7-18 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>

  

Abbildung 7-18 


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 Abbildung 7-19):

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

  

Abbildung 7-19 


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 2.4 und 2.5 zum Festlegen von Hintergrundbildern für eine Webseite; nähere Informationen zu Macromedia Dreamweaver finden Sie unter http://www.dreamweaver.com.

O'Reilly Home | O'Reilly Partnerbuchhandlungen | Bestellinformationen
Kontakt | Über O'Reilly | Datenschutz

© 2005, O'Reilly Verlag GmbH & Co.KG
webmaster@oreilly.de