El "peu de pàgina" sol ser el bloc més baix del disseny d'una pàgina web. La dificultat més freqüent per posicionar aquest peu de pàgina és aconseguir que es col·loqui sempre a la part inferior de la finestra, independentment de la plenitud de la pàgina o del tipus de navegador. Hi ha hagut força solucions al problema des del moment de la transició massiva al disseny de blocs, i una d’elles es mostra a continuació.
És necessari
Coneixements bàsics de CSS i HTML
Instruccions
Pas 1
Prenem com a base l’esquema de disseny de pàgina més comú: tres blocs situats l’un sobre l’altre. La part superior (capçalera) sempre ha d’estar alineada amb la vora superior de la finestra, la part inferior (peu de pàgina), amb la vora inferior, i el cos principal (cos) sempre ha d’omplir tot l’espai entre elles. El codi font ha de contenir un enllaç a l’especificació de transició XHTML 1.0 i la descripció d’estils s’ha de col·locar en un fitxer CSS extern (per evitar problemes amb l’Opera 9. XX). La descripció HTML de l’estructura s’ha de col·locar a la pàgina principal. cos de la pàgina. Començarà, per descomptat, a partir del bloc superior, en l’etiqueta del qual s’hauria de col·locar un atribut identificador amb un valor, per exemple, divHead:
Bloc de capçalera.
El bloc principal hauria de consistir en un parell de blocs imbricats. A l’exterior se li donarà l’identificador divOut i a l’interior - divContent:
Contingut principal.
El peu de pàgina està configurat per divFoot:
Peu de pàgina.
Pas 2
El codi HTML complet de la pàgina hauria de ser així:
Tres blocs
@import "style.css";
Es tracta d’un bloc de capçalera.
Contingut principal.
Aquest és el peu de pàgina.
Pas 3
La descripció de l'estil implementa el següent mecanisme de disseny: el bloc central (divOut) està definit al 100% d'alçada, el bloc superior (divHead) tindrà un posicionament absolut i el inferior inferior - relatiu. Al bloc de contingut principal (divContent), hi ha d’haver un espai lliure a la part superior igual a l’altura del bloc de capçalera perquè no se superposi al contingut principal de la pàgina. I el bloc inferior (peu de pàgina) hauria de tenir un marge negatiu a la part superior, igual a l’altura d’aquest bloc. Això l’elevarà per sobre de la vora inferior de la finestra del navegador. Aquest mecanisme es pot implementar mitjançant un fitxer css amb el contingut següent: * {margin: 0; encoixinat: 0}
html, body {height: 100%;} body {
posició: relativa;
color: # 000;
}
#divOut {
marge: 0;
alçada mínima: 100%;
antecedents: #FFF;
color: # 000;
}
* html #divOut {height: 100%;}
#divHead {
posició: absoluta;
esquerra: 0;
superior: 0;
amplada: 100%;
alçada: 80 px;
fons: # 2F5000;
desbordament: amagat;
text-align: centre;
color: #FFF;
} #divFoot {
posició: relativa;
clar: tots dos;
margin-top: -60px;
alçada: 60 px;
amplada: 100%;
color de fons: # 2F5000;
text-align: centre;
color: #FFF;
}
.divContent {
amplada: 100%;
flotador: esquerra;
tapa de farciment: 81 px;
} El nom que heu especificat per al full d'estil al codi HTML és style.css.
