Décalage des items du menu ?

Bonjour,
voici un site qui semble connaître des décalages des items de son menu : http://www.XXXXXX.com
Connaissez-vous ce genre de désagréments sur vos écrans ?
Merci et à très bientôt !
Modifié par starlet (25 Nov 2007 - 15:25)

Bonjour,

Gandi a écrit :
Le site web demandé n'existe pas

Donc aucun décalage constaté.

Heu…

Gandi a écrit :
Le site web demandé n'existe pas.

edit: ça, c'est du joli grillage!
Modifié par Benjamin D.C. (25 Oct 2007 - 12:52)

il est pourtant accessible de chez moi ...ce site

Oui moi j'y ai accés
De quels décalages parles tu?

Starlet,

Il faudrait dans un premier temps valider ton code
Tu utilises par 2 fois l'id fond, et ça c'est mal
Ensuite, si tu parles de la position du texte dans ton menu, effectivement ce n'est pas très "heureux", sans doute qu'en modifiant un peu la taille de la police et en centrant le texte de tes "4 menus" obtiendrais-tu un "meilleur rendu" ?

Enfin, pour information, tu peux obtenir l'effet recherché de ton menu sans utiliser d'image ( bouton-roll ) uniquement en css...un peu de recherche

Merci 6l20 de m'avoir aiguillé !
Modifié par starlet (26 Oct 2007 - 15:36)

herman, mille excuses je n'avais pas fait attention à ton post :
Hé bien sous internet explorer 6 les items du menus sont très espacés et certains se chevauchent .... halalalala, je n'avais pas encore rencontré ce problème mais là .... je pense que je vais ajouter un commentaire conditionnel pour ie6 et rediriger vers une feuille de style pour cette version d'IE

Attention tu as un height:25px au niveau de ul#menu1. Ce qui ne pause pas
problème pour IE6 puisqu'il le gère comme un min-height mais vérifies bien tes règles CSS.
Modifié par Hermann (26 Oct 2007 - 18:07)

starlet a écrit :
Hé bien sous internet explorer 6 les items du menus sont très espacés et certains se chevauchent ...

Le chevauchement vient du positionnement absolu des blocs: si un bloc est trop haut, il ne fera pas descendre le bloc suivant, les deux (ou même un seul des deux) étant positionnés en absolu.

Le problème de l'espacement excédentaire entre les items du menu sous IE6 est quant à lui dû à un bug dont on parle dans l'article suivant:
http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-mise-en-forme-du-code-html
(cf. la dernière partie de l'article... mais lire tout l'article n'est pas interdit ).

Concrètement: on peut se contenter de corriger le second problème, et garder le positionnement absolu pour l'instant. Ça n'est pas idéal, vu qu'on ne gère pas la question de l'extensibilité en hauteur... mais à vrai dire c'est tout le site qui est inadapté au web:
- c'est un site-plaquette conçu par des personnes ayant des compétences en graphisme print et pas par des professionnels du Web à proprement parler (ceci dit sans vouloir offenser personne);
- la volonté de faire quelque chose de très graphique a primé sur les questions d'accessibilité et de référencement, alors qu'un juste milieu aurait été possible.

Mais tout ça est une autre histoire.

Merci Florent pour ces instructions constructives !
En ajoutant des balises span aux ul le problème peut être réglé ?

Donc si j'ai bien tout compris, IE6 interpréte comme retour ligne (des balises li
palcées les unes sous les autres dnas le code de la page)? Ainsi en mettant
ces balises li les une à la suite des autres sans espace, permet de remédier au
probléme ! [Edit par Hermann]
Modifié par Hermann (26 Oct 2007 - 21:50)

Je ne sais pas d'où viennent les test de Florent mais je ne vois de positionnement absolue nulle part.
L'espace vertical entre les item vient tout simplement de la valeur du line-height:26px qui doit excéder celui des background.
Dans ce cas là de liste verticale, la mise en forme du code n'y changera rien.
Modifié par Hermann (27 Oct 2007 - 22:48)

Hermann a écrit :
Je ne sais pas d'où viennent les test de Florent mais je ne vois de positionnement absolue nulle part.

Heu... ben j'ai juste regardé cette page : http://www.mariethibaut.com/
Et dans la feuille de style http://www.mariethibaut.com/index.css il y a bien cinq fois position: absolute. En particulier, ul#menu1, ul#menu2, ul#menu3 et ul#menu4 sont positionnés en absolu.

Hermann a écrit :
L'espace vertical entre les item vient tout simplement de la valeur du line-height:26px qui doit excéder celui des background.

Oui, ça c'est pour l'espace vertical normal. Il y a de plus un espace vertical parasite dans IE6, qui est dû à priori au bug que j'indique (et dans ce cas la mise en forme du code HTML y changera quelque chose).