02.12.2010
Fließtext um Grafiken oder Blockelemente
Mit einem raffinierten CSS-Trick ist es möglich, eine Grafik von oben, rechts (oder alternativ links) und unten mit einem zusammenhängenden Fließtext zu umgeben, ohne dass der Text dabei manuell zerstückelt werden muss.
Eben genauso, wie mit diesem Text und der schönen Handballdame demonstriert.
Als einzigen Parameter benötigen wir eine Höhenangabe die bestimmt, mit welcher Höhe der Text über der Grafik stehen soll, in unserem Beispiel sollen es 50px sein.
Als Breite nehmen wir allein zu Demozwecken 10px an und weisen - ebenfalls zu Demozwecken - eine Hintergrundfarbe zu.
Damit sich der Text später rechts von diesem Platzhalter anordnet, statten wir letzteren noch mit einem float:left aus.
Daraus definieren wir folgenden Platzhalter:
.platzhalter {
width:10px;
height: 50px;
float: left;
background: #f00;
}
Unterhalb dieses Platzhalters fügen wir nun die gewünschte Grafik ein. Um dies zu erreichen, muss der vorhergehende float des Platzhalters zunächst gecleart werden. Andernfalls würde sich die Grafik nicht unter, sondern neben dem Platzhalter anordnen.
Da auch die Grafik rechts vom Text umflossen werden soll, erhält sie ebenfalls ein float:left.
Schließlich statten wir sie noch mit einigen margin-Angaben aus, damit der Text nicht so sehr am Bild "klebt". Bei den zu verwendenden Werten müsst ihr ggf. etwas experimentieren. Sinnvoll ist es, ein Abstandsreset vorzunehmen. Beachtet für den Internet Explorer 7 unbedingt auch den Hinweis am Ende dieser Anleitung.
Somit können wir die zu umfließende Grafik mit folgenden CSS-Eigenschaften ausstatten:
.fliess {
clear: left;
float:left;
margin: 0px 10px 0px 0px;
}
Abschließend hinterlegen wir noch einen "Clear", den wir später nach Ende des Textes einfügen:
.clear {
clear: both;
}
Basteln wir nun noch schnell unseren HTML-Code zusammen:
<div class="platzhalter"><!--Platzhalter-Div--></div>
<img class="fliess" src="image.jpg" width="300" height="252" border="0" alt="Demografik">
<p>
hier kommt der Fließtext rein...
</p>
<div class="clear"><!--Clear-Div--></div>
Sehen wir uns das Ergebnis in Demo 1 an:
Unser Ziel "Fließtext um Grafik" haben wir erreicht. Was noch stört ist der rote Platzhalterbalken, aber den hatten wir ja absichtlich so breit und farbig gemacht, damit wir die Systematik unserer Konstruktion besser erkennen.
Wir entfernen diesen Balken nahezu restlos, indem wir seine Breite von 10px auf 1px reduzieren und die Hintergrundfarbe wieder löschen. Also definieren wir ihn neu mit:
.platzhalter {
width:1px;
height: 50px;
float: left;
}
In Demo 2 ist der Balken jetzt verschwunden; seine winzige Breite von einem Pixel fällt kaum auf.
Fassen wir den "Trick" nochmal kurz zusammen:
Der Platzhalter wird benötigt, um die Höhe des Textes oberhalb der Grafik festzulegen. Durch seine minimale Breite von einem Pixel bleibt er unsichtbar.
Damit sich die Grafik unterhalb des Platzhalters anordnet wird zunächst gecleart und dann die Grafik selbst nochmal gefloatet.
Hinweis für den Internet Explorer 7
Wer sich die Demos im Internet Explorer 7 ansieht wird - je nach margin-Angaben - u.U. feststellen, dass hier eine Textzeile an der Schnittstelle zwischen Platzhalter und Grafik verschluckt und nicht oder nur teilweise angezeigt wird. Der IE 7 ist insofern "buggy", als er die Kombination von float der Klasse .platzhalter und float/clear der Klasse .fliess nicht mag. Eine Lösung, die zu einer browserübergreifend einheitlichen Darstellung führt, konnte ich bisher nicht auftreiben.Ich empfehle deshalb, für den IE 7 einen Hack zu verwenden und für die Klasse .fliess die margins speziell für den IE 7 zu definieren, z.B. so:
/*--Spezialangabe für den IE 7--*/
* + html .fliess {
margin-top: 15px;
}
Damit sieht der Fließtext nun auch im Internet Explorer 7 einigermaßen vernünftig aus, siehe Demo 3.
Die Anleitung basiert auf einem Forenbeitrag von Corina Rudel