L'immagine esce fuori dal box...

[ivanhalen]

Salve,
Sto approntando un template tableless che dovrebbe servirmi per i miei futuri CMS, per cui è necessario testare il maggior numero di casi possibili (colonne laterali, tabelle, form, ecc..)

Al momento ho un problema con un'immagine - che tipicamente dovrebbe accompagnare un blocco di testo, ad es. l'anteprima di una notizia - che non ne vuol sapere di stare dentro un box: in altre parole, l'immagine "straripa" dal box verso il basso (con le tabelle non mi era difficile evitare questo straripamento)

La pagina, per chi volesse dare un'occhiata, è qui: http://www.ivanhalen.com/css/

Come posso ovviare al problema?
Grazie...

[catadiottro]

ciao ho anch'io il tuo problema, diciamo che ho trovato una scorciatoia non riuscendo a risolverlo a pieno in questo modo:
inserendo dopo un'immagine (o dopo l'ultimo paragrafo cmq superato dalla lunghezza della foto) un altro paragrafo <p class="blocco"> bla bla </p>
nel css:
.blocco {clear: both;
margin: 0px;}

probabilmente non è una soluzione molto corretta ma perlomeno funziona...aspettando che qualcuno c spieghi una soluzione + adatta

[pidgey]

Guarda qui
http://pro.html.it/articoli/id_518/i...pag_2/pag.html

ciao!

[ivanhalen]

Perfetto, già va molto meglio: tuttavia, se setto la proprietà align="right" per l'immagine (le immagini potranno essere inserite attraverso un RichText Editor, quindi devo purtroppo prevedere anche gli allineamenti a destra), con Internet Explorer il box si allarga di sua sponte sulla sinistra - cosa che non accade con Firefox...

http://www.ivanhalen.com/css/
Esiste un fix anche per questo?

[andrea.paiola]

tenete conto che le immagini non sono elementi di blocco (e nemmeno inline). Sono elementi rimpiazzati: per renderli di blocco dategli display:block

[catadiottro]

ah bene chiarito il mistero...allora non mi sbagliavo d molto.

ivan ma stai usando transitional o strict? perchè mi sembra che l'attributo align="right" non sia consentito in strict.
forse se attribuisci alla foto una classe con attributo float right il problema non dovrebbe + esserci..almeno a me non lo da

[ivanhalen]

@andrea.paiola: ehm... scusami, non sono molt pratico di tableless, in che maniera il tuo discorso si inserisce nel nostro? La soluzione segnalata da pidgey funziona perfettamente: se tolgo quella, pur dando un display:block all'immagine, il problema non si risolve

@catadiottro: effettivamente sto usando un transitional... mi sa che la soluzione più comoda è quella di approntare due classi nel RichText editor, una con float:left e l'altra con float:right, da applicare alle immagini a seconda che vengano messe a sinistra o a destra...

tuttavia ancora non capisco perchè ho quel problema con Explorer...

[catadiottro]

vedi se si risolve usando float rigth ed eliminando align...altrimenti potrebbe essere un problema di padding o margin che t fanno sbordare il tutto con explorer..

[andrea.paiola]

allora... usi dei float? position?
per esempio se usi un float sull'immagine questa non influenzerà le dimensioni del contenitore e così via...

[ivanhalen]

@catadiottro: si, usando solamente il float, se non erro, andava tutto bene e il box non si allargava... (ieri ho fatto tante prove e non ricordo bene cosa funzionava e cosa no)

@andrea.paiola: si, uso dei float per le immagini, mentre position... ehm... non mi pare, ma cos'è? mi potrebbe servire? Se hai tempo, potresti dare un'occhiata al modello: http://www.ivanhalen.com/css/ , magari sbaglio qualcosa

Ragazzi, in ogni caso grazie per l'aiuto: se questa cosa mi riesce, riscrivo le mie applicazioni abbandonando le tabelle :-)