[Résolu] Décalage partiel du sous menu

Bonjour,

J'ai un petit souci avec un menu horizontal.
Le menu est basé sur : http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal2.htm

Le problème est visible ici : http://www.multimonde.net/sitetest

En ouvrant le sous-menu du menu 02, on remarque un léger décalage au niveau du sous-menu 03. Ce décalage se fait uniquement sous firefox.

J'ai remarqué que si je supprime le overflow de la div du contenu, le problème disparait. Donc apparemment les 2 sont liés (...). J'ai beau tourner le code dans tous les sens mais rien n'y fait...

Cela dépasse mes compétences

Merci d'une aide

F.
Modifié par fuerchan (06 Jun 2007 - 18:19)

Salut,

Chez moi tout semble bien aller autour du sous-menu 03 sous firefox. Ou alors je comprends mal ton problème

A+

Bonjour,

Ah je crains que le problème soit plus délicat alors...

En faite lorsque s'affiche les sous menus, un léger décalage ou déformation se fait sur le sous-menu et au niveau de la bordure (dashed) de la div située en dessous.

Voilà une capture du problème.



Bon la compression n'aide pas à l'aperçu, mais on voit bien le décalage sur la droite.

Merci,

F.

Tout est normal chez moi (FF 2.0.0.4 / winXP).

Salut,

Je te confirme qu'il y a bien un décalage avec FF 1.5.0.12. Quant à te dire d'où ça vient et comment le résoudre

FF 2.0.0.4 windows 2000 je le vois....

bon allez maintenant on va essayé de comprendre d'où ca viens.

Ben c'est pas sorcier de savoir d'où ça vient :

1 - chaque dl du menu a une largeur de 8em ;
2 - le dd enfant de la dl a donc une largeur de 8em (affichage de type bloc).

Voili voilou.

Si on veut éviter ça, il faut :
- soit réduire la largeur des dl ;
- soit passer les dd en position: absolute ;
- soit passer les dd en float: left.

Ou encore : ne pas utiliser de menus déroulants. Chaque fois que vous utilisez un menu déroulant, dieu tue un chaton.
Modifié par Florent V. (06 Jun 2007 - 12:36)

a écrit :
Si on veut éviter ça, il faut :
- soit réduire la largeur des dl ;
- soit passer les dd en position: absolute ;
- soit passer les dd en float: left.

Rien n'y a faire

En revanche c'est bien lié à overflow. Car lorsque je l'enlève, tout redevient normal.

a écrit :
Ou encore : ne pas utiliser de menus déroulants. Chaque fois que vous utilisez un menu déroulant, dieu tue un chaton.

Ah, ben il bien peu de chose à faire en ces temps mouvementés (...)

C'est si "pas bien" que ça les menus déroulants ?

Merci,

F.

fuerchan a écrit :
C'est si "pas bien" que ça les menus déroulants ?

Voir le lien dans la signature de Florent

fuerchan a écrit :
Si on veut éviter ça, il faut :
- soit réduire la largeur des dl ;
- soit passer les dd en position: absolute ;
- soit passer les dd en float: left.

Rien n'y a faire
Re-testé à l'instant. Les deux dernières solutions marchent parfaitement.

a écrit :
Re-testé à l'instant. Les deux dernières solutions marchent parfaitement.

Ah, tu peux me faire passer (si possible) le bout code modifié, car visiblement je ne fais la même chose

Autrement j'ai réduit ma div "contener" de 1px et ça marche aussi ou plus exactement je devrait dire ça compense.

F

PS : Pour ce qui est des menus déroulant, effectivement vu sous cet angle c'est un problème est dans ce cas plus de 80 % des sites actuels sont à banir. Ce qui n'excuse en rien les faits bien évidemment. Enfin c'est un sujet bien long...
Modifié par fuerchan (06 Jun 2007 - 15:09)

Ouch, me suis trompé de problème. Je croyais que c'était l'espace à droite du texte qu'il fallait supprimé. J'avais pas vu le tout petit décalage à peine perceptible d'un pixel qui constitue le fond du problème.

Bon. Ça semble effectivement lié à div#page. Supprimer le overflow: auto semble aider. De même que le remplacer par un overflow: hidden (qui jouera le même rôle pour contenir les flottants...).

Une autre chose qui semble marcher, en gardant le overflow: auto : supprimer les marges automatiques et la largeur fixe du bloc (div#page), et lui donner des marges latérales pour compenser les « colonnes » de chaque côté.

Tout ça est à vérifier, mais apparemment c'est la combinaison marges automatiques + overflow:auto qui pose problème.


Mais bon, c'est vraiment du détail. Ça n'est pas comme si c'était aussi grave que le problème d'agrandissement des caractères que l'on constate sur cette page. (Tester l'agrandissement du texte, pour voir... )
Modifié par Florent V. (06 Jun 2007 - 15:33)

La bonne nouvelle c'est qu'en augmentant la taille du texte le problème de départ est résolu

Heyoan a écrit :
La bonne nouvelle c'est qu'en augmentant la taille du texte le problème de départ est résolu

Et en la diminuant aussi. Mais c'est un coup oui, un coup non.

a écrit :
Bon. Ça semble effectivement lié à div#page. Supprimer le overflow: auto semble aider. De même que le remplacer par un overflow: hidden (qui jouera le même rôle pour contenir les flottants...).

Non car je tiens à garder la taille horizontale de la page et donc il me faut overflow: auto;

a écrit :
Une autre chose qui semble marcher, en gardant le overflow: auto : supprimer les marges automatiques et la largeur fixe du bloc (div#page), et lui donner des marges latérales pour compenser les « colonnes » de chaque côté.

Effectivement c'est la bonne solution, j'adopte.

a écrit :
Mais bon, c'est vraiment du détail. Ça n'est pas comme si c'était aussi grave que le problème d'agrandissement des caractères que l'on constate sur cette page. (Tester l'agrandissement du texte, pour voir... biggol )

Oui c'est un détail. Mais bon... Quand à l'agrandissement des caractères effectivement ça déborde des menus et ça devient vite illisible quand on agrandit fort... Mais bon dans ce cas autant désactiver les css et là on agrandit comme on veut... D'ailleurs c'est ce qui est le plus saint pour lire à mon avis. Et je pense avoir des pages propres sans css...
Cela dit l'idéal est quand même idéal et mes connaissances ne vont pas jusque là encore...

Bon ben voilà mon problème résolu, donc encore merci à vous .

F.