Com fer que la part del peu de pàgina de la pàgina ("peu de pàgina") s'adhereixi a la vora inferior de la finestra: aquest és probablement el problema més comú en el disseny de les pàgines del lloc. Hi ha, per descomptat, solucions i n’hi ha diverses. A continuació es mostra una manera d’assegurar-se que el peu de pàgina sempre es prem a la part inferior de la pàgina, independentment de la quantitat de contingut i del tipus de navegador.
És necessari
Coneixements bàsics de CSS i HTML
Instruccions
Pas 1
Prenem com a exemple un dels esquemes de paginació més típics: tindrà àtic (capçalera), bloc principal i peu de pàgina. Per descomptat, si cal, podeu posar diverses columnes al bloc principal, però no ho farem aquí, només ens centrarem a no situar el peu de pàgina. El codi HTML de la pàgina començarà per la declaració de l’especificació:
Entre les etiquetes i, a més del títol de la pàgina, col·locarem una indicació de la codificació: A més d’un enllaç a un fitxer CSS extern que conté una descripció d’estils: @import "styles.css"; no col·locarem la descripció d'estils directament al codi html de la pàgina per evitar complicacions amb el navegador Opera de la novena versió. Entre les etiquetes i col·loqueu l'estructura de blocs de la pàgina. El primer, és clar, és el bloc de títols. Li donarem l'identificador de capçalera per poder definir estils per a aquest bloc en particular:
Aquesta capçalera sempre es troba a la part superior de la finestra.
A continuació, el bloc principal de la pàgina. Estarà format per dos imbricats: extern (identificador - exterior) i interior (identificador - embolcall exterior):
Aquesta és la part principal.
I, finalment, el peu de pàgina:
És peu de pàgina, sempre a la part inferior de la finestra.
La pàgina completa tindrà el següent aspecte:
Com prémer el peu de pàgina
@import "styles.css";
Aquesta capçalera sempre es troba a la part superior de la finestra.
Aquesta és la part principal.
És peu de pàgina, sempre a la part inferior de la finestra.
Pas 2
Passem ara al contingut del full d’estils. Implementa l'esquema següent: el bloc de pàgina principal s'establirà al 100% d'alçada, el títol estarà absolutament posicionat i el peu de pàgina serà relativament. Per evitar que l'encapçalament se superposi al contingut principal de la pàgina, aquest contingut principal es col·loca en un quadre addicional dins del quadre principal i aquest quadre addicional s'estableix en un marge superior igual a l'alçada del quadre d'encapçalament. I al peu de pàgina se li dóna un marge superior negatiu igual a la seva alçada; d'aquesta manera, s'elevarà per sobre de la vora inferior de la finestra fins a la seva alçada completa. Contingut complet del fitxer css: * {margin: 0; encoixinat: 0}
html, body {height: 100%;} body {
color: negre;
posició: relativa;
}
#outer {
alçada mínima: 100%;
marge: 0;
fons: blanc;
color: negre;
} * html #outer {height: 100%;}
# encapçalament {
posició: absoluta;
superior: 0;
esquerra: 0;
amplada: 100%;
alçada: 70 px;
fons: # 304a00;
desbordament: amagat;
color: blanc;
text-align: centre;
} #footer {
posició: relativa;
margin-top: -50px;
clar: tots dos;
amplada: 100%;
alçada: 50 px;
color de fons: # 304a00;
color: blanc;
text-align: centre;
}
.outerwrap {
flotador: esquerra;
amplada: 100%;
tapa de farciment: 71 px;
} Aquest fitxer s'ha de desar amb el nom que hem especificat al codi html de la pàgina - styles.css.
