[CSS-JS] Problème de menu déroulant avec surlignage

A

anaeksounamoun

Nouveau membre
bonjour tout le monde,

voila j'ai un problème que je n'arrive pas a résoudre en fait je veux que quand l'on passe sur la ligne d'un menu la couleur change. J'ai réussi a le faire sur les sous menu mais pas sur les menus principaux. Je ne sais pas si c parce que l'on ne peut exécuter un :hover sur un <div> ou si c un autre problème.
Vous pouvez voir ce que j'ai fait a l'adresse suivante :
Vous devez être connecté pour voir les liens.

par contre cette version ne marche pas car le hover ne fonctionne que sur le "a" sous IE mais cela fonctionne sous Mozilla.
Donc si quelqu'un a une idée a me sousmettre qu'il n'hesite pas et s'il a une solution pour que cela marche aussi avec IE se serait encore plus génial... Merci d'avance a tous ...
:)
 
KangOl

KangOl

Grand Maître
oui, http://dean.edwards.name/IE7/

ou mieux encore, http://css.maxdesign.com.au/listamatic/
 
J

Johan_et_Pirlouit

Grand Maître

Pour ton info, le :hover se fait surtout par les CSS.. Et là, ça fonctionne avec à peu près n'importe quoi (<img>, <a>, <div>, <span>, ...).. En regardant ta feuille de style, je n'en vois aucun..

Autre chose : minimise le plus possible l'emploi du JavaScript.. Ce n'est pas un toujours modèle de sécurité et il existe des utilisateurs qui l'ont désactivé sur leur navigateur pour cette raison.. Dans ce cas, pour eux ton site risquera d'être dégradé au point qu'ils ne reviendront pas.. D'autant plus que chaque navigateur a sa propre version de JS, plus ou moins compatible avec les autres..

En matière de mise en page, les CSS sont là pour remplacer JS et apporter une plus grande facilité, une plus grande souplesse de programmation et en réduisant mieux les disparités de support d'un navigateur à l'autre par le fait que CSS comme XHTML est une norme.. Ce sont les bases du XHTML.. Toi qui a justement la bonne idée de l'utiliser en version Strict, va au bout de la démarche.. Pour ça, en plus de ce que vient de te transmettre KangOl, tu as aussi le Topic Unique pinné en gras et en haut de la liste >>
Vous devez être connecté pour voir les liens.
..

Si tu emploies JS, comme pour tes menus déroulants, fais en sorte que ton site reste pleinement fonctionnel au cas où JS est désactivé.. C'est très simple à vérifier : avec FF, tu désactives JS dans les options, tu recharges la page et tu vois les "dégats".. JS ne doit rester qu'un "plus" et ne pas être la colonne vertébrale du site.. J'avais lu quelque part qu'il est toujours plus agréable de constater que, dans certains cas, le site se dégrade avec élégance plutôt que de finir comme un paquet de gravats :D..

Pour ton cas, les options du menu principal ne sont pas cliquables.. C'est une faiblesse.. Chaque option d'un menu doit être cliquable et renvoyer sur une page.. Par exemple : ton "Suivi de commande" doit amener sur une page d'entre-deux qui, elle, va proposer les liens vers Commandes, Factures et ce que tu mettras dans le sous-menu lié à "Suivi de commande".. En furetant le Web, tu constateras que nombre de sites sont construits ainsi.. Mieux vaut toujours un peu "trop" que "pas assez"..

:merci:
 
R

roro166

Nouveau membre
Salut je suis le binome de anaeksounamoun

En faite le probleme que nous avons pour le moment est l'utilisation correcte de notre nouveau menu deroulant (plate forme d'essaie)
Vous devez être connecté pour voir les liens.


