Platz 4: Sandbag Divs

Inhalte dieser Sektion:

CSS bietet vier klassiche Einstellungen für den Textfluss: linksbündig, rechtsbündig, zentriert oder Blocksatz. Da hat es der Setzer von Texten für Printmedien schon komfortabler: Gerade in Zeitungen und Zeitschriften findet man häufig Texte, die sich der Form einer Grafik anschmiegen oder gar selbst eine einfache geometrische Form erzeugen.
Und genau das ist mit den "Sandbag Divs" auch für das Web möglich.

Sandbag Divs - ein cleverer Weg für ausgefallenes Design

Sandbag Divs - also "Sandsack-Divs" - ist eine schöne metaphorische Umschreibung, denn die Technik sorgt wirklich dafür, dass der Text wie Wasser zwischen ein oder zwei beliebig geformten Rändern nach unten fließt.

Beispiel

Was ist der Trick an der Sache?

Eigentlich stecken nur drei Dinge dahinter: Eine gute Idee, ein bißchen CSS und mehr oder weniger viel Arbeit im Bildbearbeitungs-Programm:

  1. Das Bild, an dessen Rand der Text entlangfließen soll, wird in mehr oder minder kleine Blöcke verschiedener Breite zerlegt.
  2. Diese neuen Einzelbilder werden als via CSS als Hintergrund-Grafiken für untereinander angeordnete <div>-Boxen verwendet.
  3. Zuletzt werden diesen Boxen auf die richtige Größe gebracht, und mittels float aus dem Textfluss genommen - fertig!

Genauere Erläuterungen finden sich auf bigbaer.com - CSS Image Text Wrap.

Bewertung

Sandbag Divs - http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm
Platz
4		 Praktischer Nutzen ein Stern ein Stern ein Stern kein Stern kein Stern

Eine sehr originelle Technik, mit der sich eine Seite gekonnt vom Einheits-Layout abheben kann - natürlich muss die Zielgruppe der Seite für solche Spielereien empfänglich sein. Ein großes Problem ist allerdings, dass der Text sowohl im Internet Explorer als auch im Firefox teilweise über den Rand hinaus ragt, und auch Elemente wie Listen oder Bilder im Fließtext können problematisch sein.

Originalität ein Stern ein Stern ein Stern ein Stern ein Stern
Anspruch ein Stern ein Stern ein Stern ein Stern kein Stern
Browserkompatibilität * ein Stern ein Stern ein Stern kein Stern kein Stern
Summe 15
*: teilweise Darstellungsprobleme in IE 5.5 / 6 / 7 und Firefox
« Platz 5: Border Slants
Platz 3: Conflicting Absolute Positions »
Autor: David Heinze
Artikel-Version: 1.1
Letztes Update dieser Sektion: 2007-09-11 (Erst-Veröffentlichung 2007-09-11)
▲