Bilder in Fließtext aber außerhalb von <p> positionieren

[meles]

Hallo,

Ich bin seit gestern auf der Suche nach einer Lösung, leider aber ohne Erfolg und deshalb wende ich mich an euch.

Ich habe ein scrollbares DIV in dem sich Text befindet. In diesem Text sollen Bilder positioniert werden und vom Text umflossen werden. Allerdings sollte das img-Tag nicht zwischen den p-Tags stehen sondern die Position des Bildes soll mit CSS gesteuert werden.
Gebe ich dem Bild eine absolute Position bleibt es fest über dem scrollbaren Text. Setze ich die Position auf relative, wird das Bild zwar an der richtigen Stelle angezeigt. Der Text wird aber an der ursprünglichen Position des Bildes ausgespart und das Bild überdeckt den Text, an der neuen mit top definierten Position.

Danke für eure Hilfe
meles

[Pete]

Hi,

Gib dem Text noch Margin Werte passend zum Bild und es passt.

Pete

[suit]

hast du schon negative Außenabstände versucht?

[meles]

Ich verstehe die beiden Vorschläge nicht wirklich, was soll das ändern (bzw. es ändert nichts). Vl nochmal eine genauere Erklärung.
Oder war mein Problem nicht eindeutig verständlich?

[Pete]

Ich verstehe die beiden Vorschläge nicht wirklich, was soll das ändern (bzw. es ändert nichts). Vl nochmal eine genauere Erklärung.
Oder war mein Problem nicht eindeutig verständlich?

Du willst ein IMG ausserhalb eines P setzen, (warum auch immer)

Jetzt legst du also das Bild über den Text, das willst du aber nicht, der Text soll so zur Seite rücken, als wenn das Bild im P wäre. OK, wenn du nun margin/bzw Padding-Angaben machst kannst du den Text zur Seite schieben, so dass es aussieht als wäre dein Bild im P. In Wirklichkeit schaffst du aber eine Lücke im P und auf diese Lücke platzierst du dein Bild.

Wenn du immer noch nicht klar kommst, ein wenig Code wäre vielleicht sinnvoll. Und es stellt sich immer noch die Frage warum das Bild aus dem Fluss nehmen?

Pete

[meles]

Also hier mein Code:

  
<div id="seite">  
  <img class="bild_in_text" src="bild.jpg" alt="bild"/>  
  <p class="text">Hier steht der Text...</p>  
</div>

und die dazugehörigen CSS Elemente

  
p.text {  
   font-size:0.85em;  
   line-height:140%;  
   text-align:justify;  
   margin:1.5em;  
  
  }  
  
img.bild_in_text {  
   float:left;  
   width:200px;  
   position:relative;  
   top:500px;  
   margin:0.5em;  
  }  
  
#seite {  
    overflow: auto;  
    height:20em;  
    position:relative;  
   }  

Das Bild möchte ich aus dem Fluss nehmen da der Text von PHP aus einer DB geladen wird und ich die Bild-Tags nicht auch im Text haben möchte. Ich könnte sie natürlich automtisch nach einer bestimmten Anzahl von Zeichen einfügen lassen. Mir scheint diese Lösung aber nicht ganz optimal. Womöglich hat jemand einen besseren Vorschlag als meine beiden es sind.

Schöne Grüße
meles

[meles]

Wie schon geschrieben haben die geposteten Vorschläge nicht weitergeholfen (zumindest so wie ich sie angewandt habe). Hat keiner eine Lösung?

Schöne Grüße
meles

[ChrisB]

Hi,

In diesem Text sollen Bilder positioniert werden und vom Text umflossen werden.

Also willst du die Bilder floaten?

MfG ChrisB

[bleicher]

Grüße,

Ich habe ein scrollbares DIV in dem sich Text befindet. In diesem Text sollen Bilder positioniert werden und vom Text umflossen werden. Allerdings sollte das img-Tag nicht zwischen den p-Tags stehen sondern die Position des Bildes soll mit CSS gesteuert werden.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

und

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

relative sind kombinierbar und dürften zum gewünschten Ergebnis führen (tun die fast immer^^)
MFG
bleicher