"Pied de page" est généralement le bloc le plus bas d'une mise en page Web. La difficulté la plus courante pour positionner ce pied de page est de toujours le positionner en bas de la fenêtre, quel que soit le remplissage de la page ou le type de navigateur. Il y a eu pas mal de solutions au problème depuis l'époque de la transition massive vers la disposition en blocs, et l'une d'entre elles est donnée ci-dessous.
Il est nécessaire
Connaissances de base en CSS et HTML
Instructions
Étape 1
Prenons comme base le schéma de mise en page le plus courant - trois blocs placés l'un au-dessus de l'autre. Le haut (en-tête) doit toujours être aligné sur la bordure supérieure de la fenêtre, le bas (pied de page) - sur la bordure inférieure, et le principal (corps) doit toujours remplir tout l'espace entre eux. Le code source doit contenir un lien vers la spécification XHTML 1.0 Transitional, et la description des styles doit être placée dans un fichier CSS externe (pour éviter les problèmes avec Opera 9. XX). La description HTML de la structure doit être placée dans le corps de la page. Il commencera, bien entendu, par le bloc du haut, dans la balise duquel doit être placé un attribut identifiant avec une valeur, par exemple divHead:
Bloc d'en-tête.
Le bloc principal doit être constitué d'une paire de blocs imbriqués. L'extérieur recevra l'identifiant divOut et l'intérieur - divContent:
Contenu principal.
Le pied de page est défini sur divFoot:
Pied de page.
Étape 2
Le code HTML complet de la page devrait ressembler à ceci:
Trois blocs
@import "style.css";
Il s'agit d'un bloc d'en-tête.
Contenu principal.
C'est le pied de page de la page.
Étape 3
La description de style implémente le mécanisme de mise en page suivant: le bloc du milieu (divOut) est défini sur une hauteur de 100 %, le bloc du haut (divHead) aura un positionnement absolu et celui du bas, relatif. Dans le bloc de contenu principal (divContent), il doit y avoir un espace libre en haut égal à la hauteur du bloc de titre afin qu'il ne chevauche pas le contenu principal de la page. Et le bloc du bas (pied de page) doit avoir une marge négative en haut, égale à la hauteur de ce bloc. Cela l'élèvera au-dessus de la bordure inférieure de la fenêtre du navigateur. Ce mécanisme peut être implémenté à l'aide d'un fichier css avec le contenu suivant: * {margin: 0; remplissage: 0}
html, corps {hauteur: 100 %;} corps {
position: relative;
couleur: # 000;
}
#divOut {
marge: 0;
hauteur minimale: 100 %;
arrière-plan: #FFF;
couleur: # 000;
}
* html #divOut {hauteur: 100 %;}
#divHead {
position: absolue;
à gauche: 0;
haut: 0;
largeur: 100 %;
hauteur: 80px;
arrière-plan: # 2F5000;
débordement caché;
text-align: centre;
couleur: #FFF;
} #divFoot {
position: relative;
clarifier les deux;
marge supérieure: -60px;
hauteur: 60px;
largeur: 100 %;
couleur d'arrière-plan: # 2F5000;
text-align: centre;
couleur: #FFF;
}
.divContenu {
largeur: 100 %;
flotteur: gauche;
rembourrage haut: 81px;
} Le nom que vous avez spécifié pour la feuille de style dans le code HTML est style.css.
