Positionnez vos boîtes !

Introduction

Sans feuille de style appliquée à un document, un navigateur gère la mise en page du document HTML à mesure qu'il rencontre les éléments à placer. Le flux correspond dans ce cas à l'ordre dans lequel les éléments apparaissent dans ce code source, ce qui conditionne leur position. Par défaut, deux éléments de type bloc s'affichent l'un en-dessous de l'autre alors que les éléments en ligne s'affichent les uns à la suite des autres avec l'insertion d'un retour de ligne lorsque l'affichage atteint le bord droit du cadre.

Certaines propriétés CSS permettent de sortir des éléments du flux pour les afficher ailleurs dans la fenêtre du navigateur. Il est par exemple possible d'inverser l'ordre d'éléments de type bloc, de les afficher les uns à côté des autres ou de changer le type d'un élément en transformant un élément en ligne en un élément de type bloc ou inversement.

Ainsi, si vous reprenez le fichier bar.html dans l'état que vous l'aviez laissé dans la section précédente, que vous déplacez le <div> specialites sous le logo puis que vous ajoutez la propriété

à la règle specialites dans le fichier bar.css, vous obtenez le résultat ci-contre.

Comment cette petite propriété peut-elle produire un effet aussi grandiose ? Peut-on s'en servir pour aller encore plus loin ? Il est tout d'abord nécessaire de savoir comment un navigateur effectue la mise en page des éléments. Nous verrons ensuite comment modifier son comportement et quelles sont les différentes manières de positionner les éléments.

La bonne nouvelle est que vous connaissez déjà les éléments de type bloc et les éléments en-ligne ainsi que le modèle de boîte, c'est-à-dire tous les éléments fondateurs des pages web. Il ne vous reste plus qu'à apprendre comment les navigateurs gèrent tous ces éléments et comment ils procèdent à leur mise en page.

Cette section a pour but de construire la mise en page de documents sophistiqués. A ce dessein, tout ce que vous avez appris va enfin pouvoir se mettre en place.