Problème de positionnement relatif sur FireFox / Safari

Bonjour,

J'ai un soucis de positionnement sur le site lobodis.com que je suis en train de finaliser.

J'ai une DIV située en bas de page qui doit tout le temps rester collée au bas. J'utilise pour cela la règle position:relative et bottom:1px;. Cela se passe bien sur IE, mais sur Firefox et Safari la div se positionne au bas de la fenêtre en cours, et quand je scrolle elle reste coincée en milieu de page.

Voici le code de la partie incriminée :

#footer     { text-align: center;position:relative;bottom:1px;}
#footer div { 
padding-top: 20px;
height: 75px;
background:transparent url(../images/footer-bg.gif) bottom no-repeat;
margin-bottom:0px;
padding-bottom:0px;
}

Je ne comprends pas ce comportement, je dois avoir faux quelque part mais je crois avoir respecté les normes non ?

as tu des float:left ou float:right?

Non pas dans cette section mais dans le reste de la page oui (cf le css ici : lobodis.com/templates/ms_june2005/css/template_css.css).

Tu crois que cela vient en concurrence avec cette DIV ?

En tout cas le comportement est le même avec Konqueror et Opera qu'avec Firefox... c'est donc sans doute un comportement standard

Mais sinon, j'ai du mal à comprendre le

position: relative;
bottom: 1px;

Le positionnement en relatif permet de décaler un élément par rapport à son positonnement normal (qui est fonction de sa place dans le flux, des marges des éléments adjacents, ce genre de choses...). Du coup, ce que tu fais c'est que tu remontes d'un pixel ta div. Mais je ne m'explique pas ce comportement bizarre, par contre.

Mais que donnerait un

position: absolute;
bottom: 0px; 

?

Deux autre soucis :
- le flash est intégré via la balise <embed>... pourquoi pas tout simplement <object> ? (impression totalement subjective et pas fondée par des tests : l'utilisation de flash via embed est une des choses qui fait ramer ma config, avec firefox + flashplayer pour linux).
- le menu horizontal fout le camp si on a le malheur d'augmenter ne serait-ce que petit peu la taille du texte. Pas glop.
Modifié par mpop (24 Jan 2006 - 20:12)

Bonsoir mpop et hologram,

Quand je remplace le comportement relative en absolute, avec ce type de règles :

#footer { 
text-align: center;
position:absolute;
bottom:0px;}

J'obtiens un footer aussi mal placé en terme de bottom et pour le coup totalement aligné à gauche (cf capture d'écran ici).

Concernant le menu c'est vrai qu'il y aurait à améliorer, cela viendra juste après la résolution de ce premier bug. En tout cas merci pour tes observations je ne manquerai pas de les appliquer.

Bon alors tu doit rajouter dans la CSS:

#contenu h4{
	clear: both;
}

ensuite pour ton formulaire tu fais ca

<div id="cont">
<div id="header"></div>
<div id="menu">
   <a href="http://www.sg93.bx.la/index.php">Accueil |</a>
   <a href="http://www.sg93.bx.la/team.php">Team |</a>
   <a href="http://www.sg93.bx.la/forum/">Forum |</a>
   <a href="http://www.sg93.bx.la/modules/livredor/">Livre D'or |</a>
   <a href="http://www.sg93.bx.la/contact.php">Contact |</a>
</div>
<div id="contenu">
   <h2>TeaM SG93 :</h2>
<ul id="team1">
	<li title="5:61:8">zavatar</li>
	<li title="5:158:5">MKd^</li>
</ul>
<div id="text">
<form vname="FormName" action="modules/contact/formmail.php" method="post" enctype="multipart/form-data" name="form">
<p>
<label for="email">Expéditeur</label><br>
<input type="text" name="email" size="38">
</p>
<p>
<label for="sujet">Sujet</label><br>
<input type="text" name="subject" size="38">
</p>
<p>
<label for="message">Message</label><br>
<textarea rows="12" name="msg" cols="45"></textarea>
<br><br>
<input type="submit" value="Envoyer">
</p>
</form>	
</div>
<ul id="team2">
	<li title="5:62:12">JeEzY</li>
	<li title="4:483:10">Rital</li>
	<li title="5:107:12">J-jay</li>
</ul>
<h4>Info : Passer votre souris sur le nom de quelqu'un, vous pourrez voir ses coordonées.</h4>
</div>
</div>

Voila pour le reste de la mise en forme, il faudra que tu cherche un peu .

??

Je crois que tu t'es trompé de post...

nlecam a écrit :
??

Je crois que tu t'es trompé de post...

Je pense aussi

Pour revenir au problème discuté :
1/ je ne sais pas comment tu as obtenu cet effet (sur lobodis.com) avec uniquement

position: relative; bottom: 1px;

Vu que ce n'est pas le comportement que l'on est censé obtenir en positionnement relatif !
J'ai fait un test minimal avec une page comprenant assez de texte pour dépasser une hauteur d'écran, et un footer positionné de cette manière, eh bien le footer reste en bas (il remonte juste d'un malheureux pixel, mais ça ne se voit qu'à peine...).

2/ par contre on peut obtenir quelque chose avec un positionnement en absolu :

position: absolute; bottom: 0;

Mais on observe le même problème : le footer se positionne tout en bas de l'écran, mais ne reste pas en bas quand on fait défiler.

3/ enfin, en positionnement fixé, ça donne ce que tu voudrais avoir :

position: fixed; bottom: 0;

Ce qui demande par contre :
- de se débrouiller pour centrer le footer, qui est sorti du flux du document suite à son positionnement fixé (même chose pour le positionnement absolu) ;
- de prendre son mal en patience : Internet Explorer ne comprend pas position: fixed; .

C'est tout.

Je me lance à tout hasard : puisque ça marchait sous IE6 et pas sous FireFox ni Safari, pourquoi ne pas faire un hack-IE6 en passant par un :

#footer { 
   text-align: center;
   position:absolute;
   bottom:0px;
}
html>body #footer{
   position: fixed; 
   bottom: 0;
}

Ce qui permetterait de conserver le meilleur pour les 2 cas possibles (à moins que ce ne soit une version trop brutale, mais pourtant valide CSSement parlant)...

Il faudra également s'affairer à centrer le footer par la suite (voir maintenant si le centrage est pris en compte sous IE ou pas) mais ça c'est une autre histoire....

---
Je me demande si le sujet n'était pas résolu en fait...
Modifié par Goose (22 Feb 2006 - 15:17)