Bonjour,
J’aimerais savoir comment faire pour que le pied de page reste dans le bas de la page même si celle-ci est vide ou presque.
Merci pour votre aide,
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; Media Center PC 5.0; .NET CLR 3.5.21022)
Comment positionner le pied de page?
Modérateur : chinon37
Le pied de page est le dernier div de la page.
Tu donnes au div précédent une hauteur suffisante pour qu'il maintienne ton pied de page en bas...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Tu donnes au div précédent une hauteur suffisante pour qu'il maintienne ton pied de page en bas...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Ma configuration
Si tu es dans l'obscurité, viens sur ce forum pour t'éclairer (proverbe Landais)
" La libertat qu'ei lo camin "
Si tu es dans l'obscurité, viens sur ce forum pour t'éclairer (proverbe Landais)
" La libertat qu'ei lo camin "
Gaunce, c'est une solution très approximative puisque les écrans ne font pas tous la même hauteur.
On va partir du principe que Endor connait l'utilisation des css
Soit une page de cette construction:
on va créer une feuille css avec ces règles:
On donne une hauteur de page de 100%, avec un minimum de 100% pour le conteneur.
Attention, pour IE, qui ne reconnait pas les propriétés min et max, il faudra ajouter un commentaire uniquement lisble par IE:
On positionne le pied de page en absolu avec une largeur de 100%.
Au dernier bloc précédent le pied de page, on donne un espacement en bas de bloc égal à la hauteur du pied de page, pour que ce dernier vienne se caler en bas de l'écran.
On va partir du principe que Endor connait l'utilisation des css
Soit une page de cette construction:
Code : Tout sélectionner
<body>
<div id="conteneur">
<h1 id="titre">
</h1>
contenu
<p id="dernierparagraphe">
</p>
<div id="piedpage">pied de page</div>
</div>
</body> Code : Tout sélectionner
body {
margin: 0;
padding: 0;
height: 100%;
}
div#conteneur {
position: relative;
width: 70%;
margin: 0 auto;
min-height: 100%;
}
div#piedpage {
position: absolute;
bottom: 0; left: 0;
width: 100%;
}
div#page #dernierparagraphe {
padding-bottom: *hauteur du pied de page*;
}Attention, pour IE, qui ne reconnait pas les propriétés min et max, il faudra ajouter un commentaire uniquement lisble par IE:
Code : Tout sélectionner
<!--[if lte IE 6]>
<style type="text/css">
div#conteneur {
height: 100%;
}
</style>
<![endif]-->Au dernier bloc précédent le pied de page, on donne un espacement en bas de bloc égal à la hauteur du pied de page, pour que ce dernier vienne se caler en bas de l'écran.
Dernière modification par chinon37 le 19 janv. 2009, 20:45, modifié 1 fois.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
-
Endor
Je n’y arrive pas.
Quelle est la *hauteur du pied de page* dans ton exemple?
Si je donne une hauteur au pied de page et que je donne le même espacement en bas du dernier bloc précédent le pied il se place par-dessus le conteneur et non au bas de la page.
Merci
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; Media Center PC 5.0; .NET CLR 3.5.21022)
Quelle est la *hauteur du pied de page* dans ton exemple?
Si je donne une hauteur au pied de page et que je donne le même espacement en bas du dernier bloc précédent le pied il se place par-dessus le conteneur et non au bas de la page.
Merci
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; Media Center PC 5.0; .NET CLR 3.5.21022)
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités