Initiation au positionnement en CSS

Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li etc.) ainsi que leur positionnement en CSS est dorénavant indispensable.

Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées « calques » en général), ce qui les rend souvent peu compatibles et peu pratiques.

Cet article en deux parties explique comment positionner les éléments en CSS de façon optimale.

Voici les principaux points à retenir de cet article :

• Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés… grâce aux styles CSS. Cela signifie que les CSS ne s'appliquent pas qu'aux éléments
  contrairement à certaines idées reçues : une image (<img>), une liste (<ul>), un paragraphe (<p>), etc. peuvent être stylés en CSS sans avoir besoin d'être contenus dans un élément <div>. Évitez d'ailleurs de surcharger vos documents d'éléments <div> inutiles.
• Employez toujours les éléments selon leur fonction et non selon leur aspect (puisque cet aspect pourra facilement être modifié via CSS) : un paragraphe sera défini par la balise <p>, un titre par la balise <h1>, <h2>… Notez que l'élément <div> est neutre est sert de « bouche-trou » pour englober d'autres éléments ou servir lorsqu'aucun autre élément n'est approprié. N'utilisez pas <div> pour englober des éléments seuls !
• Il existe deux types généraux d'éléments HTML : les balises de type « en-ligne » et les balises de type « bloc ». Cette différence est fondamentale et a de nombreuses implications sur les styles qui peuvent être appliqués.
• L'imbrication des éléments les uns dans les autres, et les notions de parenté (parent, ancêtre, frère…) permettent de styler facilement les éléments en utilisant cette hiérarchie dans les sélecteurs CSS. Cela évite d'employer des noms de classes ou d'id multiples et inutiles, qui complexifient la lecture et la compréhension des styles.
• Il existe plusieurs schémas de positionnement en CSS : un schéma de positionnement dans le Flux (positionnement par défaut), et trois schémas de positionnement qui sortent l'élément du Flux (positionnement absolu, positionnement fixé et positionnement flottant). Un dernier « positionnement » (relatif) est en fait une variante du positionnement courant qui provoque un décalage. La notion de Flux est fondamentale.
• Chaque schéma de positionnement a ses règles et spécificités. Mieux vaut bien comprendre ces règles pour éviter des interactions ou des comportements non désirés… et déclarer que les CSS ne fonctionnent pas ! :)

Les balises de bloc et les balises en-ligne

Ce chapitre sur la structure des balises est primordial, vous devez auparavant avoir consulté le didacticiel sur les bloc/en-ligne.

Voici un résumé pour les lecteurs pressés

• les éléments de rendu « bloc » se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple : une suite de paragraphes (balise <p>) ou les éléments d'une liste (balise <li>). Par ailleurs, un élément « bloc » occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur.
• les éléments de rendu « en-ligne » se placent toujours l'un à côté de l'autre afin de rester dans le texte. Par exemple : le renforcement d'une partie de texte à l'aide de la balise.
• les autres éléments de type en-ligne (« non-remplacés ») n'ont pas de dimension à proprement parler par défaut (il n'occupent que la place minimum nécessaire à leur contenu). C'est le cas des éléments <strong>, <em>, <span> etc.

Ancêtre, Parents, Enfants, Frères

Comprendre l'imbrication des éléments (boîtes) les uns dans les autres est essentiel.

Chaque document HTML est toujours composé de conteneurs. Ceux-ci peuvent être ancêtres, parents, enfants ou frères. Ces différents éléments composent une hiérarchie d'imbrications.

• Un élément « ancêtre » est un élément qui contient un élément ou une hiérarchie d'éléments
• Un bloc « parent » est un élément contenant directement un autre bloc. Par exemple, un DIV contenant un paragraphe P. Attention : si ce paragraphe contient lui-même des éléments (ex : strong), DIV ne sera pas parent de l'élément strong mais uniquement son ancêtre. Le parent est donc l'ancêtre immédiat.
• Un bloc contenu directement dans un autre bloc est dit « enfant » de cet élément. Par exemple, ici les éléments LI sont enfants de leur conteneur UL.
• Les éléments ayant le même élément parent sont appelés « frères ».

