El bloc horitzontal més baix del disseny de pàgina sovint es coneix com a "peu de pàgina". En ell, com en altres blocs de la pàgina, es col·loquen elements de disseny, però, a diferència d'altres, sovint apareixen problemes específics amb el posicionament d'aquest bloc en particular. Estan relacionats amb el fet que diferents navegadors entenen els estàndards del llenguatge CSS de manera diferent i pot ser bastant difícil aconseguir que el peu de pàgina estigui a la vora inferior de la finestra del navegador. A continuació es mostra el codi d’una de les solucions a aquest problema.
Necessari
Coneixements bàsics de CSS i HTML
Instruccions
Pas 1
A la primera línia del codi font de la pàgina, poseu una referència a l’especificació de transició XHTML 1.0:
Pas 2
Col·loqueu els blocs principals de l'estructura de la pàgina dins del cos del document (entre les etiquetes i). El bloc on es col·locarà el contingut principal ha de constar de dues capes imbricades. Per exemple, deixeu que l’exterior tingui l’identificador OuterDiv i l’interior - InnerDiv:
Aquí serà el contingut principal de la pàgina.
Darrere d'ells, col·loqueu un bloc de peus amb un identificador, per exemple, FooterDiv:
Peu de pàgina de la pàgina.
Pas 3
Col·loqueu a la part principal del codi HTML (entre les etiquetes i) un enllaç a un fitxer extern amb una descripció dels estils CSS:
@import "footerStyle.css";
Pas 4
Deseu el codi de pàgina mestra complet en un fitxer amb l'extensió html. Pot semblar així:
Peu de pàgina premut
@import "footerStyle.css";
Aquí serà el contingut principal de la pàgina.
Peu de pàgina de la pàgina.
Pas 5
Creeu un fitxer de full d'estil: un fitxer de text pla que s'ha de desar amb l'extensió CSS i el nom que heu especificat al codi HTML (footerStyle.css). Escriviu a aquest fitxer les següents descripcions d'estil per als blocs utilitzats a la pàgina:
* {margin: 0; encoixinat: 0}
html, body {height: 100%;}
cos {
posició: relativa;
color: # 222222;
}
# DivOuter {
marge: 0;
alçada mínima: 100%;
fons: #aaaaaa;
color: # 222222;
}
* html #OuterDiv {height: 100%;}
#FooterDiv {
posició: relativa;
clar: tots dos;
margin-top: -60px;
alçada: 60 px;
amplada: 100%;
color de fons: Blau fosc;
text-align: centre;
color: #eeeeff;
}
. InnerDiv {
amplada: 100%;
flotador: esquerra;
}
