Creiamo un fixed footer, elemento fisso a fondo pagina coi CSS

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Il design delle pagine Web attraverso elementi fissi e/o flottanti sta prendendo sempre più piede su Internet, visto il moltiplicarsi delle nuove esigenze editoriali e l'adeguamento ai più moderni layout.

Quel che andiamo a spiegare in questo articolo è come creare un elemento fisso a fondo pagina (quindi un footer fisso), utilizzando i CSS. Detto footer fisso può contenere un menu, un disclaimer, l'invito alla registrazione ad un servizio, un elemento pubblicitario o quel che sia, non importa: la tecnica per la sua creazione resta sempre la stessa.

Prima di procedere, vediamo uno screenshot di quel che sarà il risultato finale:

Footer fisso CSS

Possiamo notare che la pagina di esempio contiene diversi elementi (in questo caso dei semplici paragrafi con un testo fittizio), quindi che la barra di scorrimento sitrova spostata verso il basso e, nonostante ciò, il nostro fixed footer resta fisso a fondo pagina.

Passiamo al codice HTML, che possiamo mettere indifferentemente come primo o come ultimo elemento della pagina (visto che verrà gestito coi CSS), di cui segue la sola riga utile che ci interessa:

<div id="fixed-footer">Elemento fisso a fondo pagina... grazie ad un pizzico di CSS</div>

Nulla di più semplice, un banalissimo "div" a cui assegniamo un ID che ci tornerà utile per associare le stilizzazioni che ci interessano.

Vediamo quindi il codice CSS utile alla stilizzazione del nostro elemento, evidenziando in grassetto gli stili utili a mantenerlo fisso a fondo pagina:

#fixed-footer
{
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    background: #000;
    color: #FFF;
    font: bold 15px verdana;
    width: 100%;
    padding: 15px 0;
}

Utilizziamo il comando position impostando il suo valore su fixed, quindi impostiamo il valore numerico zero (0) per le proprietà bottom e left. Gli altri stili, invece, sono liberamente modificabili a seconda dei propri gusti e delle proprie esigenze estetiche.

E' bene specificare che è necessario impostare correttamente la DOCTYPE della pagina per tutti i browser obsoleti, in particolare le versioni più vecchie di Internet Explorer (fermo restando che una corretta gestione della DOCTYPE è sempre e comunque consigliata, a prescindere dall'argomento in oggetto a questo articolo).

Se torniamo su e riguardiamo lo screenshot, possiamo notare che il nostro footer fisso è leggermente trasparente. Ampliamo quindi il nostro codice, evidenziando questa volta in grassetto le righe di codice che ci servono per questo scopo:

#fixed-footer
{
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    background: #000;
    color: #FFF;
    font: bold 15px verdana;
    width: 100%;
    padding: 15px 0;
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter: alpha(opacity=90);
}

Lavoriamo quindi sull'opacità del box con i comandi filter ed opacity, impostando una trasparenza del 90% (o che dir si voglia di 0.9).

Suggerisco di impostare o meno la trasparenza a seconda del risalto che si vuol dare al footer: è chiaro che, se trasparente, ne avrà meno.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (47.983)

:: Referenze dei fogli di stile Css (41.753)

:: Menu ad effetto mouseover con i Css (39.088)

:: Effetti sui link con i Css (29.607)

:: Testo verticale coi Css (19.865)

:: Angoli smussati in un box coi Css (18.845)

:: Box con effetto ombra con i CSS3 (16.154)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.134)

:: Stilizzare i form Html con i Css (15.904)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.543)

IN EVIDENZA
DOWNLOAD