Bilder von Text umfließen lassen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen links oder rechts im Text ein Bild platzieren. Der Text soll das Bild umfließen, anstatt ober- oder unterhalb davon zu erscheinen (siehe die folgende Abbildung).

Standardmäßig werden Bilder nicht von Text umflossen

Abbildung: Standardmäßig werden Bilder nicht von Text umflossen.

Lösung

Definieren Sie die Bilder als Floats. Da die Regeln im Dokument mehr als einmal verwendet werden sollen, definieren Sie diese als Klassen-Selektoren:

.leftFloat {
  float: left
}
.rightFloat {
  float: right
}

Im nächsten Schritt weisen Sie den Bildern im HTML-Code nun die entsprechenden Klassen zu (siehe nächste Abbildung):

<img src="csscookbook.gif" class="leftFloat" alt="titelseite" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ...</p>
<img src="csscookbook.gif" class="rightFloat" alt="titelseite" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ...</p>

Durch Definition des Bildes als Float wird es vom Text umflossen

Abbildung: Durch die Definition des Bildes als Float wird es vom Text umflossen.

Diskussion

Bevor sich die Browser an den CSS-Standard hielten, haben Designer das img-Tag oftmals mit dem Attribut align versehen, um Bilder nach links oder rechts zu verschieben und von Text umfließen zu lassen. Mittlerweile wurde align vom W3C allerdings für veraltet (deprecated) erklärt. Das W3C empfiehlt stattdessen die Verwendung der CSS-Eigenschaft float. Die Definition als Float funktioniert nicht nur mit Bildern. Sie können auf diese Weise beliebige Elemente aus dem normalen Textfluss nehmen und nach links oder rechts verschieben. In der vorherigen Abbildung überschneidet sich das zweite Bild mit dem Absatz, der sich auf das erste Bild bezieht. Um dieses Verhalten zu umgehen, können Sie die Eigenschaft clear verwenden:

p {
  clear: left;
}

Mit clear legen Sie fest, auf welcher Seite des betreffenden Elements kein Float stehen darf. Anstatt auf gleicher Höhe mit dem zweiten p-Element dargestellt zu werden, wird das zweite Bild in unserem Beispiel so weit nach unten verschoben, dass es keine Überschneidungen mehr gibt.

Siehe auch

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln