Comment espacer les titres d'un menu ?

pb88081

Membre confirmé
9 Novembre 2011
183
1
www.restaurationdemeubles.com
Bonjour,

Je suis entrain de faire un menu et je n'arrive pas à réduire l'espace des titres de mon menu




Je souhaite donc rapprocher le Menu 1 de Menu 2.

Voici le code html :

<div class="container">
<ul class="menu_deroulant">
<li >
<a href="#" title="">Menu 1</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 2</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 3</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 4</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
<li >
<a href="#" title="">Menu 5</a>
<ul>
<li ><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
<li><a href="#">Sous menu 4</a></li>
<li><a href="#">Sous menu 5</a></li>
</ul>
</li>
</ul>
</div>

Voici le code CSS :

.container{
width:1100px;
height:800px;
background-color: #FFFFFF;
}
.menu_deroulant{
padding:0;
margin: 7px;
list-style-type:none;
width: 1050px;
text-align:center;
display: table;
font-size: 14px;
font-weight: normal;
}
.menu_deroulant li{
display:table-cell;
text-align: center;
width: 110px;
}

.menu_deroulant li ul{
list-style-type: none;
display:none;
position:absolute;
}
.menu_deroulant li ul li{
display:block;
border:none;
}
html{
background-color: white;
}
a {
padding: 10px 10px 11px;
text-decoration: none;
color: #000000;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
a:hover{
/*text-decoration: underline;*/
color: #900;
}
.menu_deroulant{
background-color: #FFFFFF;
background-image: -moz-linear-gradient(center top , #333333, #222222);
background-repeat: repeat-x;
box-shadow:2px 2px 10px rgba(0,0,0,0.5);
border-radius: 5px 5px 5px 5px;
padding: 8px 0;
}
.menu_deroulant li ul{
background-color: #e9eaed;
color: #000000;
line-height: 25px;
margin: 10px;
margin-left: 30px;
padding-right: 20px;
padding-left: 20px;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 0 1px 1px;
box-shadow:2px 2px 10px rgba(0,0,0,0.5);
}
.menu_deroulant li ul a:hover{
text-decoration: underline;
}

Merci par avance de l'aide que vous pourrez m'apporter.
Bonne soirée :)
 

pb88081

Membre confirmé
9 Novembre 2011
183
1
www.restaurationdemeubles.com
Merci momo-fr :),
Le float: left; me décale tout sauf si je le mets à :
.menu_deroulant{
padding:0;
margin: 7px;
list-style-type:none;
width: 900px;
text-align:center;
display: table;
font-size: 14px;
font-weight: normal;
float: left;
}

et qui ne change rien.
Sinon par quoi puis je remplacer "display table" pour iE7 ?

Merci par avance
 

momo-fr

Ancien Aveyronnais
Club MacG
4 Octobre 2004
4 725
1 853
Bordeaux (33)
www.momofr.net
J'aimerai comprendre ce que tu veux faire.

Avec le float la valeur de largeur de tes <li> est prise en compte, donc si tu mets des valeur différentes aux <li> ça va être effectif dans ton menu, avec des table-cell ça ce comporte comme un tableau, c'est à dire que tes cell prennent toute la largeur de ton <ul> et le valeur width n'est pas répercutée correctement.

Si tu met tes <li> en display "block" ça passera sous IE7 mais garde toi bien de travailler les attributs du model box pour que ça reste correct avec Internet Explorer et ses règles bizarres.
 

Nephou

au début de la fin
Modérateur
Club MacG
24 Avril 2001
8 129
1 534
Deux-Sèvres
www.nulle-part.fr

pb88081

Membre confirmé
9 Novembre 2011
183
1
www.restaurationdemeubles.com
Bonsoir,
Merci à tous les deux pour vos réponses.

J'ai donc changé ceci :
.menu_deroulant li{
display:inline-block;
text-align: center;
width: 120px;
}
Ce qui me permet de gérer plus facilement les titres du menu haut pour les rapprocher ou les éloigner.
Il a fallu que je retouche ceci :
.menu_deroulant li ul{
width: 95px;
background-color: #FFFFFF;
margin: 10px 0;
margin-left: 1px;
padding-right: 21px;
padding-left: 1px;
border-color: rgba(0, 0, 0, 0.2);
* * border-radius: 6px 6px 6px 6px;
* * border-style: solid;
* * border-width: 0 1px 1px;
* * box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
afin de gérer la position des sous menus.

Merci encore pour vos éclaircissements :)

Bonne soirée :)