MrMurphy: Bild und Text - Umfluss

Beitrag lesen

SELF-Forum

Bild und Text - Umfluss

MrMurphy
– Informationen zu den Bewertungsregeln

Hallo,

Deine Angaben sind etwas verwirrend. Erst ist das Bild variabel in der Höhe dann auch in der Breite.

Das kannst du z. B. mit Definitionslisten lösen. Ich habe mal einen kompletten Quellcode geschrieben, bei denen die Bildgröße keine Rolle spielt, sofern sie in der Breite natürlich nicht in den Text hineinragen.

Du musst natürlich deine eigenen Bilder anpassen. Ich habe denen mal keine Größe mitgegeben, obwohl dies eigentlich sinnvoll ist. Aber darauf scheinst du ja verzichten zu wollen.

Die Abstände und Ränder musst du natürlich deinen Bedingungen anpassen. Zur Zeit ist für die Bilder eine Breite von bis zu 190px-Breite und für den Text eine Breite von 300px bei einer Gesamtbreite von 550px vorgegeben:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Teaser mit Definitionslisten</title>  
<style type="text/css">  
html {  
	padding: 0px;  
	border: 0px;  
	margin: 0px;  
	font-family: Arial, Helvetica, sans-serif;  
}  
dl.table-display  
{  
	float: left;  
	width: 550px;  
	margin: 1em 0;  
	padding: 0;  
	border-bottom: 1px solid #999;  
}  
  
.table-display dt  
{  
	clear: left;  
	float: left;  
	width: 200px;  
	margin: 0;  
	padding: 5px;  
	border-top: 1px solid #999;  
	font-weight: bold;  
}  
  
.table-display dd  
{  
	float: left;  
	width: 300px;  
	margin: 0;  
	padding: 5px;  
	border-top: 1px solid #999;  
}  
</style>  
</head>  
<body>  
<dl class="table-display">  
	<dt>  
      <img src="ford_gt40_klein_mint1.jpg" alt="Ford GT 40">  
   </dt>  
	<dd>Nisl ut aliquip ex ea commodo consequat</dd>  
	<dt>  
      <img src="ford_gt40_klein_schwarz.jpg" alt="Ford GT 40">  
   </dt>  
	<dd>  
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.  
   </dd>  
	<dt>  
      <img src="ford_gt40_klein_gold.jpg" alt="Ford GT 40">  
   </dt>  
	<dd>Facilisis at vero eros et accumsan</dd>  
</dl>  
</body>  
</html>

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln