esse est percipi
Das Weblog eines Grafikdesigners. Seit 2003.

esse est percipi

Einfach gute Mac-Apps.

Von einem unabhängigen Entwickler,
der sie täglich selbst nutzt.

Blog Apps

Impressum/Datenschutz/AGB

Webdesign | Mittwoch, 13. August 2008

CSS-Formsatz und realitätsferne Sekretärinnen

1996 durfte ich meine erste Auftrags-Website gestalten. Der Kunde wollte Fotos mit Business-Menschen, hatte aber – wie allgemein üblich – ein schmales Budget. Bavaria, damals meine bevorzugte Bildagentur, schied damit aus. Online-Bildagenturen gab es noch nicht, immerhin aber schon Anbieter von Stockfoto-CDs. Und so bestellte ich dann unbesehen die CD „Bodyshots, Multimedia Version“ mit über 300 Fotos, „photographed in a wide range of business settings and activities“.

Die – wie man am Beispiel sieht – ziemlich unbrauchbar waren. Nicht nur, weil die Sekretärinnen fernab jeglicher Realität direktemang den Fantasien eines pubertierenden Jünglings entsprungen schienen, sondern auch, weil die Fotos in einem Maße amerikanisch wirkten, dass sie zu einem bodenständigen nordhessischen Unternehmen überhaupt nicht passen wollten.

Welche Fotos wir dann stattdessen für die Website nahmen, weiß ich nicht mehr, wohl aber, dass ich auf den Kosten für die CD sitzen geblieben bin.

Auf der Suche nach einem alten Kunden-Backup ist sie mir kürzlich wieder in die Hände gefallen; und so benutze ich jetzt zum ersten Mal ein Bild davon (irgendwann muss sich die Investition ja mal gelohnt haben), um Formsatz per CSS zu demonstrieren. Hergestellt ist er mit floating divs verschiedener Breite und Höhe; das Bild, dessen Konturen umflossen werden, wird per background-Eigenschaft angezeigt. Hier exemplarisch der Quellcode:

<div style="background:url(images/meinbild.jpg) no-repeat top right;">
<div style="float:right;width:160px;height:25px;clear:right"></div>
<div style="float:right;width:175px;height:25px;clear:right"></div>
[weitere floating divs, deren Breite und Höhe sich nach den Konturen des im Hintergrund liegenden Bilds richten …]
 Dieser Text umfließt dann die Konturen, präziser gesagt wird er von den floating divs verdrängt …
</div>

Auch wenn man die Schriftgröße ändert (per Tastatur oder im Schriftgrößenmenü im Navigationskasten rechts), umfließt der Text weiterhin korrekt die Konturen. Für tägliche Blogeinträge ist so ein aufwändiger CSS-Formsatz sicherlich nicht besonders geeignet, für gelegentliche Anwendungen aber durchaus.

Kommentare:

Bei den Kommentaren handelt es sich um fremde Inhalte, die sich „esse est percipi“ nicht zueigen macht. Verantwortlich für den Inhalt eines Kommentars ist der jeweilige Verfasser.

Gerrit van Aaken Mittwoch, 13. August 2008, 12:00 Uhr

Jawoll, endlich mal eine scharfe 90er-Jahre-Mieze hier im Blog! Das Schockierende daran ist, dass solche Fotos immer noch oft genug aus den Archiven der Online-Bildanbieter rauspurzeln, wenn man nach vernünftigen Motiven sucht. Alternativ gerne gesehen: In der pastellblauen Unschärfe herumlungernde, smarte Mittzwanziger mit Powerbook und/oder Headset …

Christian Mittwoch, 13. August 2008, 13:51 Uhr

Das sowas mit CSS geht, wusste ich bisher gar nicht – danke für den Tipp! Mit Firefox skaliert das ganze auch sehr gut (bei Vergrößern/Verkleinern der Anzeige).

Arthur Mittwoch, 13. August 2008, 15:27 Uhr

Ganz großes Kino!
Natürlich bin ich schön blöd: Als ich im Text ungefähr bei der Hälfte war, fiel mir auf, dass der Text das Bild umfließt und ich versuchte gleich anhand des Quelltextes die Methodik dahinter zu verstehen.
Hätte ich bloß erstmal zu Ende gelesen :D

Johannes Mittwoch, 13. August 2008, 20:10 Uhr

Ha, Arthur, ging mir exakt genau so… Bitte einen Disclaimer an den Anfang des Artikels setzen ;-)

Finde ich sehr interessant! Jedoch sicher nur für statische penibelst durchdesignte Webseiten… wie ich sie noch nie erstellt habe ;-)

