Créez votre page HTML. Ouvrez un nouveau fichier dans un éditeur de texte et entrez le code de balisage suivant, qui comprend un lien vers une feuille de style externe et certains éléments HTML dont le pied de page:
Principal contenu de la page
Une page Web typique disposition implique d'avoir une zone d'en-tête qui longe le haut et un bas de page sur le fond, avec le contenu de la page entre les deux.
Créer votre fichier CSS. Ouvrez un nouveau fichier dans un éditeur de texte et enregistrez "sitestyle.css" pour correspondre le lien dans votre section de tête HTML. Pour positionner votre élément de pied efficace, vous devez d'abord le style de son élément parent, qui est le conteneur "div".
Entrez le code suivant:
récipient {
largeur: 80%;
margin: auto;
background-color: # CCCCCC-}
Ceci indique la largeur totale de la page comme l'élément "conteneur" détient la totalité du contenu de la page. Votre tête, le contenu et le pied de page seront affectés propriétés de style par rapport à celui-ci. La couleur de fond a été inclus uniquement de sorte que vous pouvez voir les limites de chaque élément pendant que vous développez votre page.
Ajouter des règles de style pour votre élément de pied de page. Entrez ce qui suit, la définition de la position de votre pied de page:
footer {
largeur: 90%;
margin: auto;
text-align: center;
clear: both;
background-color: # FFFFCC-}
Le pied de page est définie comme occupant un pourcentage de son élément parent, avec la propriété de marge déclarant qu'il devrait se situer dans le centre de la société mère. Le texte dans le pied de page est également centrée, qui, à son tour, centrer tous les autres éléments en son sein comme des images. L'élément est réglé pour effacer les deux côtés, ce qui signifie que pas d'autres éléments apparaîtront sur la même ligne horizontale comme il. Enregistrez vos fichiers et afficher la page dans un navigateur Web.
Coiffez le reste de vos éléments de la page et assurez-vous votre pied de page est toujours le titre de la façon dont vous avez besoin qu'il soit. Lorsque vous créez des règles CSS, vous pouvez parfois trouver qu'ils ont un style inattendu "par ricochet" effets, bouleversant vous avez créé précédemment. L'exemple de code suivant dicte le style pour les sections de tête et le contenu de la page:
tête, #content {
largeur: 90%;
margin: auto;
clear: both;
background-color: # FFCCFF-}
Enregistrez les modifications et afficher votre page dans un navigateur.
Expérimentez avec les règles CSS pour atteindre la position que vous voulez que votre pied à avoir. Navigateurs Web peuvent être notoirement variée en matière de rendu CSS Styled Content, donc vous devriez idéalement tester votre page en autant de navigateurs que possible. Vous pouvez constater que vous avez besoin d'ajouter ou de modifier les règles CSS pour appliquer votre conception dans tous les navigateurs, versions notamment les plus âgés d'Internet Explorer.