» Altezza div in base al contenuto

alanshore · 04-01-10, 11:50

Buongiorno,
premetto che ho già provato a cercare un thread simile sia su questo forum che sui gruppi usenet senza trovare riscontro...
Ho il seguente codice xhtml:

Codice:

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "rimosso"> 
<html>
<head>
       <link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>

<div id="corpo">
       <div id="testa"></div>
       <div id="contenuto">
               <div id="nav">
                       <a href="#">Homepage</a>
                       <a href="#">Homepage</a>
                       <a href="#">Homepage</a>
                       <a href="#">Homepage</a>
               </div>
               <div id="pippo">
                       <p>test<br>test<br>test</p>
               </div>

       <div class="clearfix"></div>
       </div>
       <div id="piede"></div>
</div>
</body>
</html>

mentre il codice ccs è il seguente:

Codice:

#corpo{ 
        width : 895px; 
        margin-left : auto; 
        margin-right : auto; } 
#testa{ 
        width : 895px; 
        height : 85px; 
        margin-top : 20px; 
        background-image :  url('../img/corpo_testa.png'); 
        background-position : left top; 
        background-repeat : no-repeat; } 
#contenuto{ 
        position                                : relative; 
        height                                  : auto; 
        width                                   : 895px; 
        background-image                : url('../img/corpo_corpo.png'); 
        background-position             : left top; 
        background-repeat               : repeat-y; } 
#piede{ 
        width                                   : 895px; 
        height                                  : 39px; 
        background-image                : url('../img/corpo_piede.png'); 
        background-position             : left top; 
        background-repeat               : no-repeat; } 
#contenuto #nav{ 
        position                                : relative; 
        float                                   : left; 
        width                                   : 250px; } 
#contenuto #pippo{ 
        position                                : relative; 
        float                                   : left; 
        width                                   : 600px; } 

.clearfix:after { 
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;}

Il problema è che l'altezza nè del div nav e nè del div pipposi adatta automaticamente al contenuto che si sovrappone, addirittura al div piede.
Ho provato ad impostare il valore height : auto; senza ottenere alcun successo.
Qualcuno è in grado di dirmi dove sbaglio?
Grazie,
Alan.

Meryk · 08-01-10, 21:47

...sarà che senza immagini, non riesco a cogliere il problema... ma provando il codice si ridimensiona e non si sovrappone, riesci a spiegarti meglio?

alanshore · 14-01-10, 21:33

Ciao e grazie per avermi risposto.
Ho provato ad inserire un immagine ma mi da errore, se vuoi qui trovi un screenshot di quello che mi seccude...
mdbsas.it/tmp/immagine.jpg
(ovviamente devi aggiungere h t t p : / / w . w . w)
Grazie ancora,
AS

04-01-10, 11:50	#1 (permalink)
alanshore User Newbie Data di registrazione: Jan 2010 Messaggi: 6	Altezza div in base al contenuto Buongiorno, premetto che ho già provato a cercare un thread simile sia su questo forum che sui gruppi usenet senza trovare riscontro... Ho il seguente codice xhtml: Codice: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "rimosso"> <html> <head> <link rel="stylesheet" type="text/css" href="../css/main.css"> </head> <body> <div id="corpo"> <div id="testa"></div> <div id="contenuto"> <div id="nav"> <a href="#">Homepage</a> <a href="#">Homepage</a> <a href="#">Homepage</a> <a href="#">Homepage</a> </div> <div id="pippo"> <p>test<br>test<br>test</p> </div> <div class="clearfix"></div> </div> <div id="piede"></div> </div> </body> </html> mentre il codice ccs è il seguente: Codice: #corpo{ width : 895px; margin-left : auto; margin-right : auto; } #testa{ width : 895px; height : 85px; margin-top : 20px; background-image : url('../img/corpo_testa.png'); background-position : left top; background-repeat : no-repeat; } #contenuto{ position : relative; height : auto; width : 895px; background-image : url('../img/corpo_corpo.png'); background-position : left top; background-repeat : repeat-y; } #piede{ width : 895px; height : 39px; background-image : url('../img/corpo_piede.png'); background-position : left top; background-repeat : no-repeat; } #contenuto #nav{ position : relative; float : left; width : 250px; } #contenuto #pippo{ position : relative; float : left; width : 600px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} Il problema è che l'altezza nè del div nav e nè del div pipposi adatta automaticamente al contenuto che si sovrappone, addirittura al div piede. Ho provato ad impostare il valore height : auto; senza ottenere alcun successo. Qualcuno è in grado di dirmi dove sbaglio? Grazie, Alan.

08-01-10, 21:47	#2 (permalink)
Meryk Esperta Data di registrazione: Oct 2006 Messaggi: 217	...sarà che senza immagini, non riesco a cogliere il problema... ma provando il codice si ridimensiona e non si sovrappone, riesci a spiegarti meglio?
	__________________ --> FAQ: Pillole sui Css!! :D Acqua Liofilizzata

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

14-01-10, 21:33	#3 (permalink)
alanshore User Newbie Data di registrazione: Jan 2010 Messaggi: 6	Ciao e grazie per avermi risposto. Ho provato ad inserire un immagine ma mi da errore, se vuoi qui trovi un screenshot di quello che mi seccude... mdbsas.it/tmp/immagine.jpg (ovviamente devi aggiungere h t t p : / / w . w . w) Grazie ancora, AS

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email