Menu déroulant

Ce tuto d'AlsaCréations sur les menus déroulants devrait t'aider >> http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

Et l'exemple de menu en version horizontal utilisé dans ce tuto >> http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal.htm

 

justement, je l'ai déjà testé et il ne marche pas. c'est pour ca que je viens vous voir, parce que j'ai utilisé les ressources du net.

Justement, tu pourrais nous expliquer ce que tu obtiens et ce que tu devrais obtenir ?

La seule chose que je vois se sont les sous-menus "Plans" et "Photos" qui ont exactement les mêmes dimensions et positionnement (ça peut être voulu, on ne peut pas deviner ).. Idem pour la présence des puces de listes, qui sont visibles sur mon Firefox..

Et gare à IE : il ne comprend pas la pseudo-classe :hover ailleurs que sur l'élément <a> ('a:hover').. Pour les autres éléments, :hover est tout simplement ignoré.. Dans le cas d'un menu seulement défini par les CSS, IE ne saura pas le faire fonctionner, il lui faudra du JavaScript..


Sinon, pour faire un site à peu près "potable" en matière de rendu et de compatibilité avec la majorité des navigateurs du commerce, il faut effectuer des tests avec MS Internet Explorer, Mozilla Firefox et Opera (quand on programme sur PC Windows ; c'est un peu plus ardu quand on est sur Mac ou sur Linux, on n'a pas directement IE)..

Sachant que désormais Firefox et Opera sont très proches en matière de rendu visuel des pages, puisque respectueux des recommandations W3C, ce qui n'est toujours pas le cas d'IE (6.0 ; je ne connais pas IE 7).. Deux autres navigateurs sont aussi assez bien respectueux et ne posent que peu de pb : Konqueror (Linux sous environnement KDE) et son jumeau amélioré Apple Safari (sur Mac OS X). On peu considérer que si un site passe sans encombres sur Firefox (1.5) et Opera (9.0), il passera de la même manière avec Safari et quasiment pareil avec Konqueror. Par contre, IE reste une "bête à part".

La règle de programmation étant de faire un site respectueux des recommandations, puis seulement après de l'adapter à IE en utilisant toutes les bidouilles CSS spéciales IE, voire du JavaScript juste pour lui..

 

bon, j'ai fait des améliorations en travaillant avec FF. C'est mieux, non? En revanche, sous IE, c'est pas encore ca: pas de sous-menu et un décalage des cases...

Tout d'abord, je t'invite à installer Opera : tes déroulés sortent de l'écran par le haut...... Opera n'est pas lourd et trouvera sans causer de soucis une petite place dans tes applis Web, ne serait-ce que pour tes tests (comme chez moi)..

Pour IE, il faut bien avoir à l'esprit que les dimensions 'width' et 'height' ne sont pas fixes.. Elles se comportent comme des 'min-width' et 'min-height' que d'ailleurs IE ne reconnaît pas (pas plus, d'ailleurs, que les 'max-width' et 'max-height' ; comme tout ce qui est 'min-' ou 'max-', en fait)..

Dans un navigateur respectueux, une dimension 'width' ou 'height' est fixe et si le contenu doit déborder, il débordera (sauf en utilisant la propriété 'overflow' qui contrôlera ce débordement) ! Dans IE (sauf avec l'usage d' 'overflow'), il fera s'agrandir le conteneur (très probablement ce qui se passe dans ton cas avec ton a { display: block; } "spécial IE", à cause de la mise en "bloc" de l'élément) : dans ton menu, tes cellules de menu me paraissent particulièrement peu hautes par rapport au texte contenu.. Une soluce, ne pas leur fixer de hauteur ou alors une hauteur variable fonction du contenu - ici du texte - du genre 'height :1.5em'..

Gare aussi aux pseudo-classes : si IE reconnaît bien :hover, :active et :visited (les plus courantes car généralement associées à l'élément <a>), ce n'est pas forcément la même chanson pour les autres du genre :before, :after, :first-child etc.. En clair, IE reconnaît plutôt bien les certaines pseudo-classes généralement associées à l'élément <a>, mais il est bien plus dur de la feuille avec les autres pseudo-classes et/ou quand on les applique à d'autres éléments.....

A relire le menu proposé par AlsaCréations dont j'ai parlé plus haut, je vois qu'il ne pose aucun pb quel que soit le navigateur, qu'il fait précisément ce que tu désires, mais - car il y a un "mais" - qu'il passe exclusivement par l'emploi de JavaScript pour son comportement  ..

Alors voici une autre piste que je viens de retrouver, réduisant l'emploi du JS uniquement à IE (c'est ce que j'utilise sur mon site et pas que pour les menus  ) :

La vengeance des menus déroulants >> http://pompage.net/pompe/deroulants/..
D'ailleurs, mettre des liens "généraux" directement dans la barre principale de ton menu est un très bon choix : pour IE et en cas de désactivation de l'exécution des scripts, ton site reste navigable..