footer in fondo alla pagina , trovato come fare, ma non capisco una cosa !

aeroxr1 · 09-11-2011, 00:25

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/486...o-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 .

Codice:

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 :

Codice:

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 .

ConRoe · 09-11-2011, 12:16

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

Codice:

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à.

E' un ragionamento un po' aggrovigliato ma è molto semplice (3° principio della congruenza FTW!!

)

aeroxr1 · 09-11-2011, 12:41

Quote:

Originariamente inviato da ConRoe

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

ConRoe · 09-11-2011, 16:44

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.

aeroxr1 · 09-11-2011, 20:15

Quote:

Originariamente inviato da ConRoe

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 ?

c'è un sito che spiega i vari tipi di hack e come funzionano di preciso ?

ConRoe · 09-11-2011, 21:42

Quote:

Originariamente inviato da aeroxr1

e se non mettevo questo margine negativo e impostavo l'altezza del container al 100% perchè non sarebbe funzionato ?

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

che c'entra l'altezza del container?

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

aeroxr1 · 10-11-2011, 01:48

Quote:

Originariamente inviato da ConRoe

se non metti il margine negativo non vedi il footer

che c'entra l'altezza del container?

scusa ma queste parti non servivano a settare l'altezza del container ?

Codice:

   min-height: 100%;

    height: auto !important;

    height: 100%;

Quote:

Originariamente inviato da ConRoe

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

in css che cosa vuol dire "!important" ?

ConRoe · 10-11-2011, 11:08

Codice:

    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/470...ord-important/

aeroxr1 · 10-11-2011, 20:25

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-tutori...e-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 ..

09-11-2011, 00:25	#1
aeroxr1 Senior Member Iscritto dal: Mar 2006 Messaggi: 2056	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/486...o-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 . Codice: 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 : Codice: 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 .

09-11-2011, 12:16	#2
ConRoe Senior Member Iscritto dal: Dec 2006 Messaggi: 414	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 Codice: 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à. E' un ragionamento un po' aggrovigliato ma è molto semplice (3° principio della congruenza FTW!! ) __________________ Concluso positivamente con: 2fst4rc, guns81, fernando59, Kewell, Guidoch, coontrol86, Holly_GR, siemens, WildCat Hendrix, Thommy_Yorke, davidep85, fabiannit, semmy83, TheDoctor1983, uazzamerican "Un androide è per sempre" Ultima modifica di ConRoe : 09-11-2011 alle 16:45.

09-11-2011, 16:44	#4
ConRoe Senior Member Iscritto dal: Dec 2006 Messaggi: 414	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. __________________ Concluso positivamente con: 2fst4rc, guns81, fernando59, Kewell, Guidoch, coontrol86, Holly_GR, siemens, WildCat Hendrix, Thommy_Yorke, davidep85, fabiannit, semmy83, TheDoctor1983, uazzamerican "Un androide è per sempre" Ultima modifica di ConRoe : 09-11-2011 alle 16:47. Motivo: dimenticavo la questione dell'auto height XD

10-11-2011, 11:08	#8
ConRoe Senior Member Iscritto dal: Dec 2006 Messaggi: 414	Codice: 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/470...ord-important/ __________________ Concluso positivamente con: 2fst4rc, guns81, fernando59, Kewell, Guidoch, coontrol86, Holly_GR, siemens, WildCat Hendrix, Thommy_Yorke, davidep85, fabiannit, semmy83, TheDoctor1983, uazzamerican "Un androide è per sempre"

10-11-2011, 20:25	#9
aeroxr1 Senior Member Iscritto dal: Mar 2006 Messaggi: 2056	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-tutori...e-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 .. Ultima modifica di aeroxr1 : 10-11-2011 alle 21:18.

Strumenti
Mostra una versione stampabile Invia questa pagina per email