Anhalten des Textflusses neben der Grafik im HTML


Grafiken und der <br clear="left" />-Tag


Was können Sie tun, wenn Sie den Raum neben der Grafik nicht weiterhin auffüllen, sondern eine neue Zeile unterhalb der Grafik beginnen wollen? Ein normaler Zeilenumbruch wird da nicht genügen – er wird die Zeile nur um einen Zeilenabstand weiterschieben. Auch eine neue Absatzmarke wird den Text weiterhin um das Bild herumfließen lassen. Um das Herumfließen des Textes um die Grafik endgültig zu unterbrechen, setzen Sie eine Zeilenumbruch-Kennung (<br />) mit dem nennen Attribut clear (löschen) ein. Mit dem clear-Attribut können Sie die Zeile so umbrechen, dass die nächste Textzeile erst nach dem Ende der Grafik beginnt (und zwar geht sie dann zum Seitenrand unterhalb der Grafik).

Das clear-Attribut kann einen dieser drei Werte annehmen:

  • Left - Umbruch zum freien linken Rand bei allen linksbündig ausgerichteten Grafiken
  • Right - Umbruch zum freien rechten Rand bei allen rechtsbündig ausgerichteten Grafiken
  • All - Umbruch zu einer Zeile, die auf beiden Seiten frei ist

Das clear-Attribut für das <br />-Tag gilt in HTML 4.0 als verworfen und wurde von Style-Sheet-Attributen ersetzt.

Das folgende Code-Beispiel zeigt die Grafik, um die etwas Text gelegt wird. Ein Zeilenumbruch mit clear="left" bricht den Textfluss um die Grafik ab und führt den Text nach der Grafik fort. Abbildung zeigt das Ergebnis im Safari.


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/transitional.dtd">
</head>
<body>
<img src="turn_right_128.png" alt="HTML-Lernen" align="left" /> 
<h1>
	HTML Lernen - Grundlagen und Tutorials
</h1>
<br clear="left" />
<p>
	Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam, maecenas auctor magna dolor ex laoreet primis sapien metus quis, ipsum ullamcorper mauris dignissim.
</p>
<p>
	Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam, maecenas auctor magna dolor ex laoreet primis sapien metus quis, ipsum ullamcorper mauris dignissim nisl porta dictumst torquent scelerisque luctus, cursus montes vulputate ornare est sem.
</p>


Anhalten des Textflusses neben der Grafik im HTML
Anhalten des Textflusses neben der Grafik im HTML

Kontakt

Email: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
Tel : 038305 / 529 799
Erstellt mit HTML5 und CSS3 - © 2021  HTML Lernen