Michael Preidel Mittwoch, 13. August 2008, 20:43 Uhr

Haha. Okay, ich gebe zu: Eine lange Einleitung. Aber sollte die Kategorie Webdesign (über der Überschrift) und die Überschrift selbst, in der ja was von „CSS-Formsatz“ steht, nicht schon einen kleinen Hinweis geben? ;-)

Boris Bojic Mittwoch, 13. August 2008, 01:34 Uhr

Die Idee ist an sich ganz ok (gabs auf Alistapart.com vor einger Zeit), aber je nach Höhe des Bildes entsteht eine ganz schön große, unsemantische DIV-Suppe … nee, sowas muss nicht sein. ;)

susanne Mittwoch, 13. August 2008, 01:48 Uhr

… und solange IE das nicht ordnungsgemäß umsetzt sage ich: 6, setzen! ;)

Otto Mittwoch, 13. August 2008, 01:49 Uhr

Funzt mit IE leider nicht. Da sieht es so aus…

http://img148.imageshack.us/img148/5148/cssqxmmq8.jpg

Michael Preidel Donnerstag, 14. August 2008, 08:01 Uhr

Interessanterweise haben es ja weder IE 6 noch IE 7 richtig angezeigt. Das lag aber nicht an der Methode selbst, sondern daran, dass ich aus Schreib- bzw. Copy und Paste-Faulheit die clears nur in den oberen divs verwendet hatte. (Zur Erklärung: wenn zwei übereinander liegende floating divs zusammen breiter sind als der umgebende Container, clearen sie in allen Browsern automatisch. Nur im IE nicht.)

Das habe ich jetzt behoben und nun wird der Formsatz auch im IE korrekt angezeigt.

Interessant aber auch, dass sich die ersten IE-User erst 14 Stunden nach Veröffentlichung gemeldet haben ;-)

Patrik Donnerstag, 14. August 2008, 11:07 Uhr

ah, endlich mal eine frau auf preidels seiten! und gleich so eine. hmmm, fein. tja, wenn ich mir die photos von mir aus der zeit anschaue, kann ich mich über den auftritt der dame nicht wundern. und das der text den formen, äh kurven folgt ist ne tolle sache. hatte ich schon fast vergessen, dass es sowas noch gibt: den formsatz!!!

Johannes Donnerstag, 14. August 2008, 21:31 Uhr

@Boris: Semantik-Fundamentalisten können die DIVs ja per jQuery reinladen damit sie keine Suppe verursachen ;)

Mainbube Freitag, 15. August 2008, 07:25 Uhr

Hallo Herr Preidel, habe schon lange keinen Blick mehr auf Ihre Seite geworfen, aber heute und bei diesem Tipp habe ich gleich gemerkt – Es ist ein Fehler gewesen sich nicht die Zeit zu nehmen.

anne Freitag, 15. August 2008, 09:51 Uhr

très sexy. das css. und natürlich die neue mitarbeiterin, hihihi.

datenkind Freitag, 15. August 2008, 10:35 Uhr

Die Beschreibung solchen Umflusses gibt’s ja schon lange, es wird aber auch im Jahr 2008 nicht besser.

Wenn man die Div-Suppe anspricht, wird man als Semantik-Fundamentalist „degradiert“? Das empört schon ein wenig. Immerhin sind schnelle und unkomplizierte Websites das tägliche Handwerk und man sorgt für eine schlanke code-Struktur. Na herzlichen Dank. Ich frag mich, wem dieser Titel (wenn auch in entgegengesetzer Form) gebührt.

Und sowieso, es generiert (in Michaels Beispiel) Zeilen mit einem Wort. Ich wiß ja nicht, ob da großartige Lesefreude aufkommt …

Torsten Montag, 18. August 2008, 13:02 Uhr

auf theboxoffice.be gibt es ein tool, dass den ganzen vorgang etwas automatisiert.

Carlo Montag, 25. August 2008, 10:41 Uhr

Wieder mal ein schöner Beitrag.
Der Formsatz im Web wird leider viel zu sehr vernachlässigt.
Schön das mal wieder zu sehen.

@Boris Bojic
„Divsuppen“ sind evtl. nicht schön, tragen jedoch zur Semantik rein gar nichts bei. Somit ist diese Methode auch in semantischer Hinsicht absolut korrekt. Gleichzusetzen ist dies etwa mit der Papierart, auf der man schreibt. Das einzige nicht erwähnenswerte Kontra ist hier die „Quelltextmenge“. Ansonsten gibt es daran rein gar nichts auszusetzen.

Ich zitiere hier mal die W3C für dich:
… Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes. … (Quelle)