Layout 3 colonnes en XHTML / CSS

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

Voir aussi

Ouverture des liens dans une nouvelle fenêtre

Ouverture des liens dans une nouvelle fenêtre

La propriété HTML target=”_blank” apparu dans la version 4.0 du langage HTML et enlevée dans la 4.01, quelques mois plus tard. Elle permet …

Faut t’il ré-implémenter les fonctionnalités des navigateurs dans une page Web ?

Faut t’il ré-implémenter les fonctionnalités des navigateurs dans une page Web ?

Voilà une question bien curieuse, tout le monde répond évidemment non, et pourtant c’est la direction qu’est en train de prendre le Web …

La relation nofollow : échec dans la lutte anti-spam

La relation nofollow : échec dans la lutte anti-spam

nofollow est une valeur non standard de l’attribut rel (relation) de la balise HTML <a>. L’attribut nofollow sert à spécifier que le …

La propriété CSS word-wrap

La propriété CSS word-wrap

La propriété css : word-wrap Inventé par Microsoft, la propriété css word-wrap. Elle permet de forcer le passage à la ligne pour les mots trop long. …

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