Le bloc horizontal le plus bas d'une mise en page est souvent appelé « pied de page ». Dans celui-ci, comme dans d'autres blocs de la page, des éléments de conception sont placés, mais contrairement à d'autres, des problèmes spécifiques surviennent souvent avec le positionnement de ce bloc particulier. Ils sont liés au fait que différents navigateurs comprennent les normes du langage CSS différemment et qu'il peut être assez difficile d'avoir le pied de page au bord inférieur de la fenêtre du navigateur. Vous trouverez ci-dessous le code de l'une des solutions à ce problème.
Nécessaire
Connaissances de base en CSS et HTML
Instructions
Étape 1
Dans la toute première ligne du code source de la page, placez une référence à la spécification XHTML 1.0 Transitional:
Étape 2
Placez les blocs principaux de la structure de la page à l'intérieur du corps du document (entre les balises et). Le bloc dans lequel le contenu principal sera placé doit être composé de deux couches imbriquées. Par exemple, laissez l'extérieur avoir l'identifiant OuterDiv et l'intérieur - InnerDiv:
C'est là que sera le contenu principal de la page.
Derrière eux, placez un bloc de pied de page avec un identifiant, par exemple, FooterDiv:
Pied de page de la page.
Étape 3
Placez dans la partie head du code HTML (entre les balises et) un lien vers un fichier externe avec une description des styles css:
@import "footerStyle.css";
Étape 4
Enregistrez le code complet de la page maître dans un fichier avec l'extension html. Cela pourrait ressembler à ceci:
Pied de page pressé
@import "footerStyle.css";
C'est là que sera le contenu principal de la page.
Pied de page de la page.
Étape 5
Créez un fichier de feuille de style - un fichier texte brut qui doit être enregistré avec l'extension css et le nom que vous avez spécifié dans le code HTML (footerStyle.css). Écrivez dans ce fichier les descriptions de style suivantes pour les blocs utilisés dans la page:
* {marge: 0; remplissage: 0}
html, corps {hauteur: 100 %;}
corps {
position: relative;
couleur: # 222222;
}
#OuterDiv {
marge: 0;
hauteur minimale: 100 %;
arrière-plan: #aaaaaa;
couleur: # 222222;
}
* html #OuterDiv {hauteur: 100 %;}
#FooterDiv {
position: relative;
clarifier les deux;
marge supérieure: -60px;
hauteur: 60px;
largeur: 100 %;
couleur d'arrière-plan: bleu foncé;
text-align: centre;
couleur: #eeeeff;
}
. InnerDiv {
largeur: 100 %;
flotteur: gauche;
}
