La plupart des sites limitent la largeur de leur contenu à 1024 pixels (voir 800px), mais beaucoup de gens possèdent aujourd’hui des écrans plus larges (1280px, 1440px, 1680px, 1920px…). Et bien souvent, ces sites flottent au centre ou à gauche d’un fond vide ou contenant un papier peint ( background-repeat: repeat ). D’où l’éternelle question du créateur de site : Comment faire pour que mon site s’affiche sur n’importe quel écran avec autant d’intérêt pour le visiteur ?

La solution la plus évidente consiste à créer un site dont la largeur s’adapte à celle de l’écran, en utilisant des largeurs en pourcentage, mais il faut bien reconnaître que l’exercice n’est toujours facile, selon l’architecture du site et il en résulte généralement un éparpillement des contenus sur toute la surface de l’écran avec beaucoup de vide entre, ou une saturation de l’écran par les contenus, ce qui affecte la navigation dans les deux cas.

La technique que j’utilise souvent consiste à placer le site dans une table de 3 colonnes à largeur fixe, en faisant en sorte que seule la colonne contenant le site fasse apparaître un scroll horizontal. Les autres colonnes ne sont visibles que sur un grand écran, et peuvent contenir des images qui composent alors tout le cadre.

Voici la marche à suivre, avec pour exemple un site classique comportant un “header”, un “contenu” et un “footer” :

Pour commencer il faut construire le design du site dans un fichier (photoshop par exemple..) aux dimensions maximales d’affichage, et y placer des repères pour définir la colonne de 1024px qui contiendra le site lui même. On peut également placer des repères horizontaux pour séparer le “header”, le “contenu” et le “footer”.

site-table

Dans l’exemple ci-dessus, on a donc 9 zones qui vont correspondre aux 9 cases d’une table. Les zones rosées constituent le décor visible sur un grand écran, et masquées sur un écran 1024px. La zone centrale contient le site lui-même, visible sur n’importe quel écran, avec un scroll horizontal pour les plus petits… Une fois cette image découpée en 9 images, il reste à construire le site en html et à éditer quelques lignes de css :

Dans un premier temps, on construit le site sans tenir compte de la table, ce qui nous donne :

 

Jusque là, rien d’extraordinaire – On va maintenant construire la table qui va découper le site en 9 cases :

<table border="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>

On ajoute ensuite quelques “width“, “class” et “id” pour différencier tout ça, de la manière suivante :

<table border="0">
<tbody>
<tr>
<td id="header-left" class="fond_large" width="300px"></td>
<td id="header-center" width="1000px"></td>
<td id="header-right" class="fond_large" width="300px"></td>
</tr>
<tr>
<td id="contenu-left" class="fond_large" width="300px"></td>
<td id="contenu-center" width="1000px"></td>
<td id="contenu-right" class="fond_large" width="300px"></td>
</tr>
<tr>
<td id="footer-left" class="fond_large" width="300px"></td>
<td id="footer-center" width="1000px"></td>
<td id="footer-right" class="fond_large" width="300px"></td>
</tr>
</tbody></table>

On obtient donc quelque chose qui ressemble à ça :

site-table2

Un peu de css pour remplir les cases, en ayant bien sûr préparé les 9 images avec les noms correspondants :

#header-left {
	background-image: url(images/fond-left-header.jpg);
	background-repeat: no-repeat;
}
 
#header-center {
	background-image: url(images/fond-center-header.jpg);
	background-repeat: no-repeat;
}
 
#header-right {
	background-image: url(images/fond-right-header.jpg);
	background-repeat: no-repeat;
}
 
#contenu-left {
	background-image: url(images/fond-left-contenu.jpg);
	background-repeat: no-repeat;
}
 
#contenu-center {
	background-image: url(images/fond-center-contenu.jpg);
	background-repeat: no-repeat;
}
 
#contenu-right {
	background-image: url(images/fond-right-contenu.jpg);
	background-repeat: no-repeat;
}
 
#footer-left {
	background-image: url(images/fond-left-footer.jpg);
	background-repeat: no-repeat;
}
 
#footer-center {
	background-image: url(images/fond-center-footer.jpg);
	background-repeat: no-repeat;
}
 
#footer-right {
	background-image: url(images/fond-right-footer.jpg);
	background-repeat: no-repeat;
}

On oublie pas la petite mention concernant les table afin que les cases soient bien bord-à-bord :

table {
	border-collapse: collapse;
	border-spacing: 0;
}

Et voilà, on a donc un site de 1000px de large, encadré par deux bandes verticales de 300px qui habillent l’espace sur un écran de 1600px. Mais il reste quelques détails à régler…

Tout d’abord, faire en sorte que dans une fenêtre de 1024px de large, aucun scroll horizontal n’apparaisse – Pour cela, rien de plus simple, on applique la propriété css “overflow: hidden” à la class “fond_large”, soit aux colonnes gauche et droite de notre site :

.fond_large {
	overflow: hidden;
}

Il ne reste qu’à définir une couleur de fond ou un papier-peint au body pour les écrans d’une largeur supérieure à 1600px. Dans notre exemple, on choisira un fond noir qui se raccorde avec les colonnes latérales.

body {
	background-color: #000000;
}

Et si l’on veut que le site soit centré dans la fenêtre, il suffit de placer la table dans une div principale comme ceci :

<div>
<table border="0">
<tbody>
<tr>
<td id="header-left" class="fond_large" width="300px"></td>
<td id="header-center" width="1000px"></td>
<td id="header-right" class="fond_large" width="300px"></td>
</tr>
<tr>
<td id="contenu-left" class="fond_large" width="300px"></td>
<td id="contenu-center" width="1000px"></td>
<td id="contenu-right" class="fond_large" width="300px"></td>
</tr>
<tr>
<td id="footer-left" class="fond_large" width="300px"></td>
<td id="footer-center" width="1000px"></td>
<td id="footer-right" class="fond_large" width="300px"></td>
</tr>
</tbody></table>
</div>

Si tout va bien, on a alors un site qui s’affiche sans scroll dans 1024px de large :

site-table-1024

Avec un beau cadre dans 1600 pixels :

site-table-1600

Avec un cadre sur fond noir dans 1920 pixels ou plus :

site-table-1920

Voici donc pour le principe général, qui peut bien sûr être décliné et complexifié selon vos idées – N’hésitez à m’en faire part si vous vous penchez sur la question !

3 commentaires

  • matt050 (1 comments), le 22 août 2009

    Bwaaa, des tableaux…
    C’est des blocs div qu’il faut pour faire un design! Ahlala ;- )

  • NeoSting (1 comments), le 20 septembre 2009

    C’est souvent galère de faire que ce soit raccord suivant la taille de l’écran de l’utilisateur, mais l’idée principale en CSS2 est de récupérer d’abord par requête la taille de l’écran du lecteur, et d’avoir plusieurs CSS en fonction de la taille décelée.
    Là, c’est une technique sympa, sauf que normalement, on ne doit pas utiliser de tableaux pour le design et la mise en page d’un site. Bien sûr, chacun fait comme il lui plait ;) Essaye de parler de la technique que je propose :)

  • UnEtudiant (1 comments), le 14 octobre 2012

    Merci beaucoup!!! Je cherchais depuis longtemps comment faire en sorte que le site est une largeur fixe. Tu me sauve la vie, même si ce topic remonte. Merci encore

Poster un commentaire

Subscribe without commenting