Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Magia dello Sticky Footer
Forum - HTML / CSS - Magia dello Sticky Footer

Avatar
cuore napoletano (Normal User)
Pro


Messaggi: 129
Iscritto: 03/02/2011

Segnala al moderatore
Postato alle 11:00
Martedì, 04/12/2012
Salve a tutti,
cercavo un codice per ottenere l'effetto di avre il footer sempre a fondo pagina e finalmente ho letto un articolo riguardante lo Sticky Footer.L'ho provato e funziona benissimo ed è ben supportato da molti browser.
Ecco il codice:

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Nascondi a IE su Mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* Fine Nascondi a IE su Mac */



Chiedo se qualcuno potrebbe gentilmente spiegarmi il funzionamento di queste linee di codice.
Ringrazio a tutti.

PM Quote
Avatar
Roby94 (Member)
Guru


Messaggi: 1170
Iscritto: 28/12/2009

Segnala al moderatore
Postato alle 21:23
Giovedì, 06/12/2012
Vedo che nessuno sa risponderti in modo preciso, allora ci provo io in modo molto blando. Quel codice è l'equivalente dell' aggiungere un
Codice sorgente - presumibilmente HTML / CSS

  1. <div style="clear:both;"></div>


in fondo ad un div contente elementi con l'attributo float questo fa in modo che il div prenda l'altezza effettiva del suo contenuto. Spesso si applica nel caso in cui il div padre presenti un background, infatti nel caso un contenitore contenga solo elementi float prenderà un altezza di 0 dando l'idea di non esistere. Se analizziamo il codice ci accorgiamo che esso inserirà uno pseudo elemento con contenuto "." dopo il blocco con la classe clearfix, questo pseudo elemento si occuperà di ripristinare la consistenza del div padre. Per capirlo a pieno devi pensare che float estrae l'elemento della pagina e lo posiziona come se fosse fluttuante sulla pagina non influendo piu sul padre, clear invece "riporta i piedi per terra" all'elemento.
Nel tuo caso pero non capisco bene per cosa tu l'abbia usato....
Float non è un attributo di facile comprensione pero spero di aver reso l'idea del suo funzionamento e della classe clearfix.
Se hai bisogno di chiarimenti prova a chiedere e vediamo se posso aiutarti.

Ultima modifica effettuata da Roby94 il 06/12/2012 alle 21:24
PM Quote
Avatar
cuore napoletano (Normal User)
Pro


Messaggi: 129
Iscritto: 03/02/2011

Segnala al moderatore
Postato alle 9:10
Sabato, 13/04/2013
grazie mille

PM Quote