[CSS] Bug alignement en bas

[Albataur]

Salut,

J'ai déja mis le même message sur le forum alsacréations, mais j'ai pas encore réussi à le resoudre donc j'essaye ici

Tout fonctionne bien avec mon site mis à part un bug de positionnement qui apparait à la fois sur IE et FF.
Voici le problème : http://img470.imageshack.us/img470/9656 ... re13ht.jpg

Voici le site sur lequel il y a le problème : -www.narguile.info

L'image remontée est normalement collée en bas, voici le code css que j'ai utilisé pour la positionner :

.foot img{
position: absolute;
bottom: 0px;
right: 0px;
}

L'image est dans une div avec class="foot", vous l'aurez deviné.

Ce problème ne semble apparaitre que sur certaines pages.
Ce que j'ai constaté c'est que lorsque la page est déja en cache, il n'y a pas de problème.
Lorsqu'il y le bug et que l'on déroule le menu déroulant le foot se repositionne correctement. Peut-être que c'est lié à ça.
J'ai essayé plusieurs bricolages pour corriger ça mais rien de concluant.
Pour le moment ce que je fais c'est qu'un des menus est en display:block et le javascript le cache lors de l'évènement onload. Ca fonctionne mais ca laisse le menu ouvert pendant tout le chargement de la page, moyen quoi confus

Quelqu'un sait t'il d'où cela pourrait venir ?

Merci d'avance !

a+

[fra_arf]

Bonsoir, je comprend pas pourquoi tu met ton image en image alors que tu pourai la mettre en background et cela pourrai corriger pas mal de problème je pense.

[jOoL]

pour régler ton problème, tu remplace le code du bas de ta page:

Code: Tout sélectionner

...
   </div>
   
   <img src="img/bas.png" alt="Foot" class="foot">
   
   <p class="signature">
   Site déclaré à la cnil n°1106493 - <a href="infos.php">Crédits</a> -      <a href="contacts">Contacts</a>

   </p>
   
   
</div>



par celui-ci:

Code: Tout sélectionner

...
   </div>
   
      <div id="footer">
         <img src="img/bas.png" alt="Ceci est une description qui contient des mots-clés">
         <p class="signature">Site déclaré à la cnil n°1106493 - <a href="infos.php">Crédits</a> -      <a href="contacts">Contacts</a>
              </p>
       </div>
   
   
</div>



ensuite, dans ta css, tu enlèves la class ".foot img", et tu mets cette définition la:

Code: Tout sélectionner


/* FOOTER */

#footer{
   position:absolute;
   bottom:0;
   width:750px;
   margin:auto;
   text-align:center;
}


et ça devrait résoudre ton affaire.

jOoL



[/code]

[Albataur]

Merci à fra_arf et jOol pour vos réponses

fra_arf >

En fait c'est pas si évident que ça de le mettre en fond ...
Je pourrais mettre l'image en fond de quel div ?
Celle qui englobe tout a déja pour fond une ligne d'1px qui fait le fond principal étirable.

jOol >

J'ai fait exactement ce que tu m'as dit (mis à part les mots clés).
La bonne nouvelle c'est que ça met bien le foot à l'endroit qu'il faut. La mauvaise c'est que ça ne corrige pas le bug


Cependant je crois que j'ai trouvé l'origine du problème et l'explication me semble assez logique.

Je pense que le bug vient du fait que je ne spécifie pas les dimensions des images et en particulier leur hauteur.
Du coup lors du chargement de la page et du calcul des positionnements des éléments de ma page, le navigateur n'arrive à savoir où placer le foot pour qu'il soit tout en bas.
Il me semble que le navigateur calcule la hauteur totale de la div étirable en faisant la somme de tous les éléments de cette div.
Or il fait ce calcul une fois qu'il a reçu tout le html et à ce moment là il ne connait pas encore la hauteur des images puisqu'elle sont chargées ensuite.

Ca pourrait expliquer également pourquoi ça remet tout en ordre lorsqu'on déroule le menu déroulant. Le navigateur doit "rafraichir" la page en recalculant toutes les hauteurs, et vu que l'image est en cache, il connait sa hauteur et peut faire le calcul correctement.

En tout cas, j'ai modifié mon code php pour mettre des attributs de hauteur sur les images et ça a l'air de ne plus faire le bug

[jOoL]

en fait c'est tout bête.

Tu laisses le <div id="footer">

et dans la css, tu enlèves simplement les valeurs:

Code: Tout sélectionner

position:absolute;
bottom:0;

Tu ajoutes la valeur:

Code: Tout sélectionner

clear:both;

et ton div footer sera toujours en bas.

Cette fois c'est sur, ça va marcher.


En fait, le position absolute, bottom:0, se calcule a partir du bas de l'écran. Hors, si ta page est plus longue que l'écran, ton footer n'est pas en bas de la page.

[Albataur]

C'est loin d'être aussi simple malheureusement.
Regarde l'image foot, elle doit recouvrir en partie la div de contenu (étirable) pour que l'arrondi se mette sur les bords du cadre.
Je ne peux donc pas le laisser dans le flux normal.

[jOoL]

mmm...

je dois partir now, mais envoie moi un mp, et je verrai si je peux t'aider demain ou lundi

[Albataur]

Merci de m'avoir proposé ton aide.
J'ai résolu le problème spécifiant dans toutes les images l'attribut height.

J'ai essayé vraiment beaucoup de solutions mais aucune n'a fonctionné