Mise en page sans 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... Le code généré est bourré d'attributs dépréciés, il est lourd, 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).

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>

Le code est plus clair et sa maintenance plus aisée qu'avec les balises d'un tableau. Moins chargé, il est donc aussi plus léger. Et surtout, l'accessibilité est améliorée.

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 facilement maîtrisable, ou du moins contournable.

Ce code CSS est toujours, bien entendu, à enregistrer de préférence dans une feuille de style externe.

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 ;-), une lecture s'impose : Les Types de Documents.