Bonjour.
Je m'en remets à vous pour un problème que je ne comprends pas sous Internet explorer (encore lui ??!!!
).
Je m'occupe de la refonte d'un menu et je m'aperçois que les sous menus sont très espacés, sans que je comprenne pourquoi. J'ai essayé d'utiliser des margin:0 et paggin:0 mais rien à faire ! Ce qui est bizarre c'est que les titres du menu n'ont pas tous ce problème d'espace car pour les menus du bas il n'y a pas de problème !! Voyez par vous mêmes (seulement sur IE) : http://www.make-development-inclusive.org/index.php?spk=fr&wid=1024. J'ai même essayé un height:O% ou 1% mais ca n'a fait qu'empirer les choses !!
Voici "la maquette" du menu (code html) :
Et voici mon code css pour le menu :
Merci d'avance pour votre aide
.
Je m'en remets à vous pour un problème que je ne comprends pas sous Internet explorer (encore lui ??!!!
).Je m'occupe de la refonte d'un menu et je m'aperçois que les sous menus sont très espacés, sans que je comprenne pourquoi. J'ai essayé d'utiliser des margin:0 et paggin:0 mais rien à faire ! Ce qui est bizarre c'est que les titres du menu n'ont pas tous ce problème d'espace car pour les menus du bas il n'y a pas de problème !! Voyez par vous mêmes (seulement sur IE) : http://www.make-development-inclusive.org/index.php?spk=fr&wid=1024. J'ai même essayé un height:O% ou 1% mais ca n'a fait qu'empirer les choses !!
Voici "la maquette" du menu (code html) :
<div id="menu">
<ul>
<li><a>Rendre le développement inclusif</a><!--gros titre 1 du menu-->
<ul>
<li><a></a></li><!--sous titre du gros titre 1 du menu-->
<li><a></a></li>
</ul>
</li>
<li><a>Le projet</a><!--gros titre 2 du menu-->
<ul>
<li><a></a></li><!--sous titre du gros titre 2 du menu-->
<li><a></a></li>
</ul>
</li>
<li><a>Evénements</a><!--gros titre 3 du menu-->
<ul>
<li><a></a></li><!--sous titre du gros titre 3 du menu-->
<li><a></a></li>
</ul>
</li>
<li><a>Outils et ressources </a><!--gros titre 4 du menu-->
<ul>
<li><a></a></li><!--sous titre du gros titre 4 du menu-->
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
<li><a>Partenaires </a><!--gros titre 5 du menu-->
<ul>
<li><a></a></li><!--sous titre du gros titre 5 du menu-->
...
...
...
</ul>
</li>
</ul>
</div>Et voici mon code css pour le menu :
/*menu*/
/*positionner le menu*/
#menu
{
float:left;
width:23%;
margin-left:0.5%;
}
/*concerne tous les liens du menu (tous les titres et sous titres donc tout le menu en fait)*/
#menu a
{
display:block;
font-size:0.85em;
border-top:1px solid #F30;
border-bottom:1px solid #F30;
border-left:1px solid #F30;
text-decoration:none;
font-weight:bold;
padding-left:3%;
/*height:1%;*/
}
/*concerne uniquement les sous-menu - aligne sur les sous menus*/
#menu li li a
{
font-size:0.8em;
border-bottom:none;
border-top:none;
/*margin:0% 0%;*/
margin-left:3%;
}
/*concerne tout le menu (menu et sous menu) - aligne sur grands titres*/
#menu ul
{
list-style-type:none;/*enlever les puces des zones de liste*/
/*padding:0;*/
margin:0;
}
/*concerne les menus et sous menus sur deplacement de la souris*/
#menu li a:hover
{
color:#000080;
background-color:#FFFF97;
}
/*concerne les menus et sous menus sur reception focus - utile quand on accede au menu depuis les raccourcis claviers*/
#menu li a:active
{
color:#000080;
background-color:#FFFF97;
}
Merci d'avance pour votre aide
.
.
!!!) mais je n'observe pas le problème d'espacement que j'avais sous firefox. Donc a priori mon css pour IE a l'air correct.
!!!
