Discussion :

[Neilos]

Bonjour à tous,

je réalise un menu horizontal en CSS a base de ul, li et display: inline.
Je souhaite avoir au centre de ce menu en élément un peu spécial qui devrait prendre une certaine largeur (par exemple 33%) et au contraire des autres élément être sur plusieurs lignes.

En schématique:

Code :

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

1
2
3
 
                                   Item 3 Ligne 1
Item 1    Item 2              Item 3 Ligne 2                  Item 4       Item 5

Et le tout avec une ligne (bottom-border: 1px solid blue).

Je n'arrive cependant pas à réaliser cet élément central un peu spécial.
Le display: inline m'empêche de fixer la largeur de l'élément.
J'imagine qu'utiliser un div pour cet élément me permettrait d'en définir très librement le contenu.

Que pouvez vous me conseilleriez vous comme solution pour obtenir un bon résultat?

Merci d'avance pour votre aide,

Neilos

[Muchos]

Il faut que les éléments du menu soient à la fois inline et block. Ce que j'ai fait sur mon site, c'est:

Code css :

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

1
2
3
4
 
  #menu ul {padding-left: 0;}
  #menu li {list-style-type: none; display: inline;} /* les <li> sont inline */
  #menu a {display: inline-block;} /* les liens des <li> sont également inline mais transformables comme des blocks */

[Mell]

C'est border-bottom et non bottom-border

Sinon en complément à Muchos

Code :

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

1
2
3
#menu ul {padding-left: 0;}
#menu li {list-style-type: none; display: inline-block; border-top:1px solid blue;} /* les <li> sont inline-block */
#menu li:first-child {border-top:none;} /*Pour que le premier élément n'est pas de border-top */

Je pense que mettre directement les <li> en inline-block aurait davantage le résultat voulu. Mais après tu peux tester les différentes manières.

[Neilos]

Merci pour la correction du border-bottom.
J'ai effectivement choisi d'appliquer directement le inline-block sur les éléments li.

Merci à vous deux pour votre aide.