25. Il piè di pagina

Infine, posizioniamo il piè di pagina sotto i contenuti e la colonna laterale, assegnandogli i seguenti stili:

  1. /* Piè di pagina */
  2. address {
  3. clear: both;
  4. width: 100%;
  5. margin: 0;
  6. font-style: normal;
  7. font-weight: bold;
  8. font-size: 110%;
  9. background: #fff url("img/footer.gif") no-repeat 100% 50%;
  10. text-align: center;
  11. color: #000;
  12. border-top: 1px solid #bccad9;
  13. text-transform: uppercase;
  14. height: 3em;
  15. line-height: 3em;
  16. }

La prima dichiarazione riguarda la proprietà clear e serve a ripristinare il flusso normale del documento dopo i float. Poiché gli elementi sono flottati in entrambe le direzioni usiamo qui il valore both. I margini verticali dell'elemento vengono annullati, poiché il computo di tali margini con la proprietà clear sono diversi da browser a browser. Assegniamo una larghezza esplicita all'elemento per evitare alcuni problemi con Internet Explorer 6 ed inferiori. Centriamo quindi il testo in orizzontale ed in verticale, assegnandogli una dimensione superiore al normale. Per centrare il testo in verticale abbiamo usato la stessa tecnica vista in precedenza per la sezione "Sei qui". Poiché l'elemento avrà un'immagine di sfondo posizionata in basso a destra (coordinate 100%, 50%), la sua altezza dovrà essere proporzionale alle dimensioni dell'immagine.

Possiamo osservare i nostri progressi nel nostro documento XHTML e nel nostro documento HTML.