Bilder(links und rechts) von text umfließen

[ben3741]

Hallo zusammen,

ich versuche gerade um 2 Bilder einen Text fließen zu lassen, bekomme es aber nicht hin.
Also mein Ziel schaut in etwa so aus:

Text, Text, Text, Text, Text [           ]
Text, Text, Text, Text, Text [   Bild1   ]
Text, Text, Text, Text, Text [           ]
Text, Text, Text, Text, Text, Text, Text
Text, Text, Text, Text, Text, Text, Text
[           ] Text, Text, Text, Text, Text
[   Bild2   ] Text, Text, Text, Text, Text
[           ] Text, Text, Text, Text, Text

Bis jetzt hab ich folgendes:

  
<div>  
  
    <div class="float-right">  
        <img src="bild1.jpg" alt="" />  
    </div>  
  
    <div class="float-left">  
        <img src="bild2.jpg" alt="" />  
    </div>  
  
    <div>  
        <p>Text, Text, Text, Text, Text, Text, Text</p>  
    </div>  
  
</div>  

Bild 1 funktioniert einwandfrei.
Aber wie ich das zweite Bild richtig einbinde, weiß ich nicht.
Wenn jemand einen Tip hätte, das wäre super!

Grüße,
Ben

[ichbinich]

Hallo,

Bild 1 funktioniert einwandfrei.
Aber wie ich das zweite Bild richtig einbinde, weiß ich nicht.
Wenn jemand einen Tip hätte, das wäre super!

Zuerst: sämtliche <div> in deinem Code sind unnötig, du kannst auch <img> mit Klassen versehen.

Nun die Lösung:

<p><img src="bild1.jpg" alt="" class="float-right" />  
	Text, Text, Text, Text, Text, Text, Text,  
	Text, Text, Text, Text, Text, Text, Text,  
	Text, Text, Text, Text, Text, Text, Text,  
	Text, Text, Text, Text, Text, Text, Text,  
	Text, Text, Text, Text, Text, Text, Text,  
	<img src="bild2.jpg" alt="" class="float-left" />  
	Text, Text, Text, Text, Text, Text, Text,  
	Text, Text, Text, Text, Text, Text, Text,  
	Text, Text, Text, Text, Text, Text, Text,  
	Text, Text, Text, Text, Text, Text, Text,  
	Text, Text, Text, Text, Text, Text, Text,  
</p>

vg ichbinich

[ben3741]

Danke für die Antwort.

Zuerst: sämtliche <div> in deinem Code sind unnötig, du kannst auch <img> mit Klassen versehen.

Okay, lass ich weg.

Nun die Lösung:

<p><img src="bild1.jpg" alt="" class="float-right" />

Text, Text, Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text, Text, Text,
<img src="bild2.jpg" alt="" class="float-left" />
Text, Text, Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text, Text, Text,
</p>

  
Das Problem ist, dass ich den Text von einer externen Quelle hole. Deshalb steh er auch in einem DIV.  
  
~~~html
  
<div>  
        {{ page:body }} <!-- PyroCMS-Code -->  
</div>  

Ich hoffe man versteht, was ich meine :D

Ben

[Micha]

Hallo ben3741,

benötigst Du wirklich ein umschließendes DIV für die Bilder?

Aber wie ich das zweite Bild richtig einbinde, weiß ich nicht.

Du musst das Bild dort einbinden, wo Du es auch im Text sehen willst - nicht drüber. Wenn Du bspw. ein Bild pro Absatz hättest, würde es so aussehen:

<p><img style="float:left;" src="...">Text Text Text</p>  
<p><img style="float:right;" src="...">Text Text Text</p>

Schöne Grüße
Micha

[ben3741]

Hi Micha,
Danke schonmal für die Antwort.
Okay die DIV kann ich auch weglassen.

<p><img style="float:left;" src="...">Text Text Text</p>

<p><img style="float:right;" src="...">Text Text Text</p>

  
  
Das Problem ist, ich hol mir den Text von einer externen Quelle, kann ihn also nicht in zwei Elemente packen.  
Ich benutze ein CMS und hol mir einen Text von einer Seite und schreibe ihn in das DIV-Element.  
~~~html
  
<div>  
    <p>{{ page:body }}</p> <!-- Code aus PyroCMS -->  
</div>  

Ich hoff ich konnte das verständlich rüberbringen :D

Ben

[Matthias Apsel]

Om nah hoo pez nyeetz, ben3741!

Das Problem ist, ich hol mir den Text von einer externen Quelle, kann ihn also nicht in zwei Elemente packen.

Dann wirst du wohl warten müssen.

Matthias

[ben3741]

Om nah hoo pez nyeetz, ben3741!

Das Problem ist, ich hol mir den Text von einer externen Quelle, kann ihn also nicht in zwei Elemente packen.

Dann wirst du wohl warten müssen.

Matthias

Danke trotzdem.
Habs jetzt gelöst. Hab in meinem CMS jetzt den Code-Schnipsel für das Bild drin. Is zwar nicht schön, aber funktioniert wenigstens ;)