[img]http://i31.tinypic.com/11ljths.jpg[/img]

Hier ein weiteres Tutorial von mir bezüglich umfließender Elemente. Dies wird mit der CSS-Eigenschaft float (und clear) realisiert, daher der Name. Hier eine Beispielgrafik für alle unter euch, die sich darunter nichts vorstellen können:

[img:left]http://farm3.static.flickr.com/2565/3795094135_947ecfd689_t.jpg[/img] Hier seht ihr nun, dass der Text neben dem Bild verläuft und nicht darüber oder darunter. Viele fragen sich, wie das funktioniert - ich werd es euch hier erklären! :)




Zuerst such ihr euch ein Bild eurer Wahl aus, dass ihr gerne vom Text umfließen lassen wollt. Dieses fügt ihr, wie gewohnt, mit folgendem Code ein:

Html:
<img src="http://farm3.static.flickr.com/2565/3795094135_947ecfd689_t.jpg">

Allerdings brauchen wir jetzt natürlich einen Zusatz, damit wir dem Bild sagen können, dass es vom Text umflossen werden soll. Das sieht dann so aus:

Html:
<img src="http://farm3.static.flickr.com/2565/3795094135_947ecfd689_t.jpg" style="float:right;">


Weitere Hinweise:
Gefloatete Elemente werden aus dem Dokumentenfluss genommen. Nachfolgende, normal fließende Elemente verhalten sich also, als wäre das gefloatete Element nicht vorhanden. Lediglich die Inhalte der nachfolgenden Elemente umfließen das gefloatete Element.

Ein Problem mit gefloateten Elementen ist, wie man den entlangfließenden Text davon abhält, die Seiten des Floats zu berühren. Es funktioniert nicht, dem Text Polsterung (padding) oder Rand (margin) zuzuweisen. Die richtige Vorgehensweise ist, dem Float selbst einen Rand zu geben und dadurch die Zeilenboxen davon zu überzeugen, dass das gefloatete Element „größer“ ist, als es erscheint. Dadurch entsteht dann der Abstand. Die meisten Float-Elemente haben einen solchen Rand nur auf derjenigen Seite, die dem Text zugewandt ist sowie auf ihrer Unterseite.

[img:right]http://www.andreas-kalt.de/tutorials/float-theorie/clear.gif[/img]Ein weiteres "Problem": Statische Boxen ignorieren das Float einfach und richten sich an der vorausgehenden statischen Box aus. Was passiert nun aber, wenn wir der nachfolgenden (!) statischen Blockbox die Eigenschaft clear:both; zuweisen? Der obere Rand der mit clear versehenen Box wird soweit "ausgedehnt", bis diese Box unterhalb des floatenden Elements angeordnet werden kann! So ist es also möglich, viele Absätze (mit <br>) zu vermeiden und dann gleich, egal welche Auflösung der Betrachter der Seite hat, unter dem gefloateten Element weiterzuschreiben, wenn der umfließende Text zB. so kurz ist, dass er nicht bis unter das gefloatete Bild reicht.

Mögliche Werte für das float-Element:
  • left: Das Element wird möglichst weit links platziert und die Inhalte der nachfolgenden Elemente fließen rechts daran vorbei.
  • right: Das Element wird möglichst weit rechts platziert und die Inhalte der nachfolgenden Elemente fließen links daran vorbei.
  • none: das Element wird nicht umflossen.
Die float-Eigenschaft kann im übrigen jedem Element zugewiesen werden, nicht nur Bildern. :-)

Weiterführende Links / Quellen: