Pour faire des menus en CSS, il est d’usage d’utiliser une liste non-ordonnée <ul> et de mettre les éléments de listes <li> en flottants avec
float: left;.
Cette solution malheureusement toujours très rencontrée en 2014,
c’est du bricolage et
ne doit plus être utilisée. Elle n’a que des inconvénients :
- les éléments étant flottants, ils sortent du flux et ils passent au dessus du reste de la page. Cela oblige donc d’utiliser un <br> bidon juste pour le « clear » ;
- de plus, il faut spécifier une hauteur minimale pour la liste, sinon elle vaut tout simplement 0px : c’est très chiant pour les images de fond ;
- si l’écran est trop petit, le dernier élément passe en dehors du menu et surplombe la page… Sans que le menu lui même n’est redimensionné ;
- si l’écran est trop petit, un flottant un peu trop grand sort du cadre de l’écran et déforme tout l’affichage ;
- le flottant est un placement compliqué à maîtriser et dont le comportement devient très vite imprévisible si plusieurs éléments flottants se rencontrent ;
- comment tu fais pour centrer un flottant ?
Pour y remédier, une solution très simple et supportée dans tous les navigateurs jusqu’à IE7 :
mettre les éléments de liste <li> en affichage « inline-block; ».
Vous pouvez alors :
- les dimensionner comme vous le voulez et ils seront les uns à côté des autres ;
- ils ne sortent plus du flux de la page : si le dernier passe sur la ligne suivante, il repousse le bloc suivant au lieu de le masquer et agrandit le bloc parent au lieu d’en sortir ;
- il est possible de centrer le menu ;
Dans le futur, on pourra utiliser des solutions beaucoup plus puissantes. Les CSS3 on en effet une nouvelle disposition nommé « flexible » (
flex). Celle-ci permettra d’afficher les blocs plus simplement sans se soucier de marges ou quoi que ce soit, par exemple comme les mots dans une ligne de texte justifiée (avec «
space-between »), ou en faisant en sorte que les x derniers éléments se partagent la place restante alors que les autres ont une taille fixe.
Mais pour le moment, le module
flexbox n’est ni finalisé (il y a au moins trois spécifications différentes) ni supporté uniformément par tous les navigateurs (voir le
module Flexbox sur Alsacréations).
En attendant le modèle flexible, je vous conseil donc grandement d’utiliser le
inline-block pour vos menus :
inline-block est fait pour placer en ligne des éléments de type bloc, contrairement à float qui a un autre but.
Vous vous rendrez également un service immense lorsque vous voudrez faire un site responsive : le modèle des blocs-en-ligne s’adapte parfaitement à un écran de taille variable.
En CSS, soyez logique et évitez de composer des positionnement absolues avec des flottants et d’autres affichages en tableau. Pour mettre des éléments de type blocs en ligne, utilisez simplement « display: inline-block; ». C’est là pour ça.