Layout 3 colonnes en XHTML / CSS

Comment faire un layout en 3 colonnes avec XHTML / CSS ?
Voila une des question qui m’a souvent été posé lors d’entretien d’embauche, de stage et même à l’école.

Plusieurs solutions sont possibles : - Des blocs flottants - La mise en page par tableau - L’utilisation de la propriété display

Le problème est simple. Il s’agit de décrire quels code xhtml / css.

J’ai répondu la première solution (bloc flottant), tout étant persuadé à chaque fois que c’est de loin la plus mauvaise solution. Pourtant, cette manière de faire s’est imposé comme un standard et plus encore comme une bonne pratique alors qu’elle pose de nombreux problèmes.

### Principes des blocs flottants

La technique est relativement simple, il suffit de faire flotter 3 div à gauche .

 .left {
     float:left;
}
#colonne-gauche {
    width:25%;
}
#colonne-droite {
    width:25%;
}

#centre { width:50%; }

    

Solution séduisante au premier abord, avec un séparation stricte de la structure de la présentation. Pourtant, cette structure s’avère être un véritable casse-tête dès que l’on commence à remplir les “div”. En effet, il suffit d’une image trop grande, un mots trop long, un tableau trop large, … pour faire basculer la colonne de droite en dessous des 2 autres. On peut limiter la casse en bidouillant avec d’autres propriétés du genre le word-wrap:break-word, le overflow:hidden, .voir même des fois des scroll horizontaux pour réussir à maintenir la présentation cohérente.

Vu les problèmes posées par ce type de présentation, il est quasiment inconcevable de faire une mise en page fluide avec cette structure. A moins d’être payer à l’heure, je n’en voit pas l’intérêt.

Les variantes faisant flotter à droite la colonne de droite résous en partie les problèmes de mises en pages des pages complexes en permettant à la colonne de droite prendre de l’espace sur la zone centrale. Mais, la nouvelle structure introduit un ordre dans le flux d’information complètement délirant. Ces variantes sont donc à bannir. Les solutions basées sur des blocs flottants sont donc mauvaises, voyons quelles sont les alternatives.

Mise en page par tableau

Bienvenue, 10 ans en arrière, une bonne vielle mise en page par tableau, dont voici un exemple de code source.

    
Colonne gauche Center Colonne droite

Il est vrai que la structure n’est plus dissociée de la présentation (si on ne redéfinit pas les styles sur les tableaux), mais avec cette méthode on évite tout un tas de hack lorsqu’on va intégrer des éléments dans les différentes colonnes. La linéarisation du tableau est correcte ce qui garantie l’accessibilité de la mise en page.

Le gros point noir de cette méthode est que la structure n’est pas clairement séparé de la présentation. Mais, vouloir des colonnes n’induit il pas l’utilisation de tableau ? La notion de colonne existe t’elle en dehors de la notion de tableau ? Le risque est que l’on veille reproduire ce mécanisme dans les niveaux inférieur, on se retrouverais donc avec des tableaux imbriqués. Ceci n’est pas acceptable. Il y a suffisamment de littérature sur le Web pour en expliquer les raisons, je ne vais donc pas en rajouter une couche.

Cette solution n’est pas la meilleur, mais elle est moins pire que la solution qu’il la remplace. Pourtant, la solution combinant les avantages des 2 méthodes existent.

### La propriété display

La première méthode donne une méthode sémantiquement neutre mais la mise en page avec les styles n’est pas chose aisé, et relève plus du hack qu’autre chose. La deuxième méthode donne un style cohérent mais ne sépare pas la structure de la présentation. Le mode d’affichage des tableaux XHTML, de leurs lignes et de leurs cellules ont leurs équivalent en CSS, ce sont les propriétés display:table, display:table-row et display:table-cell. Il suffit alors d’appliquer ces styles à des balises plus sémantiquement correcte pour obtenir une mise en page convenable.

 
    
...
...
...

Appliquons maintenant quelques styles :

.table {
    display:table;
}
.table > div {
    display:table-row;
}
.table > div > div {
    display:table-cell;
}
.gauche {
    width:20%;
}
.centre {
    width:60%;
}
.droite {
    width:20%;
}

Cette solution est un compromis entre la puissance des mise en page par tableau et une solution sémantiquement correcte. Malheureusement, comme d’habitude les navigateurs obsolètes que sont IE6 et IE7 ne supportent pas ces propriétés CSS.

Conclusion

Pour conclure, je dirais que si l’on doit avoir une compatibilité avec les navigateurs qui ne supportent pas les styles CSS, il est à mon avis contre-productif de vouloir séparer la structure de la présentation si les navigateurs cibles ne le permettent pas. L’utilisation de table de mise en page est alors totalement justifié. Par contre, à partir du moment où les navigateurs cibles implémentent les propriétés cité ci-dessus, alors l’utilisation de tableau ne se justifie plus. Dans tous les cas, une mise en page basé sur des blocs flottant est une mauvaise solution, pourtant c’est à chaque entretien la réponse que j’ai donnée.

comments powered by Disqus
A la une
  • Rencontre du numérique 2019 - Nîmes
  • référencement naturel d'un hôtel
  • Développeur eZ Platform
  • Tech lead Symfony
  • Expert Qualité Web

Copyright - Sylvain FIX

2009 - 2019