Il blocco orizzontale più in basso di un layout di pagina viene spesso definito "piè di pagina". In esso, come in altri blocchi della pagina, vengono inseriti elementi di design, ma a differenza di altri, spesso sorgono problemi specifici con il posizionamento di questo particolare blocco. Sono collegati al fatto che browser diversi comprendono gli standard del linguaggio CSS in modo diverso e può essere abbastanza difficile far sì che il piè di pagina si trovi sul bordo inferiore della finestra del browser. Di seguito è riportato il codice per una delle soluzioni a questo problema.
Necessario
Conoscenza base di CSS e HTML
Istruzioni
Passo 1
Nella primissima riga del codice sorgente della pagina, inserisci un riferimento alla specifica XHTML 1.0 Transitional:
Passo 2
Posiziona i blocchi principali della struttura della pagina all'interno del corpo del documento (tra i tag e). Il blocco in cui verrà posizionato il contenuto principale deve essere costituito da due livelli nidificati. Ad esempio, lascia che quello esterno abbia l'identificatore OuterDiv e quello interno - InnerDiv:
Questo è dove sarà il contenuto principale della pagina.
Dietro di loro posiziona un blocco piè di pagina con un identificatore, ad esempio, FooterDiv:
Piè di pagina.
Passaggio 3
Inserisci nella parte principale del codice HTML (tra i tag e) un collegamento a un file esterno con una descrizione degli stili css:
@import "footerStyle.css";
Passaggio 4
Salva il codice completo della pagina master in un file con estensione html. Potrebbe assomigliare a questo:
Piè di pagina premuto
@import "footerStyle.css";
Questo è dove sarà il contenuto principale della pagina.
Piè di pagina.
Passaggio 5
Crea un file di foglio di stile: un file di testo normale che deve essere salvato con l'estensione css e il nome specificato nel codice HTML (footerStyle.css). Scrivi in questo file le seguenti descrizioni di stile per i blocchi utilizzati nella pagina:
* {margine: 0; imbottitura: 0}
html, corpo {altezza: 100%;}
corpo {
posizione: relativa;
colore: # 222222;
}
#DivEsterno {
margine: 0;
altezza minima: 100%;
sfondo: #aaaaaa;
colore: # 222222;
}
* html #OuterDiv {altezza: 100%;}
#FooterDiv {
posizione: relativa;
chiaro: entrambi;
margine superiore: -60px;
altezza: 60px;
larghezza: 100%;
colore di sfondo: blu scuro;
allineamento del testo: centro;
colore: #eeeeff;
}
. InnerDiv {
larghezza: 100%;
galleggiante: sinistro;
}
