View Full Version : footer in fondo alla pagina , trovato come fare, ma non capisco una cosa !
Ciao,
non capisco una cosa relativa alla impaginazione della mia pagina con i css .
Vi spiego il problema e la soluzione che ho trovato online :
in pratica io vorrei fare un layout formato da due colonne , header e footer ; quest'ultimo vorrei che fosse sempre visualizzato in fondo alla pagina anche quando i contenuti delle due colonne sono pochi .
Per far ciò ho trovato la seguente soluzione :
http://css.html.it/guide/lezione/4866/sticky-footer-posizionare-il-footer-in-fondo-alla-pagina/
ho provato ad effettuare le modifiche descritte nella pagina e ottengo proprio ciò che volevo solo che vorrei capire delle parti di codice che non mi sono molto chiare .
html, body {
margin:0; /* aggiunto rispetto al codice riportato dal sito*/
height: 100%;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#footer, #push {
height: 50px;
clear: both;
}
mi potreste spiegare a cosa serve inserire un margine inferiore negativo nel container ?
perchè l'inserimento del <div> push vuoto con height 50px può risolvere il mio problema ?
le righe di codice da #container in poi non le comprendo , cioè min-height imposto l'altezza minima del container , perchè non basta mettere height: 100% ?
un altra cosa :
html, body {
margin:0; /* aggiunto rispetto al codice riportato dal sito*/
height: 100%;
}
perchè non basta scrivere queste proprietà per il body ma bisogna specificare anche html ?
Mi scuso per le tante (troppe) domande .
La cosa è molto semplice.
Tu imposti il #container con altezza minima pari al 100% e ingrandimento automatico (nel #container "height" è ripetuto due volte perchè si tratta di un workaround per gestire la stessa proprietà su quel simpaticone di IE6); inoltre dai un margine inferiore negativo a #container in modo che, qualunque contenuto tu vada ad inserire nel div, hai sempre e comunque 50px (nel nostro caso) liberi per metterci il footer.
A questo punto imposti #push (che è contenuto in #container, a differenza di #footer che è sullo stesso piano di #container!!) che è un div (presumo vuoto) che "schiaccia" in giu il footer in modo che non si accavalli con nessun contenuto.
Per quanto riguarda il discorso di
html, body {
height: 100%;
}
devi pensarla in questo modo: tu fondamentalmente vuoi che <body> abbia height: 100%. La domanda si pone ora: 100% rispetto a cosa? Risposta: dato che <body> è un elemento figlio di <html>, con quell'istruzione tu vai a dire a <body> di occupare il 100% dell'altezza di <html>.
Quindi se anche a <html> è stato detto di occupare il 100% dell'altezza del suo "genitore" (ovvero dell'intera pagina, dato che non esistono tag più "in alto" in gerarchia rispetto a <html>), <body> prenderà il 100% dello spazio di <html> (che corrisponde a sua volta al 100% dello spazio pagina), altrimenti non lo farà. :D
E' un ragionamento un po' aggrovigliato ma è molto semplice (3° principio della congruenza FTW!! :asd: )
La cosa è molto semplice.
Tu imposti il #container con altezza minima pari al 100% e ingrandimento automatico (nel #container "height" è ripetuto due volte perchè si tratta di un workaround per gestire la stessa proprietà su quel simpaticone di IE6); inoltre dai un margine inferiore negativo a #container in modo che, qualunque contenuto tu vada ad inserire nel div, hai sempre e comunque 50px (nel nostro caso) liberi per metterci il footer.
A questo punto imposti #push (che è contenuto in #container, a differenza di #footer che è sullo stesso piano di #container!!) che è un div (presumo vuoto) che "schiaccia" in giu il footer in modo che non si accavalli con nessun contenuto. L'inserimento del #push non ti risolve il problema: è solo una protezione.
grazie ! molto gentile :) il secondo punto l'ho capito perfettamente :)
il problema resta sulla prima parte..
mi viene un dubbio sui margini : se lo imposto negativo il blocco #container vorrebbe dire che va di 50px al di sotto del blocco body ? non capisco :(
mi potresti rispiegare anche la questione dell'ingrandimento automatico ? non ho capito bene come funziona questa cosa del workaround :doh:
Se applichi un margine negativo a un elemento senza float, il margine non si comporta come un vero e proprio margine (muovendo il div correlato) ma "tira in su" i div che metti dopo.
Per questo hai poi bisogno di un div #push che spinga il footer al suo posto per evitare che si sovrapponga al contenuto presente nel #container. :).
Per quanto riguarda il "workaround", non è nient'altro che un "hack" per far funzionare l'auto ingrandimento dei div anche su IE5.x e IE6... Solo per mantenere un po' di retrocompatibilità, niente di che.
Se applichi un margine negativo a un elemento senza float, il margine non si comporta come un vero e proprio margine (muovendo il div correlato) ma "tira in su" i div che metti dopo.
Per questo hai poi bisogno di un div #push che spinga il footer al suo posto per evitare che si sovrapponga al contenuto presente nel #container. :).
Per quanto riguarda il "workaround", non è nient'altro che un "hack" per far funzionare l'auto ingrandimento dei div anche su IE5.x e IE6... Solo per mantenere un po' di retrocompatibilità, niente di che.
e se non mettevo questo margine negativo e impostavo l'altezza del container al 100% perchè non sarebbe funzionato ? :confused:
c'è un sito che spiega i vari tipi di hack e come funzionano di preciso ? :)
e se non mettevo questo margine negativo e impostavo l'altezza del container al 100% perchè non sarebbe funzionato ? :confused:
c'è un sito che spiega i vari tipi di hack e come funzionano di preciso ? :)
se non metti il margine negativo non vedi il footer :asd:
che c'entra l'altezza del container? :confused:
per quanto riguarda gli "hack", che io sappia non credo esista un sito... più che altro ogni tanto vedrai che IE interpreta alcune parti di codice a suo modo: ti basta una googlata per capire il trucco per sistemare la situazione... poi quando hai un po' di esperienza lo capisci da te dove mettere le mani :D
se non metti il margine negativo non vedi il footer :asd:
che c'entra l'altezza del container? :confused:
scusa ma queste parti non servivano a settare l'altezza del container ?
min-height: 100%;
height: auto !important;
height: 100%;
:confused:
per quanto riguarda gli "hack", che io sappia non credo esista un sito... più che altro ogni tanto vedrai che IE interpreta alcune parti di codice a suo modo: ti basta una googlata per capire il trucco per sistemare la situazione... poi quando hai un po' di esperienza lo capisci da te dove mettere le mani :D
in css che cosa vuol dire "!important" ? :stordita:
min-height: 100%;
height: auto !important;
height: 100%;
servono a settare l'altezza del #container. non il resto ;)
per quanto riguarda la key !important dai un occhio qua
http://css.html.it/guide/lezione/4703/la-keyword-important/
:)
grazie mille ! sei stato gentilissimo !
ora se posso vi faccio un altra domandina :)
in pratica ho creato la struttura della mia pagina formata da :
top,
colonna menu,
e colonna per il contenuto
footer
a queste poi ho applicato il css sopra scritto per far si che il footer rimanga sempre in fondo pagina, barra menu a larghezza fissa con float left e parte per il contenuto senza dimensione fissa.
Nella colonna del menu vi ho messo questa tipologia di menu :
http://css.flepstudio.org/css-tutorials/menu-css-drop-down-verticale-di-base.html
l'ho messo cosi al volo poi lo ricambierò giusto per vedere una cosa , pensavo che implementando un menu del genere portasse al seguente errore:
all'apertura delle sottosezioni pensavo che queste ultime andassero a finire sotto il contenuto della pagina (e quindi non visualizzandole correttamente) , mentre in realtà i vari menu come giusto che sia fuoriescono si dallo spazio dedicato al menu , ma restano su un livello superiore rispetto al div #contenuto .
Come mai accade questa cosa ?
non so se mi sono spiegato bene .. :(
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.