HTML Image float

  • HTML

Es gibt 3 Antworten in diesem Thema. Der letzte Beitrag () ist von Reeker.

    HTML Image float

    Moin,

    Ich verzweifle an einem recht simplen Problem:
    Ich kriege den Text nicht dazu, das Bild zu "umfließen".

    Bild ist gefloatet, wird auch entsprechend nach rechts gepackt, aber der Text ist nur über und unter dem Bild.

    HTML-Quellcode

    1. <h2>Detailansicht</h2><br />
    2. <b>Beschreibung:</b><br />
    3. testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br />
    4. <img src="http://+++++++.de/images/profil.png" style="float: right;" width="200px" height="200px">
    5. testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br />


    im Anhang noch ein Bild wie es aussieht (mit etwas mehr Text).

    Mit Google bin ich irgendwie auch nicht wirklich weiter gekommen.. jemand ne Idee?

    Danke und Gruß,
    Neoner
    Bilder

    • bild1.jpg

      83,32 kB, 940×437, 96 mal angesehen

    Ahoi,

    warum muss das Bild denn eigentlich zwischen dem Text stehen?
    Ich persönlich verteile so etwas lieber auf Div's und positioniere die.

    HTML-Quellcode

    1. <div style="float: left;">
    2. <h2>Detailansicht</h2><br />
    3. <b>Beschreibung:</b><br />
    4. testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br />
    5. testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br />
    6. </div>
    7. <div style="float: right;">
    8. <img src="http://habichthugo.vdr-developer.org/foreign/testbild-100.jpg" style="float: right;" width="200px" height="200px">
    9. </div>
    Grüße Manu

    Was Gott dem Menschen erspart hat, kann der Computer.
    Billy ©, (*1932), Schweizer Aphoristiker
    Quelle: www.Aphorismen.de

    Moin!

    Also wenn du das ganze umfließen möchtest und das Bild nicht am anderen Rande der Seite haben willst, müssest du float:left nehmen und Das Bild im Code über den Text packen:

    Quellcode

    1. ​<h2>Detailansicht</h2><br />
    2. <b>Beschreibung:</b><br />
    3. <img src="http://+++++++.de/images/profil.png" style="float: left;" width="200px" height="200px">
    4. testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br />
    5. testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br />

    Deine "Lösung" im Startpost funktioniert schon. Nur das Problem ist,
    dass du keine Leerzeilen in deinem "Text" hast und somit kein automatischer Zeilenumbruch generiert wird.

    Ich empfehle dir zum testen von Text-Basierten Experimenten loremipsum.de/

Facebook
Telefonspende