[HTML] Immagini e paragrafi

[biffuz]

Sono incappato in questo problema: voglio scrivere un paragrafo con dentro un'immagine, allineata a destra o a sinistra, e dare un colore di sfondo e un bordo all'intero paragrafo, compresa l'immagine. Non c'è nessun problema se il testo è più lungo dell'immagine, ma se l'immagine è più lunga, questa "sfora" sotto il bordo e va pure nel paragrafo dopo...

Qualcuno conosce una soluzione??

[phlebotomus]

Non so se ho capito bene il problema... ma proverei con la proprietà CSS clear applicata al paragrafo o cmq all'elemento di tipo block successivo al tuo paragrafo con l'immagine.
Ovvero se il tuo paragrafo più o meno è così:
<p style="background-color:red; border:1px solid green"><img src="url_immagine" style="float:left" />testo del tuo paragrafo</p>
e dopo c'è un tag <p> o altro block (tipo H, TABLE, DIV, ecc.) ci metterei:
<p style="clear:both">testo del paragrafo successivo a quello con l'immagine</p>
Questa proprietà clear praticamente dice al browser che il paragrafo in questione non deve essere sovrapposto da niente.

[biffuz]

Questa proprietà clear praticamente dice al browser che il paragrafo in questione non deve essere sovrapposto da niente.

clear risolve il problema della sovrapposizione dei paragrafi, ma purtroppo non quello dello sfondo, che viene applicato solo al testo (e idem il bordo, non incornicia sia il testo che l'immagine ma solo il testo).

Possibile che non ci abbiano pensato?? L'unica soluzione che mi viene in mente è affidarsi ad una table...

[phlebotomus]

clear risolve il problema della sovrapposizione dei paragrafi
Hai ragione...
Allora lascia stare clear e metti la proprietà height = pixel della foto in altezza al paragrafo (or ora testato e funzionante in FF2, IE7, IE6, IE5.5, Opera9) :)
<p style="background-color:red; border:1px solid green;
padding:10px; height:793px">
<img src="url_immagine" width="606" height="793" style="float:left; margin-right:10px" />
testo
</p>
<p>testo del paragrafo successivo a quello con l'immagine</p>

[biffuz]

Hai ragione...
Allora lascia stare clear e metti la proprietà height = pixel della foto in altezza al paragrafo (or ora testato e funzionante in FF2, IE7, IE6, IE5.5, Opera9) :)


Ci avevo pensato anch'io, ma non posso perché la pagina è generata da uno script che prende il testo dei paragrafi da un database... tra l'altro il testo comprende anche tutti i relativi tag HTML e quindi lo script non sa se c'è dentro un'immagine.

Mi viene voglia di scrivere al W3 e far loro notare il problema, così che inseriscano una soluzione nelle specifiche HTML 5...

[phlebotomus]

Ci avevo pensato anch'io, ma non posso
In questi casi vige la regola del male minore, che si chiama TABLETRTD :D

[biffuz]

In questi casi vige la regola del male minore, che si chiama TABLETRTD :D

Temo proprio di sì... grazie comunque per l'aiuto :)