[CSS] problema posizionamento div

dierre · 05-05-2006, 09:44

Salve, questa è la struttura html della pagina:

Codice:

<body>
<div id="container">

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

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

questo è il css relativo:

Codice:

#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 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

Codice:

<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:

Quote:

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

Quote:

Originariamente inviato da selenio

Codice:

<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

Quote:

Originariamente inviato da h1jack3r

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

Codice:

<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

05-05-2006, 09:44	#1
dierre Senior Member Iscritto dal: Sep 2004 Città: Interamnia Urbs Messaggi: 2126	[CSS] problema posizionamento div Salve, questa è la struttura html della pagina: Codice: <body> <div id="container"> <div id="newstime"> <div id="news"> </div></div> <div id="footer"> </div> </body> questo è il css relativo: Codice: #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? __________________ Un wormhole (buco di tarlo, in italiano), detto anche Ponte di Einstein-Rosen, è una ipotetica caratteristica topologica dello spaziotempo che è essenzialmente una "scorciatoia" da un punto dell'universo a un altro, che permetterebbe di viaggiare tra di essi più velocemente di quanto impiegherebbe la luce a percorrere la distanza attraverso lo spazio normale. Go to a Wormhole

05-05-2006, 14:40	#3
dierre Senior Member Iscritto dal: Sep 2004 Città: Interamnia Urbs Messaggi: 2126	ma padding solo o padding-bottom? __________________ Un wormhole (buco di tarlo, in italiano), detto anche Ponte di Einstein-Rosen, è una ipotetica caratteristica topologica dello spaziotempo che è essenzialmente una "scorciatoia" da un punto dell'universo a un altro, che permetterebbe di viaggiare tra di essi più velocemente di quanto impiegherebbe la luce a percorrere la distanza attraverso lo spazio normale. Go to a Wormhole

05-05-2006, 15:03	#4
selenio Senior Member Iscritto dal: Nov 2001 Città: Nato a Salerno & Vivo a Roma Messaggi: 840	Codice: <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. __________________

05-05-2006, 22:13	#10
h1jack3r Senior Member Iscritto dal: May 2002 Città: somewhere in Europe Messaggi: 2554	Si ti conviene fare una cosa del genere Codice: <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

05-05-2006, 11:31	#2
h1jack3r Senior Member Iscritto dal: May 2002 Città: somewhere in Europe Messaggi: 2554	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 il problema è trattato in maniera molto chiara. Ciao

05-05-2006, 17:54	#8
h1jack3r Senior Member Iscritto dal: May 2002 Città: somewhere in Europe Messaggi: 2554	ah si ho capito...è il problema inverso! non si sovrappongono sopra ma sotto...non saprei come risolverlo

Strumenti
Mostra una versione stampabile Invia questa pagina per email