"Piè di pagina" è solitamente il blocco più in basso del layout di una pagina web. La difficoltà più comune nel posizionare questo piè di pagina è quello di posizionarlo sempre nella parte inferiore della finestra, indipendentemente dalla pienezza della pagina o dal tipo di browser. Ci sono state parecchie soluzioni al problema dal momento della massiccia transizione al layout a blocchi, e una di queste è riportata di seguito.
È necessario
Conoscenza base di CSS e HTML
Istruzioni
Passo 1
Prendiamo come base lo schema di layout di pagina più comune: tre blocchi posizionati uno sopra l'altro. La parte superiore (intestazione) deve essere sempre allineata al bordo superiore della finestra, la parte inferiore (piè di pagina) al bordo inferiore e la parte principale (corpo) deve sempre riempire tutto lo spazio tra di loro. Il codice sorgente deve contenere un link alla specifica XHTML 1.0 Transitional, e la descrizione degli stili deve essere posta in un file CSS esterno (per evitare problemi con Opera 9. XX). La descrizione HTML della struttura deve essere posta nel file principale corpo della pagina. Inizierà, ovviamente, dal blocco superiore, nel cui tag dovrebbe essere inserito un attributo identificatore con un valore, ad esempio divHead:
Blocco di intestazione.
Il blocco principale dovrebbe essere costituito da una coppia di blocchi nidificati. A quello esterno verrà assegnato l'identificatore divOut e quello interno - divContent:
Contenuto principale.
Il piè di pagina è impostato su divFoot:
Piè di pagina.
Passo 2
Il codice HTML completo della pagina dovrebbe essere simile a questo:
Tre blocchi
@import "stile.css";
Questo è un blocco di intestazione.
Contenuto principale.
Questo è il piè di pagina.
Passaggio 3
La descrizione dello stile implementa il seguente meccanismo di layout: il blocco centrale (divOut) è impostato al 100% di altezza, il blocco superiore (divHead) avrà un posizionamento assoluto e quello inferiore - relativo. Nel blocco del contenuto principale (divContent), deve esserci uno spazio libero in alto pari all'altezza del blocco dell'intestazione in modo che non si sovrapponga al contenuto principale della pagina. E il blocco inferiore (piè di pagina) dovrebbe avere un margine negativo in alto, uguale all'altezza di questo blocco. Questo lo solleverà sopra il bordo inferiore della finestra del browser. Questo meccanismo può essere implementato utilizzando un file css con il seguente contenuto: * {margin: 0; imbottitura: 0}
html, corpo {altezza: 100%;} corpo {
posizione: relativa;
colore: # 000;
}
#divOut {
margine: 0;
altezza minima: 100%;
sfondo: #FFF;
colore: # 000;
}
* html #divOut {altezza: 100%;}
#divHead {
posizione: assoluta;
sinistra: 0;
in alto: 0;
larghezza: 100%;
altezza: 80px;
sfondo: # 2F5000;
trabocco: nascosto;
allineamento del testo: centro;
colore: #FFF;
} #divFoot {
posizione: relativa;
chiaro: entrambi;
margine superiore: -60px;
altezza: 60px;
larghezza: 100%;
colore di sfondo: # 2F5000;
allineamento del testo: centro;
colore: #FFF;
}
.divContenuto {
larghezza: 100%;
galleggiante: sinistro;
imbottitura: 81px;
} Il nome specificato per il foglio di stile nel codice HTML è style.css.
