Cornice di immagini a un div

**funcool** · 05-05-2006, 18.48.22

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:

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

**funcool** · 06-05-2006, 09.58.17

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

Il risultato è questo con FireFox:

Il risultato con Internet Explorer è questo:

06-05-2006, 13.47.01

Curiosità...
ma in tutto ciò.. il DOCTYPE è impostato? o è quirksmode? (come sembra a giudicare dall'interpretazione di IE)

**funcool** · 06-05-2006, 15.43.06

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?

Discussione: Cornice di immagini a un div

LinkBack

Strumenti discussione

Display

Cornice di immagini a un div

Regole di scrittura