Bonjour,
je suis parti du tuto menu-horizontal.htm, mais ça ne me convenait pas trop. Ce qui me pose problèmes c'est que le sous-menu est parfaitement aligné et de la même taille que le menu correspondant si on utilise des dd dl et dt.
Or j'ai besoin de faire un truc ressemblant à ce menu, on peut voir que la liste des sous menu est plus large que la taille du lien menu, et qu'il vient même "mordre" un peu sur le deuxième menu.
J'ai donc voulu repartir de 0 ou presque en m'inspirant de cet exemple, mais j'ai un peu de mal. J'ai essayé avec 2 listes imbriquées.
Voici mon code :
Source HTML
Fichier CSS :
2 questions, 3 mêmes :
- est ce que vous voyez des gros problèmes dans mon CSS ou dans la structure de mon menu html ?
- un premier problème que j'ai concerne les attributs des <li> du sous menu, ils gardent les attributs des <li> du menu principal ce qui est plutôt embetant. Ce qui est bizarre c'est que pour certain attributs ça marche et pas pour d'autres. Par exemple j'ai mis un fond jaune juste pour tester, et le fond jaune se voit bien pour les <li> du sous menu, par contre la taille de la police ainsi que l'image de fond (la puce) sont les mêmes que pour les <li> du menu principal. Comment puis je faire pour régler ce problème ?
- autre problème, par contre là j'avoue que j'ai pas encore beaucoup cherché là dessus, c'est comment placer les éléments de la liste du sous menu en dessous du menu correspondant, puisque ce n'est plus automatique (ce n'est plus un tableau dd dt et dl) ?
Merci beaucoup à celui (celle ?) qui pourra bien m'aider
Modifié par vichenze (25 Mar 2008 - 14:14)
je suis parti du tuto menu-horizontal.htm, mais ça ne me convenait pas trop. Ce qui me pose problèmes c'est que le sous-menu est parfaitement aligné et de la même taille que le menu correspondant si on utilise des dd dl et dt.
Or j'ai besoin de faire un truc ressemblant à ce menu, on peut voir que la liste des sous menu est plus large que la taille du lien menu, et qu'il vient même "mordre" un peu sur le deuxième menu.
J'ai donc voulu repartir de 0 ou presque en m'inspirant de cet exemple, mais j'ai un peu de mal. J'ai essayé avec 2 listes imbriquées.
Voici mon code :
Source HTML
<ul id="menu">
<li id="menu1" onmouseover="javascript:montre('smenu1');" onMouseOut="javascript:montre();">
<a href="les-objectifs.html">l'association</a>
<ul class="smenu" id="smenu1">
<li>
<a href="les-objectifs.html">Les objectifs</a>
</li>
<li>
<a href="notre-action.html">Notre action</a>
</li>
<li>
<a href="composition-association.html">Composition de l'association</a>
</li>
[...]
</ul>
</li>
<li id="menu2" onmouseover="javascript:montre('smenu2');" onMouseOut="javascript:montre();">
<a href="usage-produits.html">les dépendances</a>
<ul class="smenu" id="smenu2">
<li>
<a href="usage-produits.html">L'usage de produits</a>
</li>
<li>
<a href="dependances-physique-psychologique.html">Dépendances physique et psychologique</a>
</li>
[...]
</ul>
</li>
[...]
</ul>Fichier CSS :
/********** MENU **********/
/*** NIVEAU 1 ***/
#menu {
float:left;
position: relative;
z-index:100;
height:34px;
font-family: Tahoma, Verdana, Arial;
font-weight: bold;
list-style-type: none;
padding: 0;
margin: 0 0 0 63px;
}
#menu li {
float: left;
margin: 5px 27px 0 0;
font-size:18px;
background-image:url(images/interface/puce_menu.png);
background-repeat: no-repeat;
background-position: 0 3px;
padding-left: 1.2em;
}
#menu li a {
text-decoration: none;
}
#menu1 a{
color:#001F6C;
}
#menu2 a {
color:#A1B1C6;
}
#menu3 a {
color:#BED945;
}
#menu4 a {
color:#FC9410;
}
#menu5 a {
color:#716663;
}
/*** NIVEAU 2 ***/
.smenu {
position: relative;
z-index:100;
font-family: Tahoma, Verdana, Arial;
font-weight: bold;
list-style-type: none;
padding: 0;
margin:0;
background:red;
}
.smenu li {
list-style-type: none;
background:yellow;
background-image:url(images/interface/puce_ss_menu.png);
background-repeat: no-repeat;
background-position: 0 3px;
padding-left: 1.2em;
font-size:10px;
}2 questions, 3 mêmes :
- est ce que vous voyez des gros problèmes dans mon CSS ou dans la structure de mon menu html ?
- un premier problème que j'ai concerne les attributs des <li> du sous menu, ils gardent les attributs des <li> du menu principal ce qui est plutôt embetant. Ce qui est bizarre c'est que pour certain attributs ça marche et pas pour d'autres. Par exemple j'ai mis un fond jaune juste pour tester, et le fond jaune se voit bien pour les <li> du sous menu, par contre la taille de la police ainsi que l'image de fond (la puce) sont les mêmes que pour les <li> du menu principal. Comment puis je faire pour régler ce problème ?
- autre problème, par contre là j'avoue que j'ai pas encore beaucoup cherché là dessus, c'est comment placer les éléments de la liste du sous menu en dessous du menu correspondant, puisque ce n'est plus automatique (ce n'est plus un tableau dd dt et dl) ?
Merci beaucoup à celui (celle ?) qui pourra bien m'aider
Modifié par vichenze (25 Mar 2008 - 14:14)
).
), le problème vient du margin-left. Je lui donne une valeur négatif pour le décaler vers la gauche, mais comme les <li> du menu principal non pas tous la même largeur c'est pas très joli parce que du coup le sous menu n'est pas calé au même endroit pour chaque menu 
