Cornice di immagini a un div

Printable View

05-05-2006, 18.48.22
funcool

Cornice di immagini a un div

Ho questo codice:

Codice HTML:

<div style="width:24em; float:left; text-align:center; margin-top:2em;"> <div style="width:23em;"> <div style="position:relative; margin-left:0.5em; margin-right:0.5em;"><img src="sopra.jpg" style="width:23em; height:2em;" alt=""><div style="position:absolute; left:2em; top:0.4em;">Bacheca</div></div> <div style="float:left;"><img src="sinistra.jpg" style="width:0.5em; height:10em;" alt=""></div> <div style="float:left; margin-left:1em; margin-right:1em; width:20em; height:10em; overflow:auto;">Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va</div> <div style="float:left;"><img src="destra.jpg" style="width:0.5em; height:10em;" alt=""></div> <div style="clear:left;"><img src="sotto.jpg" style="width:23em; height:1em;" alt=""></div> </div> </div>

Ma il risultato è questo:
http://img182.imageshack.us/img182/2521/layout8uy.jpg

Come posso fare per formare una cornice intorno al testo principale che non sia spostata?
05-05-2006, 19.11.58

Codice HTML:

<div style="width:24em; float:left; text-align:center; margin-top:2em;"> <div style="width:23em;"> <div style="position:relative; margin-left:0em; margin-right:0.5em;"> <img src="sopra.jpg" style="width:23em; height:2em;" alt=""> <div style="position:absolute; left:2em; top:0.4em;">Bacheca</div> </div> <div style="float:left;"> <img src="sinistra.jpg" style="width:0.5em; height:10em;" alt=""> </div> <div style="float:left; margin-left:1em; margin-right:1em; width:20em; height:10em; overflow:auto;"> Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va Ciao mondo come va </div> <div style="float:left;"> <img src="destra.jpg" style="width:0.5em; height:10em;" alt=""></div> <div style="clear:left;"> <img src="sotto.jpg" style="width:23em; height:1em;" alt=""> </div> </div> </div>

Così a me funziona.. vedi tu!

Ho modificato margin-left:0.5em; in margin-left:0em; nel div sopra l'immagine sopra.jpg
06-05-2006, 09.58.17
funcool

L'ho provato con FireFox e funziona ma con Internet Explorer no.

Il risultato è questo con FireFox:
http://img223.imageshack.us/my.php?image=firefox3ea.jpg

Il risultato con Internet Explorer è questo:
http://img223.imageshack.us/my.php?image=ine8jl.jpg
06-05-2006, 13.47.01

Curiosità...
ma in tutto ciò.. il DOCTYPE è impostato? o è quirksmode? (come sembra a giudicare dall'interpretazione di IE)
06-05-2006, 15.43.06
funcool

Il doctype è il seguente:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

EDIT: Ho risolto mettendo il float a right e non a left per l'immagine di destra e riducendo la larghezza del div centrale che contiene il testo. In questo modo però il div centrale rimane troppo stretto e lascia molto spazio ai lati, non c'è modo di riuscire ad allargarlo raggiungendo il limite delle immagini laterali?