Discussion :

[jlb59]

Bonjour à tous,

Pourriez-vous me dire pourquoi des images d'un menu ne s'affiche pas.

J'ai récupéré le script par hasard, et seul ça marche, mais quand je l'inclue au site, y a plus rien.
Pourtant, le chemin spécifié dans le css est correct (enfin je crois) et les images sont bien présentent dans le rép. spécifié.

De plus, voudriez-vous m'expliquer ce qui est en gras ?

a.drop {background:#ffffff url(../images/blue-arrow.gif) no-repeat 100px center;}

Je comprends plus parce qu'avant, j'avais un menu avec images qui était correct ???

Merci de votre aide.

[Erwan31]

Bonjour,
pour la disparition de ton image comme toujours, impossible de te dire pourquoi sans le code...
Les 2 valeurs de la propriété background sont des valeurs de backgroung-position, la première valeur est celle du placement hozontale et l'autre pour le placement vertical (sauf si mot clés explicit comme top ou right).
Donc ici l'image débutera à 100px du bord gauche de son élément conteneur et son centre vertical sera centré sur le centre vertical de son élément conteneur.

[jlb59]

Bonjour Erwan31,

Merci pour ces explications, ça me sera utile par la suite.

Voici le code comme tu l'as demandé :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#menutab  {text-indent : 5px;font: bold 9px verdana,arial,garamond,sans serif,serif;padding : 0;margin : 0;border:1px solid red;width:100%;}

#menutab .menu {width:99%; height:30px; position:relative; z-index:1;border-right:3px solid #ffffff;border-left:3px solid #ffffff;}

#menutab .menu ul {padding:0;margin:0;list-style-type:none;}
#menutab .menu ul ul {width:115px;}
#menutab .menu li {float:left;width:115px;position:relative;background:#ffffff url(images/down-blue-arrow.gif) no-repeat;}
#menutab .menu a, #menutab .menu a:visited {display:block;text-decoration:none; color:#ffffff; width:138px; height:20px; border:1px solid #000000; border-width:1px 0 1px 1px; background:#A52A2A; padding-left:10px; line-height:20px;}

#menutab .menu ul ul a.drop, #menutab .menu ul ul a.drop:visited {background:#ffffff url(../images/grey-arrow.gif) no-repeat;}
#menutab .menu ul ul a.drop:hover{background:#ffffff url(../images/blue-arrow.gif) no-repeat;}
#menutab .menu ul ul :hover> a.drop {background:#ffffff url(../images/blue-arrow.gif) no-repeat;}
#menutab .menu ul ul ul a, #menutab .menu ul ul ul a:visited {color:#000000;background:#D2691E;}
#menutab .menu ul ul ul a:hover {color:#ffffff;background:#A52A2A;}

#menutab .menu ul ul {visibility:hidden;position:absolute;height:0;top:20px;left:0; width:149px;border-top:1px solid #000000;}

#menutab .menu ul ul ul{left:1115px; top:-1px; width:115px;}
#menutab .menu ul ul ul.left {left:-115px;}
#menutab .menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
#menutab .menu ul ul a, #menutab .menu ul ul a:visited {background:#A52A2A; color:#ffffff; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
#menutab .menu a:hover, #menutab .menu ul ul a:hover{color:#000000; background:#FFFF00;}
#menutab .menu :hover > a, #menutab .menu ul ul :hover > a {color:#000000; background:#d2691e;}
#menutab .menu ul li:hover ul,
#menutab .menu ul a:hover ul{visibility:visible; }
#menutab .menu ul :hover ul ul{visibility:hidden;}
#menutab .menu ul :hover ul :hover ul{ visibility:visible;}

Je sais pas si tu peux voir qq chose, mais si tu as une idée, ça me serait d'un grand secours

[Erwan31]

Si tu es arrivé jusqu'à là tu devrais quand même pouvoir te débrouiller
tout seul pour ce genre de problèmes basiques et faire les tests qui s'imposent.
Sans une page en ligne impossible de te dire d'où ça peut venir...

Au passage ton menu sera partiellement inaccessible sous IE6- puisque la pseudo-classe :hover ne fonctionne que sur les liens et les sélecteur d'enfant (...>...) n'ont pas été implémenté sur ces versions d'IE

Si tu souhaites obtenir un affichage rapide du contenu, essaye de ne pas trop multiplier les descendances sur plusieurs niveaux comme celles-ci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#menutab .menu ul ul ul a:hover {color:#ffffff;background:#A52A2A;}