Sous le navigateur mozilla ca marche correctement par contre (et comme d'habitude) sur IE ca plante ...

je te redonne le code que j'utilise

feuille css

body {
behavior:url("../htc/csshover.htc");
}

ul, li, a {
display:block;
margin:0;
padding:0;
border:0px none;
}

ul {
width:150px;

background-color:grey;
list-style:none;
}

li {
position:relative;
padding:0;
padding-left:0;
text-align: center;
background-color:lightblue;
z-index:9;
}
li.folder {border:1px solid #9d9da1 }
li.folder ul {
position:absolute;
left:151px; /* IE */
top:5px;
}
li.folder>ul { left:140px; } /* others */

a {
padding:2px;
border:1px solid white;
text-decoration:none;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>a { width:auto; } /* others */

li a.submenu {

}

/* regular hovers */

a:hover {
border-color:gray;
background-color:#bbb7c7;
color:black;
}
li.folder a:hover {
background-color:#bbb7c7;
}

/* hovers with specificity */

li.folder:hover { z-index:10; }

ul ul, li:hover ul ul {
display:none;
}

li:hover ul, li:hover li:hover ul {
display:block;
}

la page html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="stylemenuderoulant2.css"/>
</head>

<body>

<ul id="menu">
<li class="folder"><a href="#" class="submenu"> Menu1 </a>
<ul>
<li><a href="#"> Sous-Menu1.1 </a></li>
<li><a href="#"> Sous-Menu1.2</a></li>
<li><a href="#"> Sous-menu1.3 </a></li>
</ul>
</li>
<li class="folder"><a href="#" class="submenu"> Menu2 </a>
<ul>
<li><a href="#"> Sous-Menu2.1 </a></li>
<li><a href="#"> Sous-Menu2.2</a></li>
<li><a href="#"> Sous-menu2.3 </a></li>
</ul>
</li>
<li class="folder"><a href="#" class="submenu"> Menu3</a>
<ul>
<li><a href="#"> Sous-menu3.1 </a></li>
<li><a href="#"> Sous-menu3.2 </a></li>
<li><a href="#"> Sous-menu3.3 </a></li>
</ul>
</li>
<li class="folder"><a href="#" class="submenu"> Menu4 </a>
<ul>
<li><a href="#"> Sous-Menu4.1 </a></li>
<li><a href="#"> Sous-Menu4.2</a></li>
<li><a href="#"> Sous-menu4.3 </a></li>
</ul>
</li>
</ul>
</body>
</html>

La question est : suis je obliger d'utiliser du css 2 pour faire passer ce menu sous IE? (dois je attendre une eventuelle compatibilité IE 7 !!!!!!!!! :D ) .
Sinon je sais que l'on peut faire un hack IE mais ce n'est pas tres correcte niveau navigateur et esthetique du code.

Je vous remerci a tous pour l'aide et a Johan_et_Pirlouit pour ses conseils d'or ...
 
marsien

marsien

Grand Maître
Je te rassure, ça ne marche pas non plus sur IE7 beta 1 :D

Pourquoi, je ne sais pas... Mais ca marche bien sous Opera et Firefox ! Donc spa grave pour IE, toute façon personne l'utilise :p
 
J

Johan_et_Pirlouit

Grand Maître
Manifestement, c'est ce que je pensais, IE ne sait utiliser la pseudo-classe ':hover' qu'avec la balise <a>..

Donc, pour un menu déroulant comme celui dont nous parlons, s'il est manifeste qu'il fonctionne avec la plupart des navigateurs récents (j'ai pu tester avec FF 1.0 Win et Linux, FF 1.5 Win, Opera 8.5 Win et Linux et konqueror 3.3 Linux), en revanche, impossible qu'il fonctionne en l'état avec IE (testé avec IE 5.5 et IE 6.0)..

Petite note pour IE 5.5 en guise de parenthèse : la déclaration de style générale de liens de ton code provoque un espace entre le côté gauche du lien 'a.submenu' et le bord gauche de son contenant 'li.folder'.. J'y ai remédié en déclarant dans la CSS :
[cpp]a { width: auto; padding: 2px; text-decoration: none; color: gray; font-weight: bold; border: 1px solid white; }[/cpp]avec 'width: auto' à la place de 'width: 100%'.. Ca n'a rien changé pour IE 6.0, mais le bouton avec IE 5.5 reprend une forme "normale", à l'exception du texte qui reste encore un peu décalé.. M'enfin, c'est moins moche.. Et puis, combien utilisent encore IE 5.x ? Peu, je sais............. Et qui s'en plaindra ??..


Sinon, pour les déroulants, j'ai trouvé un article traduit en français qui traîte de la chose et qui nous oblige à passer par du JavaScript pour IE :
>>
Vous devez être connecté pour voir les liens.


Par contre, je n'ai pas eu le temps de tester la solution proposée.. Vois si elle fonctionne ;)..

D'où un petit besoin de penser à la manière dont le site se dégradera en cas de JavaScript désactivé :)..

:merci:
 
R

roro166

Nouveau membre
Je vous remercie à tous pour l'interet porter sur ce sujet. Maintenant je vois bien mieux les problemes lié aux navigateurs (et aussi aux versions ;-) )
Je vais essayer d'adapter un autre style de menu deroulant compatible IE

A bientot bye
 
J

Johan_et_Pirlouit

Grand Maître

As you want ;).. Mais faire un menu respectant les recommandations W3C comme le tien et, en parallèle, coller un ajout spécifique IE n'est pas un réel problème.. Si ça provoque le fait que ta feuille CSS n'est plus valide, tant pis.. De toutes façons, c'est un peu plus souvent nécessaire qu'on ne le pense.. Ca ne gènera en rien la validité de ton code XHTML et tu pourras te faire plaisir à envisager des mises en pages comme tu les souhaites.. C'est vrai qu'avoir le logo "CSS Valide" est sympa, mais avec IE c'est assez difficile, sauf à faire des sites de construction assez basique et à se servir pas mal de JS pour compenser.. Par contre, aucune difficulté à avoir un code "XHTML Valide"..

Pour info, mon site n'est pas du tout CSS Valide [:spamafote].. Mais je cherche à réduire au maximum l'emploi de JS tout en obtenant les mêmes résultats de mise en page..

Sinon, d'avoir cherché une réponse à ta question, ça m'a permi de trouver de quoi améliorer quelque peu cet aspect technique "menu déroulant" pour mon site (actuellement, il est certes en CSS, mais n'est piloté que par JavaScript).. Comme quoi ;)..

:merci:
 
R

roro166

Nouveau membre
:) Si j'arrive a faire un menu deroulant correcte valide W3C si te donnerais 2 ou 3 conseils :D

 
J

Johan_et_Pirlouit

Grand Maître
:D






N'empêche, je suis toujours preneur : comment donner si on ne reçoit pas au moins un petit peu ? ;)...

:merci:
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Dernières actus
Derniers messages publiés
Statistiques globales
Discussions
730 131
Messages
6 717 943
Membres
1 586 382
Dernier membre
alejandrooo
Partager cette page
Haut