Daniel_T: Bild und Text - Umfluss

SELF-Forum

Bild und Text - Umfluss

Daniel_T
– Informationen zu den Bewertungsregeln

Guten Morgen,

ich hab nun gestern einige Zeit damit verbracht, eine schöne Lösung für mein Problem zu suchen, aber ich komm nicht weiter und hoffe, jemand von euch kann mir etwas helfen.

Es gibt eine vertikale Auflistung von Teasern mit optionalem Bild und rechts davon Text.
Bild und Text sind variabel in der Höhe.
Die Breite des Teasers ist immer gleich, aber das Verhältnis von Bild und Text in der Breite eben leider nicht.
Ist der Text länger als das Bild, soll dieser nicht unter dem Bild weiter laufen, sondern schön in seiner Flucht bleiben.

Ich kann nun das Bild nach links floaten, und dem Text ein margin-left geben, aber wenn das Bild nicht immer gleich breit ist, funktioniert das nicht.
Ebenso kann ich dem Text eine fixe Breite geben.

Wie kann ich das ohne verwenden einer Tabelle gut umsetzen? Ich will eigentlich vermeiden, für jede Bild- / Textbreite eine eigene Klasse mit angepasstem margin-left oder angepasster width zu verwenden.

Vielen Dank,
lg Daniel

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 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

    1. Bild und Text - Umfluss

      Daniel_T
      – Informationen zu den Bewertungsregeln

      Hallo,

      Danke, aber bei deinem Beispiel hat die Spalte mit den Bildern eine fixe Breite. Genau das will ich verhindern.

      Das Bild ist z.b. 50, 100 oder 150 Pixel breit, und der Text soll immer 10 Pixel neben dem Bild sein. Ist der Text so lange, sodass er weiter nach unten geht, als das Bild, umfließt dieser normal das Bild, und das will ich verhindern. Dennoch soll der Abstand Bild u Text immer gleich sein, obwohl das Bild nicht gleich breit ist.

      Danke
      Daniel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Bild und Text - Umfluss

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Daniel_T:

    nuqneH

    Ist der Text länger als das Bild, soll dieser nicht unter dem Bild weiter laufen, sondern schön in seiner Flucht bleiben.

    Gib dem Text 'overflow: hidden' (oder 'float: left', was aber im IE arge Probleme bereitet). Wenn der Text nur aus einem Absatz besteht:
    p { overflow: hidden }

    Ansonsten die Absätze gruppieren ('div', HTML5 bietet dafür 'section').

    Und natürlich das Floaten für den Container von Bild und Text aufheben:
    li { clear: left }

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Bild und Text - Umfluss

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Daniel_T:

    nuqneH

    Ist der Text länger als das Bild, soll dieser nicht unter dem Bild weiter laufen, sondern schön in seiner Flucht bleiben.

    Wenn du gar nicht floaten lassen willst, dann willst du auf 'float' verzichten.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln