Fffuuu, bon ça y est : le gouvernement Français a adopté un texte qui donne aux opérateurs FAI le pouvoir de censurer les blagues sexistes sur le net.

Autrement dit, une simple blague de travers (par exemple sur les blondes, qui sont quand même nombreuses), et hop, c’est tout le site qui risque d’être censuré dans le pays parce que M. Orange ou M. SFR aura décidé que ce contenu dépasse les bornes qu’il aura lui même fixé. Il peut aussi décider d’être plus laxiste pour ses propres sites et forums que pour celui du concurrent, ou alors de choisir les sites en fonction de son auteur, son bord politique, son fournisseur internet…

C’est pas comme si les débordements n’auront pas lieu : le site Linux.com ou celui d’Amnesty International sont bloqués par le filtre anti-porno au Royaume-Uni.


Et pendant ce temps là, les bonbons Haribo de couleur noir (ceux en réglisse) sont interdits au Danemark et en Suède car jugés racistes. Non, ce n’est pas une blague.

Poussez pas, on va l’avoir notre société édulcorée, purifiée de tous les vices à la Demolition Man.

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 :

• flottants, les éléments 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:both » ;
• 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 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, ça marche et c’est le bien.