Grafik abhängig von Textlänge und umfliessender Text

[wuscheck]

Hallo,

ich habe zwei Probleme, bei denen ich nicht recht weiterkomme.

Ich habe eine Textbox per CSS definiert:

  
div.willkommen {  
position: relative;  
display: block;  
left: 410px;  
top: -206px;  
width: 402px;  
height: 350px;  
border: 3px solid #542700;  
padding: 15px;  
background: #FFF;  
color: #000;  
font: 12px Arial,Verdana,Helvetica,sans-serif;  
text-align: justify;  
}  

und eine Grafik:

  
div.pc {  
position: relative;  
float: right;  
left: 5px;  
top: -30px;  
}  

Nun möchte ich eine Grafik am unteren rechten Rand der Textbox anzeigen lassen. Diese Grafik soll "mitwandern" sofern sich die Grösse der Textbox ändert. Ausserdem soll - falls der Text an die Grafik heranreicht, der Text die Grafik "umfliessen".

Hier der Code auf der Seite:

  
<div class="willkommen">  
Lorem ipsum dolor sit amet...  
<div class="pc">  
<img src="./images/pc.gif" border="0">  
</div>  
</div>  

Das Ergebnis derzeit: Die Grafik wandert nicht mit bei einem längeren Text und der Text "umfliesst" auch nicht die Grafik. Was mache ich falsch?

Vielen Dank im Voraus.

wuscheck

[Felix Riesterer]

Lieber wuscheck,

Ausserdem soll - falls der Text an die Grafik heranreicht, der Text die Grafik "umfliessen".

soetwas gelingt nur mit float.

Liebe Grüße,

Felix Riesterer.

[wuscheck]

Lieber wuscheck,

Ausserdem soll - falls der Text an die Grafik heranreicht, der Text die Grafik "umfliessen".

soetwas gelingt nur mit float.

Liebe Grüße,

Felix Riesterer.

Hallo Felix,

im Grafik-Teil habe ich doch float: right; drinnne?!?

[Felix Riesterer]

Lieber wuscheck,

Ausserdem soll - falls der Text an die Grafik heranreicht, der Text die Grafik "umfliessen".

soetwas gelingt nur mit float.

im Grafik-Teil habe ich doch float: right; drinnne?!?

woher soll ich das sehen? Du schreibst etwas von div.pc und nicht von img. Da ich beim ersten lesen Deinen HTML-Code ignoriert habe, war meine Antwort entsprechend kurz.

Warum musst Du das <img> in ein <div>-Element packen? Und warum muss "willkommen" auch ein <div> sein, wo es doch so gerne ein <p> sein möchte? Und wenn "willkommen" ein <p> sein darf, dann kann das Bildchen direkt in diesem <p> stehen und selbst die Klasse "pc" erhalten und muss nicht mehr eigens in eine hässliche <div>-Tüte.

Wenn Du das hast, dann stelle es einmal online, damit man sich das in Gänze anschauen kann!

Liebe Grüße,

Felix Riesterer.

[Gernot Back]

Hallo wuscheck,

Nun möchte ich eine Grafik am unteren rechten Rand der Textbox anzeigen lassen. Diese Grafik soll "mitwandern" sofern sich die Grösse der Textbox ändert. Ausserdem soll - falls der Text an die Grafik heranreicht, der Text die Grafik "umfliessen".

Ich denke, dass du ein untenbündig rechts oder links ausgerichtetes, an der jeweils anderen Seite vom umgebenden Textblock umflossenens Element nur mit JavaScript hinbekommst. Auf dieser Testseite habe ich das mal mit einer links unten ausgerichteten Grafik gemacht. Dabei wird onload bzw. onresize der Seite das floatende Element (die rechts oder links ausgreichtete Grafik) so lange von Wort zu Wort im Textblock verschoben, bis sie eben an der Unterkante des Textblocks liegt.

Schwebt dir etwas in der Art vor?

Ob ich diesen rechenintensiven Ansatz wirklich empfehlen soll, weiß ich allerdings auch nicht.

Gruß Gernot