Bonjour,
j'ai un petit problème par rapport à mon menu déroulant en CSS : il y a toujours un petit espace entre les boutons du menu, ils ne sont pas joints.
Je vous envoie ma feuille de style et ma page de code PHP.
Feuille de styles CSS :
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on défini une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding :0; /* aucune marge intérieure */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 130px; /* largeur */
}
#menu li /* Elements des listes */
{
float :left;
background:url("image/fd_p3d.jpg");
width:150px;
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolu */
width: 120px; /* Largeur des sous-listes */
left: -90em; /* Hop, on envoi loin du champ de vision */
}
#menu ul a:hover
{
background:#EEE8AA;
color:black;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto;
min-height: 0; /* Corrige un bug sous IE */
}
#sousmenu1
{
position:absolute;
left:7px;
}
#sousmenu1 li a:hover
{
width:188px;
}
#sousmenu1 li
{
width:188px;
text-align:center;
}
#sousmenu2
{
position:absolute;
left:197px;
}
#sousmenu2 li
{
width:130px;
}
#sousmenu3
{
position:absolute;
left:325px;
top:8px;
}
#sousmenu4
{
position:absolute;
left:448px;
top:8px;
}
#sousmenu5
{
position:absolute;
left:584px;
top:8px;
}
#sousmenu6
{
position:absolute;
left:718px;
top:8px;
}
Page de code PHP :
<html>
<head>
<link href="essai.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li>
<div id="sousmenu1"><a href="#"><img src="image/menu/menu1.jpg"></a>
<ul>
<li><center><a href="#">Ecole</a></center></li>
<li><center><a href="#">Formation</a></center></li>
<li><center><a href="#">Equipe</a></center></li>
<li><center><a href="#">Contact</a></center></li>
<li><center><a href="#">Diplômés</a></center></li>
<li><center><a href="#">Débouchés</a></center></li>
</ul>
</div>
</li>
<li>
<div id="sousmenu2"><a href="#"><img src="image/menu/menu2.jpg"></a>
<ul>
<li><a href="#">Emploi</a></li>
<li><a href="#">Stage</a></li>
<li><a href="#">Pôle avenir</a></li>
<li><a href="#">Junior entreprise</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Les entreprise</a></li>
<li><a href="#">Presse</a></li>
<li><a href="#">Communication</a></li>
</ul>
</div>
</li>
<li>
<div id="sousmenu3"><a href="#"><img src="image/menu/menu3.jpg"></a></div>
</li>
<li>
<div id="sousmenu4"><a href="#"><img src="image/menu/menu4.jpg"></a></div>
</li>
<li>
<div id="sousmenu5"><a href="#"><img src="image/menu/menu5.jpg"></a></div>
</li>
<li>
<div id="sousmenu6"><a href="#"><img src="image/menu/menu6.jpg"></a></div>
</li>
</ul>
</body>
</html>
j'ai un petit problème par rapport à mon menu déroulant en CSS : il y a toujours un petit espace entre les boutons du menu, ils ne sont pas joints.
Je vous envoie ma feuille de style et ma page de code PHP.
Feuille de styles CSS :
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on défini une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding :0; /* aucune marge intérieure */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 130px; /* largeur */
}
#menu li /* Elements des listes */
{
float :left;
background:url("image/fd_p3d.jpg");
width:150px;
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolu */
width: 120px; /* Largeur des sous-listes */
left: -90em; /* Hop, on envoi loin du champ de vision */
}
#menu ul a:hover
{
background:#EEE8AA;
color:black;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto;
min-height: 0; /* Corrige un bug sous IE */
}
#sousmenu1
{
position:absolute;
left:7px;
}
#sousmenu1 li a:hover
{
width:188px;
}
#sousmenu1 li
{
width:188px;
text-align:center;
}
#sousmenu2
{
position:absolute;
left:197px;
}
#sousmenu2 li
{
width:130px;
}
#sousmenu3
{
position:absolute;
left:325px;
top:8px;
}
#sousmenu4
{
position:absolute;
left:448px;
top:8px;
}
#sousmenu5
{
position:absolute;
left:584px;
top:8px;
}
#sousmenu6
{
position:absolute;
left:718px;
top:8px;
}
Page de code PHP :
<html>
<head>
<link href="essai.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li>
<div id="sousmenu1"><a href="#"><img src="image/menu/menu1.jpg"></a>
<ul>
<li><center><a href="#">Ecole</a></center></li>
<li><center><a href="#">Formation</a></center></li>
<li><center><a href="#">Equipe</a></center></li>
<li><center><a href="#">Contact</a></center></li>
<li><center><a href="#">Diplômés</a></center></li>
<li><center><a href="#">Débouchés</a></center></li>
</ul>
</div>
</li>
<li>
<div id="sousmenu2"><a href="#"><img src="image/menu/menu2.jpg"></a>
<ul>
<li><a href="#">Emploi</a></li>
<li><a href="#">Stage</a></li>
<li><a href="#">Pôle avenir</a></li>
<li><a href="#">Junior entreprise</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Les entreprise</a></li>
<li><a href="#">Presse</a></li>
<li><a href="#">Communication</a></li>
</ul>
</div>
</li>
<li>
<div id="sousmenu3"><a href="#"><img src="image/menu/menu3.jpg"></a></div>
</li>
<li>
<div id="sousmenu4"><a href="#"><img src="image/menu/menu4.jpg"></a></div>
</li>
<li>
<div id="sousmenu5"><a href="#"><img src="image/menu/menu5.jpg"></a></div>
</li>
<li>
<div id="sousmenu6"><a href="#"><img src="image/menu/menu6.jpg"></a></div>
</li>
</ul>
</body>
</html>