Discussion :

[alex2746]

Bonjour,
J'aimerais votre aide concernant la disposition d'un menu horizontal.
Actuellement mon menu est horizontal et collé tout à fait à gauche, ce qui fait qu'il reste un espace assez grand à droite. Les éléments se suivent l'un à côté de l'autre.

J'aimerais que le premier élément du menu soit collé à gauche et le dernier élément du menu soit collé à droite. Ensuite les éléments de menu qui se trouvent entre ces deux éléments doivent se répartir l'espace qui reste entre le premier et le dernier élément.

Voici la structure html du menu (généré par Joomla donc non modifiable) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<nav class="navigation" role="navigation">
    <ul class="nav menu nav-pills">
        <li class="item-127 current active">
            <a href="ref.....">Home</a>
        </li>
        <li class="item-129 deeper parent">
        <li class="item-141 deeper parent">
        <li class="item-144 deeper parent">
        <li class="item-153 deeper parent">
        <li class="item-162">
     </ul>
</nav>

J'ai réussi avec le CSS suivant à faire plus ou moins ce que je voulais mais j'aimerais avoir une solution plus automatisée car si je rajoute un élément à mon menu par la suite, le CSS devra être modifié et ce n'est pas mon but...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
ul.nav > li {  
    margin-left: 50px;
}
ul.nav > li:first-child {
    margin-left: 0px;
}

Merci d'avance !

[NoSmoking]

Bonjour,

Voici la structure html du menu (généré par Joomla donc non modifiable)

avec ça t'es pas sortie de l'auberge ou alors il manque des morceaux

Pour ton cas tu peux passer par display:table-xxx, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
ul.nav{
  display:table;
  width:100%;
  text-align:center;
  list-style:none;
  padding:0;
}
ul.nav li {
  display:table-cell;
}