Discussion :

[Yoteco]

Bonjour,

J'ai un site avec un pied-de-page qui doit toujours se trouver tout au fond du site (assez logique). Pour celà j'ai créé une div :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="footer">
    <div id="footer_navig">
        <ul>
            <li><a href="/" title="Contacts">Accueil</a> |</li>    
            <li><a href="/Produits" title="Produits">Produits</a></li>
            <li>|</li>
            <li><a href="/Services" title="Services">Services</a></li>
            <li>|</li>
            <li><a href="/Informations" title="Informations">Informations</a></li>
            <li>|</li>
            <li><a href="/Contacts" title="Contacts">Contacts</a></li>
            <li>|</li>
            <li><a href="/content/view/sitemap" title="Plan du site">Plan du site</a></li>
        </ul>
    </div>
</div>

Et pour placer cette div j'utilise le CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#footer {    
    background-color:#FFFFFF;
    height:40px;
    margin-left:50px;
    margin-top:-40px;
    position:absolute;
    width:740px;
}
#footer_navig {
    background-image:url(/design/smsa/images/footer_background.jpg);
    height:40px;
    margin-left:145px;
    width:561px;
}

Sous firefox, opera et safari pas de soucis ça marche. Par contre sous IE6 et 7, si j'ai une page qui est plus longue que la hauteur de la fenêtre, il me met le footer au fond de le fenêtre au lieu de la mettre au fond du site. Et quand je scroll le pied-de-page reste sur place et se retrouve en plein milieu du site...

C'est la première fois que je rencontre des problèmes avec ce code CSS j'utilise approximativement le même pour placer un logo en bas à droite des sites que je développe. (Exemple sur www.doyonfreres.ch le logo en bas à droite, website by wess).

J'espère que vous pourrez m'aider

Merci d'avance.

[gomodo]

Pour tester j'ai fait sur un IE7 (7.0.5730.11) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id="footer">
blabla<br />
blabla<br />
.. j'en ai mis suffisamment pour dépasser la hauteur de la fenêtre
blabla<br />
blabla<br />
blabla<br />
    <div id="footer_navig">
        <ul>
            <li><a href="/" title="Contacts">Accueil</a> |</li>    
            <li><a href="/Produits" title="Produits">Produits</a></li>
            <li>|</li>
            <li><a href="/Services" title="Services">Services</a></li>
            <li>|</li>
            <li><a href="/Informations" title="Informations">Informations</a></li>
            <li>|</li>
            <li><a href="/Contacts" title="Contacts">Contacts</a></li>
            <li>|</li>
            <li><a href="/content/view/sitemap" title="Plan du site">Plan du site</a></li>
        </ul>
    </div>
</div>

et fait (modif couleur pour repérer les calques) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#footer {    
	background-color: #00CC00;
    height:40px;
    margin-left:50px;
    margin-top:-40px;
    position:absolute;
    width:740px;
}
#footer_navig {
	background-color: #FF0000;
    height:40px;
    margin-left:145px;
    width:561px;
}

Bin ça marche, le calque footer_navig est bien en bas de la page... pas toi ?

[Yoteco]

Le footer je ne l'utilise pas comme ça.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="general">
bla bla bla bla suffisamment pour dépasser une hauteur de page...
</div>
<div id="footer">...</div>

Est-ce que ça marche aussi comme ça ?

[gomodo]

Oui ça marche avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#general{
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	height:600px;
	z-index:0;
	color: #FFFFFF;
	visibility: visible;
	overflow: visible;
	background-color: #00CC00;
}

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="general">
blabla<br />
blabla<br />
<div id="footer">
    <div id="footer_navig">
        <ul>
            <li><a href="/" title="Contacts">Accueil</a> |</li>    
            <li><a href="/Produits" title="Produits">Produits</a></li>
            <li>|</li>
            <li><a href="/Services" title="Services">Services</a></li>
            <li>|</li>
            <li><a href="/Informations" title="Informations">Informations</a></li>
            <li>|</li>
            <li><a href="/Contacts" title="Contacts">Contacts</a></li>
            <li>|</li>
            <li><a href="/content/view/sitemap" title="Plan du site">Plan du site</a></li>
        </ul>
    </div>
</div>
</div>

ça marche aussi sans general, mais dans "body"

[devyan]

bonsoir yoteco,

Un détail me chagrine...

Tu utilises un élément "position:absolute" mais tu ne le positionnes à aucun moment... (pas de coordonnées top ou bottom, ni de left ou right)

De plus il ne faut pas oublier qu'un élément "absolute" est un peu comme "flottant" au dessus des éléments "static" ou "relative" qui l'entourent. C'est à dire que si un élément doit se chevaucher avec lui (dessus ou dessous en focntion de leurs positions dans le flux html) il ne va pas être déplacé.

Pour répondre plus précisément à ton soucis :
Si tu as positionné ton footer en bas de page (bottom:0 par exemple )
Si tu as prévu une marge suffisante pour empêcher le recouvrement lorsque le contenu de ta page atteint ou dépasse la hauteur de la zone de visualisation du navigateur (généralement au moins la hauteur du footer dans margin-bottom du main, voire simplement de body suivant les cas)

Tout devrait bien se passer

[Yoteco]

Ok, merci devyan j'ai essayé avec bottom:0 mais sa ne marche pas mieux.

Par contre j'ai trouvé ce qui fais bugger IE. Ma div general a une propriété height:100% car mon design doit toujours prendre toute la hauteur même si le contenu ne prend pas toute la place.
Le problème est que IE me place le footer en fonction du bas de la fenêtre au lieu du bas du site... si j'enlève ce height:100% ça marche plus ou moins dans le sens où le pied-de-page ne vient plus au milieu de mon texte mais reste au fond du texte. Par contre si le texte ne remplis pas toute la hauteur du navigateur le footer ne vas pas au fond.

Je vais donc très certainement faire un fichier CSS séparé pour IE.

[Yoteco]

Pour que sa sois plus simple à corriger j'ai mis une page d'exemple en ligne :

http://www.wess.ch/bug-ie/index.html

[devyan]

En changeant height:100% par height:auto de #general ça a l'air de mieux fonctionner...

(avec 100% la taille réelle de #general correspond bien à la position que tu obtiens pour le footer, si tu met "overflow:hidden" tu devrais bien visualiser le problème)

A+