28.05.2008
Fließtext um Grafiken
Aus gestalterischen Gründen kann es sinnvoll sein, eine Grafik mit Text umfließen zu lassen, wie im nachfolgenden Beispiel dargestellt:
Des Pfälzers Grundausstattung
Zur "Grundausstattung" eines jeden Pfälzers gehört eine Portion "Pälzer Lewwerworscht", ein gutes Schwarzbrot und ein Fass Wein, sozusagen alles Wichtige zum Überleben. Dies symbolisiert eine Figur des "Paul-Münch-Brunnens" in Ruchheim, seit 1974 ein Stadtteil von Ludwigshafen am Rhein.
Paul Münch
Ein Standardmittel für Fließtext um Grafiken gibt es nicht. Man könnte die einzelnen Textzeilen manuell umbrechen, was jedoch äußerst mühsam erscheint und bei browser-vergrößerter Schrift auch nicht mehr hinhaut. Abhilfe schafft mal wieder ein CSS-Trick. Er funktioniert zumindest auf einer Seite der Grafik (nicht um die ganze Grafik herum), bedarf aber ebenso etwas Vorarbeit:
Zunächst wird eine passende Grafik mit transparentem Hintergrund im GIF-Format benötigt. Diese Grafik wird nun entlang der Konturen in horizontale Teilbereiche in "Scheiben" aufgeschnitten. Das funktioniert am besten mit einem Grafikprogramm wie Ulead Photo Impact X3
In diesem Beispiel richtet sich der linke Randbereich der Teilgrafiken nach der linken Kontur der Grafik. Alle Teilgrafiken haben einen einheitlichen rechten Rand. Somit haben sie unterschiedliche Breiten und können - je nach Grafik - auch unterschiedliche Höhen haben. Die hier verwendete Gesamtgrafik wurde in zehn Einzelgrafiken zerstückelt, wie man in der Demo sehen kann.
Nach dieser grafischen Vorarbeit kümmern wir uns um die Umsetzung per CSS:
Der hier verwendete Div für Text und Teilgrafiken hat folgende CSS-Angaben:
#box {
margin: 20px auto;
width: 600px;
background: #f7fede
font-family: Verdana;
font-size: 0.8em;
color: #5c0118;
text-align: left;
padding: 5px;
}
Um browserspezifische Unterschiede bei Überschrift und Abständen zu eliminieren und somit eine einheitliche Darstellung zu gewährleisten, definieren wir noch für die verwendeten Elemente h5 und p folgende Angaben:
#box h5 {
font-size: 1.3em;
margin: 0.8em 0;
}
#box p {
margin: 0.8em 0;
}
Entscheidend kommt es nun auf die Formatierung der Grafiken an:
Sie haben zwar unterschiedliche Breiten, sind aber vom rechten Rand her identisch ausgerichtet. Also lassen wir unsere Bilder rechts floaten, so dass sie rechts im Container angeordnet sind und links vom Text umgeben werden können. Damit der Text noch etwas Abstand zur Grafik hat, sehen wir dafür noch einige Pixel vor und verhindern, dass ein Bildrand angezeigt wird:
#box img {
float: right;
margin-left: 5px;
border: none;
}
Diese Angaben allein hätten jedoch zur Folge, dass sich die Bilder selbst nebeneinander anordnen, solange der Platz im Container ausreicht. Um sicherzustellen, dass unsere Teilgrafiken untereinander angeordnet werden, benötigen wir noch eine vorangestellte Clear-Angabe:
#box img {
clear: right;
float: right;
margin-left: 5px;
}
Viel mehr wird für diese Konstruktion nicht benötigt, so dass wir sie im HTML-Code wie folgt zusammenfügen können (zum Schluss wird nochmal gecleared):
<div id="box">
<h5>Des Pfälzers Grundausstattung</h5>
<img src="pfaelzer1.gif" width="260" height="33" alt="pfaelzer1">
<img src="pfaelzer2.gif" width="271" height="27" alt="pfaelzer2">
<img src="pfaelzer3.gif" width="286" height="39" alt="pfaelzer3">
<img src="pfaelzer4.gif" width="375" height="47" alt="pfaelzer4">
<img src="pfaelzer5.gif" width="441" height="30" alt="pfaelzer5">
<img src="pfaelzer6.gif" width="451" height="30" alt="pfaelzer6">
<img src="pfaelzer7.gif" width="462" height="56" alt="pfaelzer7">
<img src="pfaelzer8.gif" width="474" height="26" alt="pfaelzer8">
<img src="pfaelzer9.gif" width="492" height="37" alt="pfaelzer9">
<img src="pfaelzer10.gif" width="491" height="65" alt="pfaelzer10">
<p>
Textinhalt
</p>
<div style="clear: right"></div>
</div><!--Ende #box-->
In diesem Zusammenhang sei auch auf diese Anleitung verwiesen.
Quelle:
Die Idee zu dieser Anleitung stammt aus dem Buch Webdesign mit CSS