Tout est dans la boîte !

Structurez un document en unités logiques !

La balise <div> permet de découper l'information d'une page web en unités logiques et se trouve, par conséquent, fortement utilisées avec des feuilles de style. Il s'agit d'un conteneur dans lequel sont placés des éléments apparentés pour les garder ensemble. Nous allons nous en servir pour mettre en page la présentation des «Spécialités de la semaine» situées sur le site du Bar Tête la Première. Mais avant, observons comment diviser une page en sections logiques. A ce dessein, étudions la page du site Zanimaux.com située ci-dessous en repérant ses sections logiques, c'est-à-dire les groupes d'éléments ayant un rapport entre eux. Ici, par exemple, certains éléments servent à la catégorie chats alors que d'autres appartiennent clairement à la catégorie chiens:

Une fois la structure logique identifiée, il convient de la baliser. A ce dessein, il suffit de placer une balise ouvrante et une balise fermante <div> autour des éléments qui font partie de la section logique. Afin de fournir une identité à la section logique, il convient de se servir de l'attribut id. Cette identité permettra ensuite de styler de manière indépendante chaque groupe inclus dans <div>. Par exemple, le sélecteur #chats contiendra une propriété background-image pointant vers l'image d'un léopard et le sélecteur #chiens contiendra une propriété background-image pointant vers l'image d'un corniaud:

Au moins deux raisons peuvent conduire à structurer une page avec des éléments <div>. La première pourrait être que vous souhaitez la découper en sections logiques pour en faciliter la compréhension par des tiers et mettre un site à jour plus facilement. Ensuite, cette structure peut être nécessaire pour appliquer un style à toute une section. Notons qu'il est possible d'aller plus loin en imbriquant des sous-sections logiques dans des sections logiques plus générales comme le montre l'exemple ci-dessous:

Utilisez les <div> avec modération. Structurez davantage quand vous avez besoin de scinder une page en sections logiques pour la rendre plus claire et la styler plus facilement. Néanmoins, abuser de <div> sans que la structure de vos pages ne le justifie, ne fait que les compliquer...

Mettons en pratique ces éléments théoriques dans la mise en page de la section traitant des «Spécialités de la semaine» située sur la page du Bar Tête la Première. Commençons par identifier la partie du code nous intéressant en la plaçant dans une balise <div> puis affichons-la dans le navigateur. Nous constatons que rien n'a changé. L'élément <div> n'a fait que structurer la page sans lui appliquer de look particulier:

Une fois la structure mise en place, il est possible d'appliquer un style particulier à l'ensemble des éléments de la section «Spécialités»

En observant le résultat à atteindre, nous constatons qu'il y a encore quelques détails à régler:

Pour mieux ressembler au modèle, la largeur de la section doit être réduite. Lui donner une largeur correspondant environ au quart de celle d'une fenêtre de navigateur devrait convenir. Partant du principe que la plupart des gens règlent leur fenêtre à 800 pixels de large, cette section devrait mesurer environ 200 pixels. Nous avons déjà eu l'occasion d'effectuer des réglages de largeur d'espacements, de bordures et de marges mais nous n'avons pas encore vu comment se gère la largeur d'un élément. Celle-ci est en fait gouvernée par la propriété width:

La propriété width ne concerne que la largeur de l'aire de contenu. Pour avoir une idée de la largeur de toute la boîte, il faut additionner la largeur de l'aire de contenu à celles des marges de gauche et de droite plus celle de la bordure qu'il faudra compter deux fois puisqu'il y en a une à gauche et une autre à droite.

Une fois la largeur du contenu de la boîte réglée, passons rapidement aux espacements, à l'alignement des textes et à l'ajout de l'image d'arrière-fond:

Comme nous pouvons le constater, la propriété text-align aligne tout le contenu en-ligne d'un élément de type bloc. Ici, la propriété concerne l'élément <div> et donc l'ensemble de son contenu sera aussi centré par héritage. Par conséquent, malgré son nom, text-align s'applique également aux images placées dans le bloc.

A ce stade, il ne reste plus qu'à régler les interlignes et la couleur des titres. Nous aimerions que les titres <h2> de la section «Spécialités» soient en noir mais restent en vert émeraude dans le reste du document. En outre, les titres <h3> devraient apparaître en rouge uniquement dans la section «Spécialités». Ce qui nous manque est un moyen de dire aux CSS de ne sélectionner que les éléments qui sont des descendants de certains autres, ce qui revient à dire que vous voulez donner un héritage uniquement aux enfants d'une certaines de vos filles (et pas aux autres):

Nous avions précédemment augmenté légèrement la hauteur de l'interligne du texte du Bar. Nous souhaitons néanmoins maintenant que l'interligne du texte de la section «Spécialités» ait une hauteur normale. Il suffit de régler la propriété line-height du <div> puisque celle-ci est héritée. L'interligne est un peu particulier dans la mesure où il est possible de lui assigner une valeur chiffrée plutôt qu'une valeur relative comme em ou %. Un chiffre indique à chaque élément du <div> que l'interligne est égal à une fois sa propre taille et non à la taille de police du <div> lui-même. Dès lors, mettez un interligne de 1 dans le <div> «specialites» pour que celui de tous les éléments imbriqués soit modifié.

Nous pouvons conclure que la technique des CSS est puissante: il a suffi d'ajouter un <div>, un attribut id et de styler le tout pour métamorphoser complètement la section «Spécialités». La séparation entre la structure (XHTML) et la présentation (CSS) facilite le travail en donnant une grande flexibilité aux pages web.

Parallèlement à la balise <div> qui permet de découper le document en unités logiques, il existe une autre balise dont le rôle est de mettre en évidence des parties de texte afin de les styler: la balise <span>. En d'autres termes, la balise <span> permet de regrouper des éléments en-ligne de la même manière que la balise <div> le fait avec des éléments de type bloc. Testons cette nouvelle balise sur le paragraphe présentant la musique:

A ce dessein, commençons par ajouter des <span> au premier CD et au premier artiste puis affectons-leur du style en ajoutant leurs règles respectives en bas du fichier bar.css:

Rappelons que le sélecteur d'une classe commence par un point alors que celui d'un identifiant commence par un dièse.