Il posizionamento di un elemento a piè pagina è pratica comune e tutti coloro che si occupano di progettazione e sviluppo di layout per siti internet hanno affrontato almeno una volta questo problema.
Se il layout che si sta progettando è tutto composto da elementi non flottanti (ad esempio un’intestazione, un corpo e un piè pagina in un’unica colonna) il problema del posizionamento dell’elemento a piè pagina è banale e se non lo si vuole vedere in basso immediatamente sopra la barra di stato ma di seguito al corpo centrale basta definire tre elemeti non flottanti ed il gioco è fatto.
Si possono ad esempio creare tre elementi div nel codice XHTML e chiamarli rispettivamente intestazione, contenuto, e piepagina.
<div id="intestazione"><h1>Intestazione</h1></div>
<div id="contenuto"><p>Lorem ipsum...</p></div>
<div id="piepagina"><p>piè pagina</div>
successivamente è necessario definire il foglio di stile (per evidenziare i tre elementi ho anche definito colori di sfondo e bordi diversi per ognuno di essi):
<style type="text/css">
#intestazione{
width:780px;
margin-left:auto;
margin-right:auto;
background-color:#99CCFF;
border:#006699 solid 1px;
}
#contenuto{
width:780px;
margin-left:auto;
margin-right:auto;
background-color: #FFFFCC;
border: #FFCC00 solid 1px;
}
#piepagina{
width:780px;
margin-left:auto;
margin-right:auto;
background-color: #CCFFCC;
border: #339933 solid 1px;
}
</style>
Ecco l’esempio: Esempio 1
Ma se ad esempio il corpo centrale è costituito da due elementi flottanti (due colonne per intenderci) il problema si complica.
Un esempio comune è la presenza di una colonna a sinistra più lunga di quella a destra con entrambi gli elementi che flottano a sinistra. Se si inserisce un elemento a piè pagina in queste condizioni accadranno cose bizzarre: in IE potrebbe anche funzionare ma in Firefox ed Opera l’elemento di piè pagina si collocherá in modo non esatto (Esempio2). Ecco il css relativo:
<style type="text/css">
#intestazione{
width:780px;
margin-left:auto;
margin-right:auto;
background-color:#99CCFF;
border:#006699 solid 1px;
}
#contenuto{
width:780px;
margin-left:auto;
margin-right:auto;
background-color: #FFFFCC;
border: #FFCC00 solid 1px;
}
#contenuto_sx{
width:498px;
background-color: #FFFFCC;
border: #FFCC00 solid 1px;
float:left;
}
#contenuto_dx{
width:278px;
background-color: #FFFFCC;
border: #FFCC00 solid 1px;
float:left;
}
#piepagina{
width:780px;
margin-left:auto;
margin-right:auto;
background-color: #CCFFCC;
border: #339933 solid 1px;
}
</style>
La soluzione a questo problema è però semplice: si chiama clear.
Basta infatti inserire clear:both; nella dichiarazione CSS relativa all’elemento piepagina e tutto tornerà magicamente a posto (Esempio3).
#piepagina{
...
clear:both;
}
Tutto questo se si vuole che l’elemento a piè pagina si collochi immediatamente sotto il corpo definito in precedenza. Ma se vogliamo che l’elemento a piè pagina si collochi in basso, in fondo alla finestra del browser, dobbiamo posizionarlo in modo assoluto (Esempio4).
/*per IE6 */
body{
margin:0;
padding:0;
}
#piepagina{
width:100%;
background-color: #CCFFCC;
border-top: #339933 solid 1px;
border-bottom: #339933 solid 1px;
position:absolute;
bottom: 0;
left: 0;
}
Concludo con il suggerirvi un libro da leggere per approfondire i CSS: CSS guida completa di G. Troiani ed alcuni link dove è affrontato l’argomento dell’elemento posto a piè pagina e più in generale del posizionamento degli elementi:
Da ultimo, ma non in termini di importanza vi sottopongo un post apparso il 9 Aprile 2008 su Italian WebDesign dal titolo ….e un po’ di footers da imitare
Articoli correlati
Tags: CSS, footer, piè pagina