Le flux

La mise en place des différents éléments de la page se fait par défaut selon le flux courant.

Les éléments (balises) sont placés les uns après les autres dans le code HTML de la page.

L'ordre dans lequel apparaissent les balises dans le code HTML sera l'ordre dans lequel ils seront affichés et apparaîtront dans le document, c'est le flux. Cela signifie que, par défaut, chaque élément est dépendant des éléments frères qui l'entourent.

Par défaut, les balises « bloc » et les balises « en-ligne » ont un comportement différent dans le flux normal (voir tutoriel sur la structure des balises).

NOTE : les blocs positionnés en « absolu » ou « fixé » sortent du flux naturel et échappent quelque peu à cette règle. Ils ne sont alors plus dépendant des éléments frères. Pour se placer, un tel bloc se réfère non pas à son Parent direct, mais au premier Ancêtre positionné qu'il rencontre.

Sachez utiliser chaque balise à bon escient !

• Il est souvent inutile de faire des imbrications multiples de <div>, ceux-ci ne servant qu'à délimiter des zones de page
• Évitez d'utiliser les balises <table> pour la mise en page de votre site : ils ne sont pas fait pour ça mais pour des données tabulaires et statistiques
• Utilisez les balises <h1>...<h6> pour vos titres et non des balises <p> améliorées
• Utilisez les listes <ul> <li> pour vos menus, car leur utilisation est tout à fait appropriée pour ça (voir les articles de la catégorie « menus en CSS »)

Alignement de blocs tels que les images

Centrer un bloc requiert une technique bien différente de celle pour centrer un texte :

    width: 50%;
    display: block;
    margin: auto;

Position relative et absolue

On distingue quatre sortes de positionnement, correspondant aux valeurs de la propriété position :

1. static : statique, les éléments se placent dans l'ordre où ils apparaissent dans le code source. C'est le positionnement par défaut quand il n'est pas précisé.
2. relative : relative, les éléments sont décalés par rapport au positionnement statique, puis du nombre de pixels définis avec left, right, top, bottom. Attention : si left est défini, right est ignoré, et si top est défini, bottom est ignoré.
3. absolute : absolue, les éléments sont décalés par rapport au bloc qui les contient.
4. fixed : fixe, les éléments sont décalés par rapport à la fenêtre du navigateur. Ils ne bougent pas dans la fenêtre quand on fait défiler son contenu.

Exemple :

<div style="border-style: solid;">
	<p style="position: static; bottom: 5px; left: 50px;">Statique</p><br/>
	<p style="position: relative; bottom: 5px; left: 50px;">Relative</p><br/>
	<p style="position: absolute; bottom: 5px; left: 50px;">Absolue</p><br/>
	<p style="position: fixed; bottom: 5px; left: 50px;">Fixe</p><br/>
</div>

donne :

(on voit la position statique non affectée par le décalage, puis la relative décalée en-dessous, le fixe est en bas à gauche de la fenêtre et l'absolue en bas du contenu de celle-ci).

Éléments flottant

Exemple d'élément flottant (en rouge). La présente image est également un élément flottant à droite du wikilivre (le texte qui la suit est remonté à sa gauche).

La propriété "float" permet aux éléments de flotter dans le flux normal. Les boites bougent alors à gauche ou à droite jusqu'à la limite de leur conteneur. Les éléments situés après un flottant sont alors remontés pour combler le trou laissé autour de ce dernier.

La propriété "float" ne peut donc prendre que les valeurs "left" ou 'right". Pour que cela fonctionne, il faut aussi définir la propriété width du flottant, sinon il occupe toute la largeur de son conteneur.

Exemple :

    border: 1px solid #F00;
    float: left;
    width: 425px;