Hundeleine
Die Website hundeleine.com beschäftigt sich mit dem Sinn und Zweck einer Hundeleine und stellt dem Besucher verschiedene Arten von Hundeleinen ausführlich vor.
Technische Basis von hundeleine.com ist ein Wordpress-Blog mit einem einfachen, farblich gut zur Thematik der Seite passenden Theme.
Der Inhaltsbereich besitzt eine feste Breite und ist mittig ausgerichtet. Ganz der Aufteilung vieler moderner Blogs entsprechend, befindet sich der Text in einer breiten Spalte auf der linken Seite, während die Navigation und eine Spalte für Anzeigen auf der rechten Seite nebeneinander angeordnet sind. Die beiden rechten Spalten besitzen jeweils eine feste Breite, die linke Spalte nicht. Über den beiden rechten Spalten befindet sich außerdem ein Bild.
Wenn wir einen Blick in den Quellcode der Seite werfen, sehen wir jedoch, dass die beiden rechten Spalten in der Abfolge vor der breiten linken Spalte angeordnet sind.
Wie wird dieser Effekt nun mit CSS erreicht?
Die beiden rechten Spalten und das Bild sind in einem div-Block mit fester Breite zusammengefasst, dem die Eigenschaft „float: right“ zugewiesen wurde. Das bedeutet, dass dieser Block sich innerhalb seines Elternelements so weit wie möglich rechts anordnet und nachfolgende Blöcke links um diesen Block herum fließen. Während die anderen CSS-Definitionen in eine .css-Datei ausgelagert sind, steht diese Style-Definition ausnahmsweise direkt in der Template-Datei.
Die linke Spalte besitzt keine feste Breite, sondern bekommt über die Angabe „margin:0 416px 16px 16px“ einen ausreichend großen Außenabstand auf der rechten Seite zugewiesen. Damit orientiert sich die Breite am Elternelement, einem div-Element mit der Id „container“.
Die float-Eigenschaft nimmt Elemente aus dem normalen Fluss einer Seite heraus. Der große Vorteil bei der Verwendung von float ist, dass die Notwendigkeit zum pixelgenauen Positionieren entfällt und die Inhalte sich auch wechselnden Bildschirmbreiten sehr gut anpassen können.
Innerhalb des div-Blocks auf der rechten Seite floaten die beiden Spalten unterhalb des Bildes ebenfalls. Die linke Spalte besitzt die Eigenschaft „float: left“, die rechte „float: right“. Auf diese Weise lassen sich die beiden Elemente bequem nebeneinander positionieren. Die jeweils feste Breite dieser Spalten verhindert ein Verrutschen der Inhalte auch dann, wenn der eigentliche Spalteninhalt schmaler ist.
Insgesamt ist das Layout für das Thema Hundeleine sehr gelungen.
In den nächsten Tagen folgt eine Seite über diverse Wetterstationen, und zwar wetterstation.org.