Mise en page sans tableau

par Pascale Lambert (mammouthland) (Blog)

Date de publication : 02/07/2010 Dernire mise jour : 24/11/2010

Faire une mise en page avec deux ou trois colonnes peut se faire aisment sans tableaux. Diverses techniques sont possibles. On trouve sur le net une multitude de tutoriels de webdesign sur la mise en page fluide sans tableaux, commencer par celui du W3C qui propose en outre une srie de gabarits forts utiles. Ce tutoriel ne tente pas donc de rinventer la poudre, mais simplement de prsenter les atouts d'une mise en page full CSS par rapport une mise en page par tableaux. N'hsitez pas nous faire part de votre avis sur cet article :

Mise en page sans tableau par Pascale Lambert (mammouthland) (Blog)

I - Mise en page en colonnes sans tableau................................................................................................................3 I-A - Pourquoi viter la mise en page par tableaux ?............................................................................................3 I-B - Comparaison de mises en page avec tableaux et avec les CSS................................................................. 3 I-B-1 - Avec tableaux........................................................................................................................................ 3 I-B-2 - Avec les CSS........................................................................................................................................ 4 I-C - Lectures complmentaires............................................................................................................................. 5

-2Les sources prsentes sur cette pages sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 02/07/2010 - Pascale Lambert. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://plambert.developpez.com/tutoriel/css/mise-page-colonnes-full-css/

Mise en page sans tableau par Pascale Lambert (mammouthland) (Blog)

I - Mise en page en colonnes sans tableau Fonctionne avec :

Firefox ; IE 5.x et + ; NS 6/7 ; Mozilla 1.x / SeaMonkey ; Opra ; Safari / Chrome.

Attributs utiliss :
clear ; float ; margin ; text-align.

I-A - Pourquoi viter la mise en page par tableaux ?

Il ne faut pas systmatiquement diaboliser la mise en page par tableaux, mais disons qu'elle a "vcu". C'tait une bonne mthode lorsque les navigateurs implmentaient mal les normes CSS 2.1 (aux temps prhistoriques - 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 trs particulier, il n'y a pas besoin de faire plus de 3 colonnes. Alors en attendant que column (norme CSS3 (en)) soit implment par tous les navigateurs, faisons simple.

I-B - Comparaison de mises en page avec tableaux et avec les CSS I-B-1 - Avec tableaux
En rgle gnrale, le webmestre qui ralise 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 trs 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) encadrs d'un entte et d'un pied de page :
<table width="100%" border="0"> <tr align="center" valign="top"> <td colspan="2">En tte</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 gnr est bourr d'attributs dprcis, 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.
-3Les sources prsentes sur cette pages sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 02/07/2010 - Pascale Lambert. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://plambert.developpez.com/tutoriel/css/mise-page-colonnes-full-css/

Mise en page sans tableau par Pascale Lambert (mammouthland) (Blog)

Voir le tableau (agrment de quelques fioritures supplmentaires pour une meilleure visualisation).

I-B-2 - Avec les CSS

Le principe est trs simple : on divise chaque lment de la page par un div. La page se divise en quatre sections, chacune correspondant une cellule de tableau prcdemment illustr : Un en-tte : 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 slecteurs , il vaut mieux aller le voir de plus prs avant de poursuivre...
<div <div <div <div id="entete">En tte</div> id="menu">Menu</div> id="contenu">Contenu</div> id="footer">Pied de page</div>

Le code est plus clair et sa maintenance plus aise qu'avec les balises d'un tableau. Moins charg, il est donc aussi plus lger. Et surtout, l'accessibilit est amliore. Codes CSS Pour positionner diffrents div dans une page, on peut utiliser le positionnement absolu, relatif ou flottant. En matire de choix, chaque mthode a ses avantages et ses inconvnients, c'est surtout une histoire de got et parfois de contraintes. Ce dont il faut surtout se souvenir, c'est que la position absolute sort compltement 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 lments mais lui confre une bonne autonomie de placement dans la page. Ce problme de chevauchement (de dpassement de flux) est aussi prsent avec float, mais il est plus facilement matrisable, ou du moins contournable. Quelques rappels de principe sont disponible sur le diaporama que je vous ai prsent lors de l'atelier CSS de ParisWeb 2007. Ce code CSS est toujours, bien entendu, enregistrer de prfrence dans une feuille de style externe. Menu gauche flottant En positionnant le menu gauche, on suit la logique du flux, ce qui est prconis pour l'accessibilit.
#entete, #footer { text-align:center; } #menu { float:left; } #contenu { margin-left:155px; }

Menu droite flottant

-4Les sources prsentes sur cette pages sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 02/07/2010 - Pascale Lambert. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://plambert.developpez.com/tutoriel/css/mise-page-colonnes-full-css/

Mise en page sans tableau par Pascale Lambert (mammouthland) (Blog)

Mais on peut aussi positionner le menu droite sans toucher au code HTML ! Ce qui est bien sr impossible avec une mise en page par tableaux. Cela dit, la logique du flux n'est plus respecte (ce qui est plac en premier dans le code se trouve aprs un lment positionn gauche de l'cran), ce qui est dconseill par les normes accessiweb.
#entete, #footer { text-align:center; } #menu { float:right; } #contenu { margin-right:155px; }

Voir les rsultats Astuce : Pour viter que le l'lment flottant (ici le menu) ne chevauche le pied de page en cas de hauteur suprieure de l'lment non flottant (ici le contenu), il suffit de rajouter clear:both l'lment ne pas chevaucher (ici le footer).
#footer { clear:both; }

Attention au DocType : Les dboires de rendu entre les diffrents navigateurs, notamment avec Internet Explorer, sont souvent dus une mauvaise dclaration de DocType, ou la prsence 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.

I-C - Lectures complmentaires

Problmes lis une mise en page par tableaux (OpenWeb) ; Initiation au flux (OpenWeb) ; Design CSS fluide encadr d'images (CSS4 design) .

-5Les sources prsentes sur cette pages sont libres de droits, et vous pouvez les utiliser votre convenance. Par contre la page de prsentation de ces sources constitue une oeuvre intellectuelle protge par les droits d'auteurs. Copyright 02/07/2010 - Pascale Lambert. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://plambert.developpez.com/tutoriel/css/mise-page-colonnes-full-css/