CSS Débutant

Vous êtes ici >  CSS débutants | Mise en page sans tableau

Mise en page en colonnes sans tableau

Je n'ai pas l'intention du tout de réinventer la poudre. On trouve sur le net une multitude de tutoriels de webdesign sur la mise en page fluide sans tableaux, à commencer par celui du W3C et ceux de l'excellentissime Alsacréations.

D'autre part, le cours précédent sur les sélecteurs class et id en donne déjà un aperçu. On va donc faire simple et rapide.

Pourquoi éviter la mise en page par tableaux ?

Il ne faut pas systématiquement diaboliser la mise en page par tableaux, mais disons qu'elle a "vécu". C'était une bonne méthode lorsque les navigateurs implémentaient mal les normes CSS 2.1 (aux temps préhistoriques -à l'échelle du web- de Netscape 4 et d'Explorer 5), mais maintenant...
Faire deux ou trois colonnes en CSS est relativement facile et le langage CSS est fait pour cela. Le code est plus facile à maintenir, cela offre plus de choix de mise en page sans modification du code html, et surtout c'est plus accessible.

Certes, on m'objectera qu'au delà de 3 colonnes, les choses se compliquent et qu'il y a quelques heures d'arrachage de cheveux pour arriver à faire quelque chose d'uniforme pour tous les navigateurs. Mais sauf cas très particulier, il n'y a pas besoin de faire plus de 3 colonnes. Alors en attendant que column (norme CSS3) soit implémenté par tous les navigateurs, faisons simple.

Comparaison mise en page tableaux/CSS

Codes (x)html

Avec tableau

En règle générale, le webmestre qui réalise une mise en page avec tableau utilise aussi un logiciel wysiwyg en lui faisant confiance. J'ai donc fait ce petit test avec l'interface wysiwyg d'un logiciel très connu et voilà ce qu'il m'a donné pour une mise en page 2 colonnes (dont un menu à gauche de largeur de 150 pixels) encadrés d'un en-tête et d'un pied de page :

<table width="100%"  border="0">
 <tr align="center" valign="top">
  <td colspan="2">En tête</td>
 </tr>
 <tr>
  <td width="150" valign="top">Menu</td>
  <td valign="top">Contenu</td>
 </tr>
 <tr align="center" valign="top">
  <td colspan="2">Pied de Page</td>
 </tr>
</table>

Mouais... Et tout ça sans aucune couleur, image de fond ou quoi que ce soit. Que ce soit directement en html ou par le biais du CSS, il faudra rajouter des attributs dans ce code pour coloriser tout ça, ce qui alourdira encore la lisibilité du code et le poids de la page.

Voir le tableau (agrémenté de quelques fioritures supplémentaires pour une meilleure visualisation).

Sans tableau

Le principe est très simple : on divise chaque élément de la page par un div. La page se divise en quatre sections, chacune correspondant à une cellule de tableau précédemment illustré :

• Un en-tête : div id="entete"
• Un menu : div id="menu"
• Le Contenu : div id="contenu"
• Un pied de Page : div id="footer"

Et si vous avez loupé le tutoriel sur les sélecteurs class & id, il vaut mieux aller le voir de plus près avant de poursuivre...

<div id="entete">
 En tête
</div>

<div id="menu">
 Menu
</div>

<div id="contenu">
 Contenu
</div>

<div id="footer">
 Pied de Page
</div>

Codes CSS

Pour positionner différents div dans une page, on peut utiliser le positionnement absolu, relatif ou flottant. En matière de choix, chaque méthode a ses avantages et ses inconvénients, c'est surtout une histoire de goût et parfois de contraintes.

Ce dont il faut surtout se souvenir, c'est que la position absolute sort complétement du flux (c'est à dire de la lecture naturelle de haut en bas du code), ce qui offre un risque de chevauchement avec d'autres éléments mais lui confère une bonne « autonomie » de placement dans la page. Ce problème de chevauchement (de dépassement de flux) est aussi présent avec float, mais il est plus facile maîtrisable, ou du moins contournable.
Quelques rappels de principe sont disponible sur le diaporama que Raphaël et moi avons présenté lors de l'atelier CSS de ParisWeb 2007.

Menu à gauche flottant

En positionnant le menu à gauche, on suit la logique du flux, ce qui est préconisé pour l'accessibilité.

#entete, #footer {
text-align:center;
}
#menu  {
float:left;
}
#contenu {
margin-left:155px;
}

Menu à droite flottant

Mais on peut aussi positionner le menu à droite sans toucher au code html ! Ce qui est bien sûr impossible avec une mise en page par tableaux. Cela dit, la logique du flux n'est plus respectée (ce qui est placé en premier dans le code se trouve après un élément positionné à gauche de l'écran), ce qui est déconseillé par les normes accessiweb.

#entete, #footer {
text-align:center;
}
#menu {
float:right;
}
#contenu {
margin-right:155px;
}

Voir les résultats

Astuce

Pour éviter que le l'élément flottant (ici le menu) ne chevauche le pied de page en cas de hauteur supérieure de l'élément non flottant (ici le contenu), il suffit de rajouter clear:both à l'élément à ne pas chevaucher (ici le footer).

#footer {
clear:both;
}

Attention au DocType

Les déboires de rendu entre les différents navigateurs, notamment avec Internet Explorer, sont souvent dus à une mauvaise déclaration de DocType, ou à la présence du prologue xml qui fait basculer IE en mode "Quirks" (ce qui lui fait purement et simplement oublier les bonnes normes).
Si vous ne comprenez absolument rien à ce qui vient d'être dit ;-), deux lectures s'imposent :

• Le DocType qui vous faut (Pompage.net)
• Les Types de Documents

Lectures complémentaires

• Problèmes liés à une mise en page par tableaux (OpenWeb)
• Initiation au flux (OpenWeb)
• Design CSS fluide encadré d'images (CSS4 design)