Les calques, substituts aux tableaux : un diptyque

Cette première feuille de style répond à un besoin fréquent : celui de séparer deux textes, de créer des colonnes, visibles ou non, d'aligner texte et image, etc.

Jusqu'à présent, pour beaucoup de concepteurs de sites, le recours aux tableaux est la solution de facilité. En réalité, ils sont plus généralement attirés par la facilité de positionnement (texte ou image ou les deux) de cet outil presque obsolète ... par lequel passent tous les éditeurs "wysiwyg" ! Les "pros" eux-mêmes sont souvent tentés.

Le recours à la feuille de style est pourtant beaucoup plus avantageux ; il permet notamment :

1 - une plus grande souplesse dans l'élaboration
2 - un poids de fichier nettement moindre
3 - la possibilité de positionnement au pixel près !

Voici l'exemple du diptyque : le faux tableau jaune que vous voyez ci-dessous. Sélecteurs, propriétés et valeurs sont repris à gauche, explications à droite. L'ensemble est situé dans le diptyque pour lequel il est écrit.

<style type="text/css"><!--

div.encadre{
width:760px;
height:480px;
background-color:lightyellow;
margin-left:auto;
margin-right:auto;}

div.gauche {background-color:lightyellow;
color:black;
font-family:Arial,Helvetica;
font-size:14px;
text-align:left;
width:330px;
height:auto;
float:left;
border:15px solid lightyellow}

div.droite {background-color:lightyellow;
color:black;
font-family:Arial,Helvetica;
font-size:14px;
text-align:left;
width:390px;
height:auto;
float:right;
border:15px solid lightyellow}

--></style>
- balise d'ouverture de la feuille de style

- déclaration de sélecteur/classe du calque principal
- valeur de largeur
- valeur de hauteur
- valeur de couleur de fond
- valeur de marge gauche (non interpreté par IE)
- valeur de marge droite (non interpreté par IE)

- déclaration sélecteur/classe/couleur du calque gauche
- valeur de couleur du texte intégré
- valeur de police du texte intégré
- valeur de taille du texte intégré
- valeur d'alignement du texte
- valeur de largeur du calque
- valeur de hauteur (automatique dans ce cas)
- valeur d'alignement du calque
- valeur de bordure largeur/couleur du calque

- déclaration sélecteur/classe/couleur du calque droit
- valeur de couleur du texte intégré
- valeur de police du texte intégré
- valeur de taille du texte intégré
- valeur d'alignement du texte
- valeur de largeur du calque
- valeur de hauteur (automatique dans ce cas)
- valeur d'alignement du calque
- valeur de bordure largeur/couleur du calque

- fermeture de balise de la feuille de style

Chaque retour à la ligne est réalisé grâce à la balise <BR> et un double saut de ligne ... par un double <BR>. Rien de plus simple ... : la solution de facilité consiste donc à aligner (pour autant que nécessaire, évidemment) en code source grâce à cette seule balise.
Les largeurs des calques doivent naturellement être exprimées de telles sorte que :

1 - la/les images éventuelles s'y logent entièrement
2 - la largeur calques+bordures internes ne dépassent pas celle du calque principal

Les valeurs float sont utilisées ici afin de "coller" les 2 calques internes aux bords gauche et droit du calque principal. Le système est finalement proche de celui d'un tableau simple ... tout en évitant ses inconvénients. On ne peut donc parler ici de positionnement précis mais de positionnement relatif. Vous aurez l'occasion de vous exercer à la précision ... dans un autre exposé.

Les propriétés et valeurs margin-left:auto et margin-right:auto sont destinées à centrer le calque principal dans la page ... pour Mozilla. Les versions 6 de Netscape et Internet Explorer n'implémentent pas encore ces règles. Ils alignent l'ensemble sur la gauche de la page alors que le premier les prend en compte. Il est inutile d'utiliser la balise <center> pour régler ce problème avec IE : Mozilla, et à fortiori Netscape, centre alors le calque droit ... et la mise en page est dès lors totalement faussée. Si le visiteur du site s'en tient à la définition d'écran que vous lui conseillez, il n'y a pas trop de problème en utilisant les valeurs auto ; dans le cas contraire, la mise en page ne sera pas parfaite. Ces propriétés/valeurs étant adoptées dans les normes W3C, nul doute que les futurs navigateurs les respecteront.
(Petite voix dans le fond : "- heu ... Netscape, aussi ? ..."

retour