Bild mit Text umfließen lassen - Klappe, die Dritte!

[Markus]

Hallo,

ich habe eine Webseite mit Tabellenlayout. Innerhalb einer einzelnen Tabellenzelle nutze ich ein DIV um dort längeren Text zum Scrollen einzubinden.
In diesem DIV möchte ich neben dem Text aber auch noch zwei Bilder positionieren, so dass sie von Text umfloßen werden. Dies mache ich z.Z. mit float. Das erste Bild soll links oben im Text positioniert werden und das zweite rechts unten.

So soll es aussehen:
bbbbbb tttttttttttt
bbbbbb tttttttttttt
bbbbbb tttttttttttt
bbbbbb tttttttttttt
ttttttttttttttttttt
ttttttttttttttttttt
ttttttttttttttttttt
tttttttttttt bbbbbb
tttttttttttt bbbbbb
tttttttttttt bbbbbb
tttttttttttt bbbbbb

So sieht es bisher aus:
bbbbbb tttttttttttt
bbbbbb tttttttttttt
bbbbbb tttttttttttt
bbbbbb tttttttttttt
ttttttttttttttttttt
ttttttttttttttttttt
ttttttttttttttttttt
ttttttttttttttttttt
ttttttttttttttttttt
             bbbbbb
             bbbbbb
             bbbbbb
             bbbbbb

Wie kann ich ein Bild unten in einem Text umfließen lassen?
Gibt es noch eine andere Möglichkeit außer float?
Textlänge und Bildgröße sind variabel und werden aus einer Datenbank dort eingesetzt, so fällt manuelles positionieren weg.

Vielen Dank für die Hilfe!

Markus

P.S.:
Ja, ich habe im selfhtml schon den Artikel zu float gelesen
Ja, ich habe im Archiv schon geschaut!
Ja, ich habe bei google schon gesucht
Viel gefunden, aber nix kapiert.

[Fabian St.]

Hi!

ich habe eine Webseite mit Tabellenlayout. Innerhalb einer einzelnen Tabellenzelle nutze ich ein DIV um dort längeren Text zum Scrollen einzubinden.
In diesem DIV möchte ich neben dem Text aber auch noch zwei Bilder positionieren, so dass sie von Text umfloßen werden. Dies mache ich z.Z. mit float. Das erste Bild soll links oben im Text positioniert werden und das zweite rechts unten.

Warum sollte dein Vorhaben mit float bitte nicht funktionieren? Bei dem obigen Bild reicht ein float:left; Und beim anderen ein float:right. Eventuell muss du vor dem float:right; ein clear:left; bei einem der Absätze notieren, um das linke Umfließen aufzuheben.

Grüße,
Fabian St.

[Markus]

Hallo,

danke für deine Antwort. In welcher Reihenfolge muss ich dann die Dinger ausgeben.

So?
bild mit float left
textbaustein
hier ein leeres span mit dem clear
bild mit float right

Danke, Markus

[Fabian St.]

Hi!

Hallo,

danke für deine Antwort. In welcher Reihenfolge muss ich dann die Dinger ausgeben.

So?
bild mit float left
textbaustein
hier ein leeres span mit dem clear
bild mit float right

Das wär z.B. eine Lösung, wobei jedoch ein <br style="clear:left" /> vorzuziehen wäre - auch in Hinsicht auf die semantische Korrektheit.

Grüße,
Fabian St.

[Ingo Turski]

Hi,

Warum sollte dein Vorhaben mit float bitte nicht funktionieren?

weil das rechte Bild über float zwar rechts ausgerichtet werden kann, aber nicht zwangsweise bündig mit dem Text abschließt. Das gefloatete Bild muß ja _vor_ dem umfliessenden Text notiert sein und es erfordert schon eine  serverseitige Auswertung der Bildgröße und Textmenge (in Ahängigkeit von vom font), um die passende Position im Quelltext auch nur annähernd zu ermitteln.

freundliche Grüße
Ingo

[Zeromancer]

Hallo Marcus,

<tr>
 <td>
   <p><img src="" height="" width="" alt="" style="float:left; margin:0 20px 20px 0;">Text</p>
   <p>Text</p>
   <p><img src="" height="" width="" alt="" style="float:right; margin:0 0 20px 20px;">Text</p>
 </td>
</tr>

wäre mein Lösungsansatz. 'Margin' kann man dann für Abstände des Bildes zum Text nutzen.

Mit freundlichen Grüßen

André

[Markus]

Hallo Andre,

so habe ich es auch umgesetzt mit dem beschriebenen Ergebnis. Nur die <p>-Tags hatte ich nicht genutzt. Für was sind die gut?

Danke, Markus

[Zeromancer]

Hallo Marcus,

so habe ich es auch umgesetzt mit dem beschriebenen Ergebnis. Nur die <p>-Tags hatte ich nicht genutzt. Für was sind die gut?

Ich benutze sie zur Strukturierung, da sie jedesmal einen eigenen Absatz 'produzieren'.

Mit freundlichen Grüßen

André

[Fabian St.]

Hi!

so habe ich es auch umgesetzt mit dem beschriebenen Ergebnis. Nur die <p>-Tags hatte ich nicht genutzt. Für was sind die gut?

<p>-Tags leiten einen Paragraphen = Textabsatz ein.

Grüße,
Fabian St.

[Ingo Turski]

Hi,

<tr>
 <td>

</td>
</tr>

wäre mein Lösungsansatz.

und wozu sollen diese Elemente hier von Nutzen sein?

freundliche Grüße
Ingo

[Zeromancer]

Hallo Ingo,

und wozu sollen diese Elemente hier von Nutzen sein?

du bist heute mal wieder kleinlich. Ja, es hätte entsprechend des Ausgansgpostings

<tr>
 <td>
  <div>
    ....
  </div>
 </td>
</tr>

heißen müssen, glaube ich... ;-)

Mit freundlichen Grüßen

André

[Ingo Turski]

Hi,

du bist heute mal wieder kleinlich. Ja, es hätte entsprechend des Ausgansgpostings

ach ja? ;-)

Allerdings wären die P's hier wohl auch zuviel, denn ich sehe im Beispiel keine Absätze bzw. nur einen und da dieser in einem TD steht (warum auch immer) wäre ein P nicht zwangsläufig erforderlich. Zur Lösung sogar eher kontraproduktiv. Diese könnte so aussehen:
<div><img style="float:left; margin-right:0.5em;" ...>tttttttttttt tttttttttttt tttttttttttt tttttttttttt ttttttttttttttttt ttttttttttttttttttt ttttttttttttttttttt<img style="float:right; margin-left:0.5em;" ...>tttttttttttt tttttttttttt tttttttttttt tttttttttttt</div>
Aber wie gesagt - exakt ist das wohl schwer hinzubekommen.

freundliche Grüße
Ingo