Bug alignement en bas

Bonjour,

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/mypicture13ht.jpg

Voici le site sur lequel il y a le problème : http://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{
	height:35px;
}

.foot img{
	position: absolute;
	bottom: 0px;
	right: 0px;
	/*padding-top: 1em;*/
}

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. J'imagine donc 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

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

Merci d'avance

a+

Salut et bienvenue parmis les alsanautes
Ils sont pas mal tes menu déroulants en plus tous en CSS.

Bon concernant ton problème, je ne vois pas a priori d'ou peut venir ce bug mais pourquoi mettre ton image dans un div (.foot)
d'un hauteur de 35px alors que ton image fait 229px?
Peut-être le problème vient de là?
Et puis pourquoi mettre ton image dans un div?

Autres chose tu devrais utiliser en priorité les ID plutôt que les class:
voir http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id

Bye
Modifié par Hermann (01 Feb 2006 - 19:45)

Merci pour ton accueil et ta réponse

Je précise qu'en fait le bricolage que j'ai fait ne corrige pas le problème en fait

En ce qui concerne mon problème.
La div foot de 35px de hauteur sert à pousser la div de contenu vers le haut.
margin-bottom:35px ne fonctionnait pas, j'avais trouvé que ça comme solution.
Donc ça répond à tes questions

En ce qui concerne les id et les div, j'ai besoin des id pour le javascript (dans les menus déroulants). Mais surtout, comme j'avais lu que ça ne changeait rien, j'ai préféré mettre tout en class au lieu de m'embrouiller en mélangeant les deux.

a écrit :
margin-bottom:35px ne fonctionnait pas, j'avais trouvé que ça comme solution.
Donc ça répond à tes questions smile

Les marges sur les images devraient fonctionner,
tu as peut-être une erreur de syntaxe. Sinon n'oublie pas les marge négatives.

Finalement t'avais raison j'ai reussi à mettre le margin-bottom (je devais me planter de calque).
La mauvaise nouvelle c'est que ça n'améliore rien ... le problème est toujours là

Bon bon du calme quelqu'un j'espere trouvera d'ou vient ton problème.
Au fait pas mal ton astuce pour faire apparaître un border différent qd on passe le curseur sur les images.
Je l'ai réutlilisé mais par contre ça bug car l'image est flottante.
As tu déja rencontré ce problème?

Ciao
Modifié par Hermann (01 Feb 2006 - 21:19)

Non c'est étrange, ça marche bien pour moi.
Es-tu sûr de bien mettre le hover sur l'image (.class img:hover) et non pas sur la class (.class:hover img) ?
Sur cette page par exemple, ça marche avec le float : http://www.narguile.info/test_silver.php

Salut,
voila mon code

.nouv a img {
float:left; 
margin-right: 12px; 
border: 1px solid #fff
}
.nouv a:hover img
{border: 1px solid #3C3C64}

a écrit :
Es-tu sûr de bien mettre le hover sur l'image (.class img:hover) et non pas sur la class (.class:hover img) ?

Non le hover n'est pas pris en compte par IE sur les éléments autres que les liens mais je pensais que tu le savais. C'est justement pour ça que ta méthode est astucieuse.

Et puis c'est ton DIV conytenu l'image qui est flottant et non l'image, or moi je n'ai pas besoin de div conteneur.

Bon merci quand même, j'ai créé un post sur ce forum pour pauser la question.

Bye
Modifié par Hermann (02 Feb 2006 - 15:23)

Si quelqu'un a un idée ... le bug est toujours là

bonjour,
Je ne sais pas si c'est une idée qui peut te convenir mais voila comment je fais en ce moment...
Lorsque que je veux placer un footer en absolute en pied de page ,
(ou en marge negative en le plaçant juste apres le conteneur principal de la page), je met toujours un div en dernier dans le flux et dans le conteneur principal .
Ce div vide et transparent a la meme hauteur que le pied (qui vient le recouvrir), pour ne pas voir le pied se superposé a un dernier element (qui peut-etre flottant par exemple).
Dans ton code html je vois un <br> utiliser comme un "etireur" peut-etre peut-tu le transformer en un div de 35px de haut, je ne sais pas si cela suffira a ecarter ce bug..., je n'ai pas tester.

Pour le menu, en fait, l'avoir ouvert par defaut au chargement de la page , c'est pas mal, il reste accessible si le javascript est desactiver.
Dans ce cas tu devrait eventuellement aussi lui donner un look different dans le css et reecrire ton css actuel par le bias d'un javascript si celui-ci est activé au chargement .

Je viens de faire une modif de ce genre tres simple sur une base d'alsacreations d'un menu verticale se deroulant sur la droite .Par defaut il reste ouvert verticalement, sans decrocher sur et au dessus du contenu.
(si tu est curieux:une page avec un menu d'alsacreation modifié).
Les liens du tien pourrait etre replacer plus haut dans la banniere ou remplacer par de petites icone alignées horizontalement ...


a plus

Merci pour cette longue réponse

Pour ce qui est de la div de 35px en bas dans le flux normal, c'est exactement ce que j'avais au début et qui ne changeait rien.
En fait le problème c'est que mon foot doit en partie recouvrir le contenu.

Le

<br style="clear:both" />

sert à bien remettre tout en place à la fin dans le cas où des pages contiennent des éléments flottants à la fin.

Pour ce qui est du menu déroulant je pensais plutôt à autre chose si le visiteur n'a pas le js activé : c'est faire un lien vers une page de sommaire sur les bouton qui ouvrent le menu déroulant en hover. La page contiendrait tous les liens du menu déroulant avec éventuellement une petite description.

Il y a quand même quelque chose que j'ai du mal à comprendre dans mon bug. Ca se résoud dès que j'ouvre le menu déroulant. Et pourtant quand je laisse un menu ouvert pendant le chargement de la page et qui se ferme avec l'évènement onload, ça ne fonctionne pas tout le temps