le formule magiche

Footer

Il footer, tante volte, viene trascurato, perchè è l'ultimo elemento visibile della pagina.
Un bel footer, invece, ben strutturato e navigabile, è importante, perchè, quando il visitatore arriva in fondo alla pagina, spesso cerca il modo di comunicare, o di usufruire dei servizi.
Questa è esattamente la funzione del footer: presentare in modo ordinato e logico le voci che possono essere utili.

Vi presento, quindi, una serie di footer con diverse funzionalità.

NOTA: le risorse sono accessibili solo ai membri

Non sei ancora membro? Guarda questa Breve anteprima video

Regole utili:

Footer sempre a fondo pagina:

Negli schermi più grandi, se il contenuto della pagina non riempie lo schermo in altezza, il footer rimane sospeso a mezz'aria.
Per risolvere il problema, basta applicare le regole per avere l'altezza pagina al 100% che trovate nelle soluzioni CSS.

Footer fisso

Per avere un footer fisso, invece, cioè posizionato a fondo pagina e sempre visibile se la pagina scorre, applicate queste regole:
#fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    background: #000;
    color: #FFF;
    width: 100%;
    padding: 15px 0;
}

Naturalmente, il padding, il colore dello sfondo e del testo possono essere personalizzati.

Footer uno: tre colonne - logo, links, dati, social - HTML, CSS, JS

Footer due: due colonne - logo, links, social, form - HTML, CSS, JS, PHP

Footer tre: due colonne - links, search box - HTML, CSS, JS

Footer quattro: due colonne - links, social - HTML, CSS, JS

Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 

Modulo di contatto per i membri

Argomenti del sito correlati:

Il footer Close