Bilder mit seitlich dargestelltem Text

Posted in Allgemeines, CSS, HTML, Snippet on 11/24/2009 09:31 by Hoegerl_Karl
Kategorie:Einsteiger
Beim Einfügen von Bildern in die Webseite stellen wir fest, dass nur eine Zeile Text seitlich des Bildes dargestellt wird. Dies wollen wir mit diesem Snippet ändern.

CSS Snippet einfügen, wie in Webdesign mit Cascading Style Sheets (CSS) beschrieben:

.textlinks { float: left;} /* Text fliesst links vorbei */
.textrechts { float: right;} /* Text fliesst rechts vorbei */

Hier die Ansicht einer Beispiel Webseite:

Beispiel Text neben Bild

Hier der Quellcode der Webseite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Mehrere Zeilen Text seitlich am Bild</title>
 <!-- Die nachfolgende Cascading Stylesheet Definiton in den head Ihrer Webseite kopieren -->
 <style type="text/css">
 .textlinks { float: left; margin-right:10px;}
 .textrechts { float: right; margin-left:10px;}
 </style>
 <!-- Ende des Style sheets -->
</head>
<body>
 <b>Beispiel mit Bild <span>ohne</span> das Snippet:</b>
 <br /><br />
 <img src="images/css.jpg" />Der Text wird mit einer Zeile seitlich des Bildes dargestellt. Meist ist dies unerwünscht, da der Artikel das Bild umfliessen soll.
<p>&nbsp;</p>
 <b>Beispiel mit Bild <span>mit</span> dem Snippet: </b>
 <br /><br />
 <img src="images/css.jpg" class="textlinks" />Der Text wird mehrzeilig seitlich des Bildes dargestellt.
 So soll es sein, da der Artikel das Bild seitlich umfliessen soll.
<p>&nbsp;</p>
</body>
</html>

Zuletzt aktualisiert von .