Comment espacer les titres d'un menu ?

[pb88081]

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

 

[momo-fr]

Personnellement je n'utilise pas le display table (pas pris en compte par IE7 et <), mais bon, de toute façon il te manque un float&#8230; non ?
Dans ce genre :

.menu_deroulant li {
display:table-cell;
text-align: center;
width: 110px;
float: left;
}

 

[pb88081]

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]

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]

Et bien

display:inline-block

pourrait devenir ton meilleur ami dans le cas qui te préoccupe cher pb88081.

Allez, un petit article chez alsacréations

 

[momo-fr]

Et bien

display:inline-block

pourrait devenir ton meilleur ami dans le cas qui te préoccupe cher pb88081.

Et IE7 fera un peu la gueule… et hop un petit hack alternatif de plus, pour moi non-merci.

Mais qui s'en souci ?

 

[pb88081]

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