[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]

Originariamente inviato da phlebotomus

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]

Originariamente inviato da biffuz

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]

Originariamente inviato da phlebotomus

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]

Originariamente inviato da biffuz

Ci avevo pensato anch'io, ma non posso

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

[biffuz]

Originariamente inviato da phlebotomus

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

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