18073 sujets

Questions générales et questions de débutants

[résolu]Affichage correct menu CSS uniquement sous IE ... ?

Bonjour,
J'ai suivi un tutorial du site pour créé un menu en CSS et javascript (menu horizontal : http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal.htm) et je l'ai associé au tutorial suivant pour le rollover sur une image sans javascript (http://css.alsacreations.com/Construction-de-menus-en-CSS/Une-image-reactive-rollover-sans-javascript).

Ma page de test est la suivante : http://10zign.free.fr/test/index.htm

Mon problème est que l'affichage sous IE est correct mais avec les autres navigateurs que j'ai testé sur PC (Firefox, Opera, Netscape) et sur Mac (Safari, IE et Firefox) le résultat est complétement inattendu Smiley eek ...

Tout le code est dans la source de la page...

J'ai cru comprendre que cela pouvait venir des marges mais je n'en suis pas sûr étant donné ma petite expérience dans le domaine de la création de site.

Si quelqu'un qui passe par là pouvait éclairer ma lanterne se serait vraiment sympa Smiley biggrin .

Merci.
Modifié par fabouse (05 May 2006 - 14:23)
Bonjour fabouse,

Pour que ton menu apparaîsse sur toute sa largeur avec FF, il faut que tu donnes la largeur de tes menus à la balise dl, soit :

width: 90px;


Ensuite, il faut que tu mettes la source du background de ton menu à la balise dt a, soit :

#menu dt a { /* source de l'image du background */
background: url(http://10zign.free.fr/test/bg_menu3.gif) no-repeat 0 0 ; 
}


Puis, tu n'as plus besoin de répèter l'image du background pour les balises dt a, individuelles, suivantes.

Tu leur donnes simplement une position, soit, par exemple, pour les 2 premières :

#menu dt a#produits {
background-position: 0 0; 
}
#menu dt a#references {
background-position: -90px 0; 
}


Et, par exemple, pour les 2 premières hover

#menu dt a#produits:hover, #menu dt a#produits:focus {
background-position: 0 -30px ;
}
#menu dt a#references:hover, #menu dt a#references:focus {
background-position: -90px -30px; 
}

Voila, bon courage Smiley smile
Merci blue d'avoir pris un peu de temps pour me repondre.

J'ai bien suivi tes conseils (j'ai même bien compris la démarche Smiley langue ) mais j'ai toujours un véritable problème d'affichage sur FireFox...
Avec ton code j'obtiens toutefois un petit changement car j'arrive à afficher un bout de du background. Mais par contre j'obtiens un léger décalage des menus sur IE lorsque je survole avec la souris.

Visualisation de la page modifiée avec le code de blue:
http://10zign.free.fr/test/index2.htm

Je me demande si ce problème n'est pas dû au fait que le menu déroulant n'est pas toujours compatible avec le background en css ...

Je continue mes recherches, mais si quelqu'un veut bien m'aider ce sera avec plaisirs Smiley help
Je crois que c'est dû en partie au fait que tu mets une valeur de 0em à ton width de ton menu dl. Essaie plutôt un height...

Tu sembles travailler sur mac alors, je te suggère d'utiliser ce merveilleux programme http://www.tumultco.com/HyperEdit/ qui te permet de visualiser instantanément les changements que tu fais à ta page.
En fait il faut mettre :

width: 90px;

à :

#menu dl

comme je te l'avais dit dans mon premier post

Pour le petit décalage de tes sous-menus, c'est du au fait que tu as mis une bordure de 1px.

Le problème, c'est que si tu diminues la largeur de tes sous-menus de 2px, c'est bon avec FF mais plus avec IE Smiley ohwell
Super Smiley biggrin

Encore un petit effort alors en mettant un [résolu] dant ton titre en éditant ton premier message Smiley cligne
Sujet clos
Aller à