<li> -> Problème de l'espacement vertical
Résolu
Bonjour, alors tout d'abord merci pour ceux qui se penche sur mon cas :)
Donc, Je dois faire un site pour une association (je suis stagiaire), et je me trouve face à un petit problème d'affichage:
J'ai fais un menu (horizontal ) avec les balises <ul> et <li> et dans les <li> il y'a un autre menu déroulant (qui déroule vers le bas) lors du passage de la souris sur celui-ci. Mon problème est que les img (le menu est fait d'image uniquement) dans les sous menu, il y'a un espace entrent eux que je voudrais supprimer.
Voici mon code:
(il est grandement possible qu'il y'a des erreurs dans le CSS ou encore les balises <br> dans le html, sans, il n'y a pas de saut automatique entre les <li> du sous menu ...)
<div class=\"menu\">
<ul>
<li><img src=\"chemin\"/>
<ul class=\"niveau2\">
<li><img src=\"cheminImageSousMenu\"/></li><br>
<li><img src=\"cheminImageSousMenu\"/></li>
</ul>
</li>
<li><img src=\"chemin\"/>
<ul class=\"niveau2\">
<li><img src=\"cheminImageSousMenu\"/></li><br>
<li><img src=\"cheminImageSousMenu\"/></li>
</ul>
</li>
</ul>
Voici mon code CSS associé
ul {
list-style-type: none;
margin :0 auto;
border-width: 0;
padding : 0;
}
ul ul {
display: none;
list-style-type: none;
margin :0 auto;
border-width: 0;
padding : 0;
}
.menu li:hover ul.niveau2{
display:block;
margin :0;
position: absolute;
}
.menu li {
list-style-type: none;
padding : 0;float: left;
}
Merci d'avance pour vos réponses !
Donc, Je dois faire un site pour une association (je suis stagiaire), et je me trouve face à un petit problème d'affichage:
J'ai fais un menu (horizontal ) avec les balises <ul> et <li> et dans les <li> il y'a un autre menu déroulant (qui déroule vers le bas) lors du passage de la souris sur celui-ci. Mon problème est que les img (le menu est fait d'image uniquement) dans les sous menu, il y'a un espace entrent eux que je voudrais supprimer.
Voici mon code:
(il est grandement possible qu'il y'a des erreurs dans le CSS ou encore les balises <br> dans le html, sans, il n'y a pas de saut automatique entre les <li> du sous menu ...)
<div class=\"menu\">
<ul>
<li><img src=\"chemin\"/>
<ul class=\"niveau2\">
<li><img src=\"cheminImageSousMenu\"/></li><br>
<li><img src=\"cheminImageSousMenu\"/></li>
</ul>
</li>
<li><img src=\"chemin\"/>
<ul class=\"niveau2\">
<li><img src=\"cheminImageSousMenu\"/></li><br>
<li><img src=\"cheminImageSousMenu\"/></li>
</ul>
</li>
</ul>
Voici mon code CSS associé
ul {
list-style-type: none;
margin :0 auto;
border-width: 0;
padding : 0;
}
ul ul {
display: none;
list-style-type: none;
margin :0 auto;
border-width: 0;
padding : 0;
}
.menu li:hover ul.niveau2{
display:block;
margin :0;
position: absolute;
}
.menu li {
list-style-type: none;
padding : 0;float: left;
}
Merci d'avance pour vos réponses !
2 réponses
-
ContributeurBonjour,
Déjà, une petite erreur ici:<li><img src=\"cheminImageSousMenu\"/></li><br>
le <br /> est totalement inutile puisque les li sont de type "bloc".
Le bonheur est la seule chose que l'on peut donner sans l'avoir.-
Salut, pour positionner et dimiinuer les espaces entre des éléments il faut jouer sur les marges et bordures ou la position de ces éléments l'un par rapport aux autres:
Et celà avec le CSS, ce sont les propriétés: margin, padding pour les marges, marges internes.
Vous pouvez utiliser float(valeur left,right, center, inherit) pour indiquer le positionnement d'un bloc par rapport à l'autre et jouez sur les position avec la propriété position:relative/absolute puis indiquer une valeur de décalage (positive ou négative) dans le sens que l'on veut(du haut, du bas, de la droite ou de la gauche).
-
-
Je vous remercie pour vos réponses rapides ! J'ai réussi à régler mon problème en
reconstituant mon menu ! et là niquel !
Pour un menu horizontal déroulant verticalement
margin :0;
display : inline;
Merci à vous.
PS: Je viens de créer mon disque dur u_u...
