CSS

Guide de survie du positionnement CSS

Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales.

Article par Florent V. (Chef de projet, intégrateur web, Lyon, France)
Mis à jour le 02 Juillet 2009. 32591 lectures.
Tags : css, float, position, absolute, relative, flottant, positionnement, centrage, display

Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte:

  • les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3);
  • celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir);
  • les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre);
  • les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.);
  • les bugs éventuels des navigateurs (ou de certains navigateurs).

Comment s'y retrouver? Déjà, en ayant une bonne connaissance des principaux types de positionnement en CSS. Ensuite, avec quelques conseils dispensés ici à titre indicatif, et je l'espère sans prétention.

Ressources en français sur le positionnement CSS

Voici votre to-read list. On se retrouve demain, le temps que vous lisiez ces très bons articles. Allez, disons au moins les deux premiers, sinon vous n'allez rien comprendre à la suite de l'article.

Pour aller plus loin, vous pourrez aussi lire:

C'est bon, on y est? Alors on enchaine sur la galerie des horreurs. :)

Erreurs de débutant à ne pas commettre

Penser qu'il faut utiliser la propriété position à tort et à travers

C'est un réflexe logique (quoi de mieux pour positionner un élément que la propriété «position»?), mais source d'erreur. En effet, et même si ça peut surprendre, la quasi-totalité du positionnement CSS se fait sans même qu'on ait besoin d'utiliser la propriété position.

Tout positionner en absolu (pas bien)

Le positionnement absolu est à la fois très puissant et très limité. On ne l'utilisera que ponctuellement, et en sachant précisément ce que l'on fait (voir les détails plus bas).

Tout positionner en relatif (pas bien non plus)

Le positionnement relatif est très utile mais ne s'utilise que ponctuellement, pour décaler légèrement un élément par rapport à sa position normale. On ne l'utilise pas, par exemple, pour placer deux blocs côte-à-côte. Si vous vous retrouvez à écrire des position: relative; top: -291px;, vous utilisez probablement le positionnement relatif à mauvais escient.

Voilà pour les choses à ne pas faire. Maintenant, quels sont les bons réflexes à avoir?

Quel type de positionnement utiliser en priorité?

Voici, classés par ordre croissant, les types de positionnement que vous serez le plus amené à utiliser (sauf erreur ou mauvaise analyse de ma part):

  1. Garder les éléments dans le flux, et jouer sur les marges, padding, etc.

    Ça peut paraitre une évidence, mais mieux vaut le rappeler: pour la plupart des éléments d'une page, on utilisera le positionnement en flux de l'élément.

    On exploitera simplement le fait que les éléments de type bloc (div, paragraphes, titres, etc.) se placent naturellement les uns sous les autres, et prennent automatiquement toute la largeur disponible. Pour écarter les éléments entre eux ou au contraire les rapprocher, on utilisera les marges (margin) et le padding.

  2. Modifier le mode de rendu avec la propriété display

    Une des techniques les plus efficaces en positionnement CSS consiste non pas à positionner l'élément, mais à lui donner un mode de rendu différent de celui par défaut. Typiquement, il s'agit de passer un élément de type en-ligne en rendu de type bloc, ou à l'inverse des éléments de type bloc en rendu de type en-ligne. Cela permet par exemple de faire un menu horizontal à partir du code HTML d'une liste à puces.

    À l'avenir, on pourra utiliser display avec des valeurs intéressantes comme inline-block (déjà supporté par la majorité des navigateurs), table et table-cell, etc.

    Mais attention: chaque mode de rendu a ses spécificités, ses avantages et ses limites! Il faudra donc bien les connaitre pour choisir en connaissance de cause.

  3. Pour placer des blocs côte-à-côte: propriété float

    La plupart du temps, pour créer des «colonnes» ou simplement placer deux blocs côte-à-côte, on utilisera le positionnement flottant. Attention, le positionnement flottant a quelques caractéristiques pas toujours simples à comprendre, comme par exemple le dépassement des flottants.

  4. Centrage des éléments

    Vient toujours le moment où l'on veut centrer des contenus ou tout un site. Pour centrer horizontalement un texte, on utilisera text-align. Pour centrer horizontalement un bloc, on utilisera la technique des marges automatiques. Enfin, le centrage vertical est le point compliqué. À l'heure actuelle, la solution la plus compatible pour centrer verticalement un bloc est d'utiliser un tableau de mise en page. À l'avenir, on pourra utiliser display: table-cell sur un bloc conteneur pour centrer son contenu avec vertical-align: middle.

    (Articles sur le centrage en CSS: Alsacréations, Covert Prestige.)

  5. Positionnement absolu

    Pour commencer, on n'utilisera le positionnement absolu que dans les conditions suivantes: 1) si on sait comment faire pour positionner un élément en absolu par rapport à son parent ou ancêtre positionné (si cela ne vous dit rien, relire les articles indiqué en ressources!); 2) si on a une idée précise des conséquences du positionnement absolu (risque de chevauchement des contenus); 3) si on sait à l'avance quels sont les contenus qui seront ainsi positionnés, et si ces contenus ne risquent pas de prendre de l'ampleur et ainsi de déborder de l'espace défini.

    Une fois ces précautions bien intégrées, on pourra utiliser le positionnement absolu de manière efficace pour quelques éléments de nos pages web.

  6. Positionnement relatif

    Pour l'essentiel, le positionnement relatif a deux usages concrets: 1) créer un nouveau référent pour les éléments enfants et descendants positionnés en absolu et 2) décaler légèrement (de quelques pixels, pas plus) un élément par rapport à sa position normale, pour réaliser un effet visuel. Toute autre utilisation, sans être impossible ou forcément incorrecte, est risquée.

  7. Positionnement fixe

    À n'utiliser qu'en connaissance de cause, avec beaucoup de précautions et en testant sur différentes configurations (et surtout différentes résolutions d'écran). On n'utilise que très rarement le positionnement fixe.

Nous y sommes. Avec un peu de chance, vous y voyez maintenant plus clair. Si ce n'est malheureusement pas le cas, je vous invite à lire ou relire les articles indiqués comme ressources, et à mener vos propres essais pour vous familiariser avec le comportement des différentes propriétés. Courage!