PDA

View Full Version : [CSS] problema posizionamento div

dierre
05-05-2006, 09:44
Salve, questa è la struttura html della pagina:



<body>
<div id="container">

<div id="newstime">
<div id="news">
</div></div>

<div id="footer">
</div>
</body>



questo è il css relativo:



#news {
position: relative;
background: #E6E6E6;
border: solid 1px #000;
margin: 0px auto;
font-family: verdana;
font-size: 11px;
padding: 6px;
}

#newstime { position: relative;
margin: 0px auto;
font-family: verdana;
font-size: 11px;
padding: 6px;
}

#container { position: relative;
width: 50%;
border: solid 1px #000;
margin: 0px auto;
font-family: verdana;
font-size: 11px;
padding: 6px;
min-height: 600px;
}

#footer { position: absolute;
bottom: 0px;
width: 100%;
}



Quello che vorrei è che #footer rimanesse sempre appunto al bottom del div esterno #container. C'è un problema che non riesco a risolvere.
Così #footer rimane dove voglio io ma quando l'height delle news supera o raggiunge l'altezza minima, il #footer rimane sempre al bottom del div esterno ma si accavalla all'ultima news. Come posso risolvere il problema?
h1jack3r
05-05-2006, 11:31
CIao si c'è un modo, devi aggiungere un padding al contenuto in modo che il footer stia sempre in fondo e non si accavalli mai.
Se guardi qui (http://www.constile.org/template/nuovo_layout_a_tre_colonne/) il problema è trattato in maniera molto chiara.
Ciao
dierre
05-05-2006, 14:40
ma padding solo o padding-bottom?
selenio
05-05-2006, 15:03
<body>
<div id="container">

<div id="newstime">
<div id="news">
</div></div>

<div id="footer">
</div>
</body>


Non so se importante ma ti manca un div di chiusura.
h1jack3r
05-05-2006, 15:27
dal link che ti ho postato prima:


Lo svantaggio consiste nel fatto che la colonna centrale deve essere sempre più alta di quelle laterali. Questo vincolo in genere può essere facilmente rispettato, poiché la colonna centrale è quella che presenta i maggiori contenuti. Qualora il vincolo non possa essere soddisfatto, è sufficiente aggiungere del padding inferiore (padding-bottom) alla colonna centrale. Il vincolo è dovuto al fatto che le colonne laterali sono posizionate in maniera assoluta, dunque non sono più in grado di influire sulla disposizione degli altri box della pagina. Il piè di pagina si trova posto sotto il corpo, la cui altezza è determinata da quella della colonna centrale (priva di posizionamento assoluto) e del tutto indifferente all'altezza delle colonne laterali, poiché posizionate in maniera assoluta. Se il vincolo non fosse rispettato, le colonne laterali si sovrapporrebbero al footer.
dierre
05-05-2006, 16:41
<body>
<div id="container">

<div id="newstime">
<div id="news">
</div></div>

<div id="footer">
</div>
</body>


Non so se importante ma ti manca un div di chiusura.

No tranquillo, l'avevo scritto a braccio, il codice nella pagina reale ha il div mancante ^^

@ h1jack3r: ho letto quel link, se pur molto interessante non risolve il mio problema, almeno credo. E' strutturato in maniera diversa, cerco di spiegarmi meglio.
Nel link che tu mi hai dato non è riscontrato il mio problema perché quel footer non funziona come nel mio caso.
In pratica il div contenitore ha un'altezza minima, ora succede che il div footer voglio che rimanga, come posizione (avendo una ventina di px come altezza) in basso attaccato al bordo inferiore del contenitore.
Come l'ho strutturato io funziona rispetto al contenitore appunto, ma c'è un problema quando le news fanno aumentare l'altezza del div contenitore perché a quel punto il footer rimane sì attaccato al bordo inferiore, ma se ne strafrega dei div news che a quel punto gli passano sopra. In pratica come l'ho strutturato io il css se il numero dei div news provoca l'aumento dell'altezza del div contenitore, l'ultimo div news e il div footer si sovrascrivono fra di loro.

In quello del tuo link non c'è quel problema perché in pratica il div starà sempre sotto la colonna centrale (cosa che avviene automaticamente quando non si specifica una position diversa da static).
dierre
05-05-2006, 17:17
ecco l'errore
h1jack3r
05-05-2006, 17:54
ah si ho capito...è il problema inverso! non si sovrappongono sopra ma sotto...non saprei come risolverlo
dierre
05-05-2006, 19:22
ah si ho capito...è il problema inverso! non si sovrappongono sopra ma sotto...non saprei come risolverlo

esattamente il contrario, l'unico modo che ho trovato è quello di inserire il div footer fuori dal contenitore così rimane sempre dove voglio. In fondo i credits van sempre fuori dal div principale...va anche bene così.

Se qualcuno ha un'idea mi faccia sapere. :*
h1jack3r
05-05-2006, 22:13
Si ti conviene fare una cosa del genere


<body>

<div id="container">

<div id="newstime">
------newstime------
</div>
<div id="news">
------news-------
</div>


</div>


<div id="footer">
</div>

</body>






in modo da tenere il footer fuori dal contenuto