Le positionnement flottant

Vous vous souvenez de la propriété float? Nous l'avons utilisée pour faire flotter une image autour du texte (figure suivante).

exemple float
L'image flotte autour du texte grâce à la propriété float

Il se trouve que cette propriété est aujourd'hui utilisée par la majorité des sites web pour… faire la mise en page !
En effet, si on veut placer son menu à gauche et le contenu de sa page à droite, c'est a priori un bon moyen. Je dis bien a priori car, à la base, cette propriété n'a pas été conçue pour faire la mise en page et nous allons voir qu'elle a quelques petits défauts.

Reprenons le code HTML structuré que nous avons réalisé il y a quelques chapitres:

Pour rappel, voici ce que ça donne sans CSS:

site zozor sans CSS
Une page HTML sans CSS

Nous allons essayer de placer le menu à gauche et le reste du texte à droite. Pour cela, nous allons faire flotter le menu à gauche et laisser le reste du texte se placer à sa droite.
Nous voulons que le menu occupe 150 pixels de large. Nous allons aussi rajouter une bordure noire autour du menu et une bordure bleue autour du corps (à la balise <section>) pour bien les distinguer:

site zozor menu bien mais collé
Le menu est bien positionné mais collé au texte

Il y a deux défauts:

  • il manque une petite marge
  • la suite du texte passe sous le menu

Pour résoudre ces deux problèmes d'un seul coup, il faut ajouter une marge extérieure à gauche de notre <section>, marge qui doit être par ailleurs supérieure à la largeur du menu.
Si notre menu fait 150 px, nous allons par exemple donner une marge extérieure gauche de 170 px à notre section de page (figure suivante), ici à la ligne 10.

site zozor
Le corps de page est bien aligné à droite du menu

La page est maintenant correctement aligné.

À savoir!! Par contre, si on avait voulu qu'un élément se place obligatoirement sous le menu, il aurait fallu utiliser clear: both;, qui oblige la suite du texte à se positionner sous l'élément flottant.

Haut


Transformez vos éléments avec display

Il existe une propriété très puissante, qui permet de modifier les lois du CSS, c'est display.

Par exemple, avec celle-ci, on peut imposer aux liens d'apparaitre sous forme de blocs, de façon à ce qu'ils se positionnent les uns en dessous des autres:

Voici quelques-unes des principales valeurs que peut prendre la propriété display en CSS:

tableau display

On voit dans le tableau qu'on peut cacher des éléments. Pour les faire apparaitre, il faudra faire appel à JavaScript. On va s'en servir, par exemple, pour les sous-menus qui ne s'affichent que lorsqu'on parcourt les menus.

En ce qui concerne inline-block, c'est un peu le meilleur des deux mondes : les éléments s'affichent côte à côte et peuvent être redimensionnés.

Haut


Le positionnement inline-block

Dans le cas de sites complexes, les manipulations pour le positionnement flottant se révèlent parfois un peu délicates;quand il y a un peu plus qu'un simple menu, on ne peut pas se contenter de clear: both;, qui complexifient rapidement le code de la page.

Il vaut mieux, dans ce cas, transformer les éléments en inline-block avec la propriété display.

En pratique (placer côte à côte le menu de navigation et la section du centre de la page via inline-block) ça donne:

inline block
Le menu et le corps sont côte à côte… mais positionnés en bas !

Visiblement, il nous manque quelque chose, ce n'est pas ce qu'on voulait.

Essayons avec la propriété (pour aligner) normalement réservée aux tableaux: vertical-align +

  • baseline: aligne de la base de l'élément avec celle de l'élément parent (par défaut)
  • top: aligne en haut
  • middle: centre verticalement
  • bottom: aligne en bas
  • (valeur en px ou %) : aligne à une certaine distance de la ligne de base (baseline).

iline block modifié
Le menu et le corps sont alignés en haut et côte à côte

On peut s'apercevoir que la section ne prend pas toute la largeur du fait que ce n'est plus un bloc, elle occupe seulement la place dont elle a besoin.
Si cela ne convient pas au design, on peut modifier la taille de section avec width.

Haut


Les positionnements absolu, fixe et relatif

Pour positionner avec précision des éléments sur la page, on a:

  • Le positionnement absolu: il nous permet de placer un élément n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre, etc.).
  • Le positionnement fixe: identique au positionnement absolu mais l'élément reste toujours visible, même si on descend plus bas dans la page. C'est un peu le même principe que background-attachment: fixed; .
  • Le positionnement relatif: permet de décaler l'élément par rapport à sa position normale.

À savoir!! Comme pour les flottants, les positionnements absolu, fixé et relatif fonctionnent aussi sur des balises de type inline.
Toutefois, vous verrez qu'on l'utilise bien plus souvent sur des balises block que sur des balises inline.

Pour la mise en pratique, on va utiliser la propriété CSS position +

  • absolute: positionnement absolu
  • fixed: positionnement fixe
  • relative: positionnement relatif

Haut

Le positionnement absolu

Il permet de placer un élément (réellement) n'importe où sur la page. Pour ça, on doit écrire:

Pour bien placer l'élément, il faut préciser en utilisant:

  • left: position par rapport à la gauche de la page
  • right: position par rapport à la droite de la page
  • top: position par rapport au haut de la page
  • bottom: position par rapport au bas de la page.

On peut également leur donner une valeur en px, ou bien une valeur en %.

En pratique, voici ce que ça donne:

absolu
Positionnement absolu de l'élément sur la page

Avec cela, vous devriez être capables de positionner correctement votre bloc.

Il faut donc utiliser la propriété position et au moins une des quatre propriétés ci-dessus (top, left, right ou bottom). Si on écrit par exemple:

… cela signifie que le bloc doit être positionné tout en bas à droite (0 pixel par rapport à la droite de la page, 0 par rapport au bas de la page).

Si on essaye de placer notre bloc <nav> en bas à droite de la page, on obtient le même résultat qu'à la figure suivante.

absolu modifié
Le menu est positionné en bas à droite de l'écran

Pour plus d'espace avec la bordure, on peut intégrer une marge intérieure (padding) au menu.

Si on veut placer 2 éléments en absolu vers le même endroit, ils risquent de se chevaucher. Pour l'éviter, il faut utiliser la propriété z-index pour indiquer quel élément doit apparaître au-dessus des autres, en sachant que l'élément ayant la valeur de z-index la plus élevée sera placé par dessus les autres:

z-index
Positionnement des éléments absolus

À savoir!! Si le bloc qu'on souhaite mettre en absolu se trouve lui-même dans un bloc déjà positionné (absolu, fixe, ou relatif), alors il se positionnera en fonction du coin haut gauche du bloc initial, et non de la page.

Haut

Le positionnement fixe

Le principe est exactement le même que pour le positionnement absolu sauf que le bloc reste fixe à sa position, même si on descend plus bas dans la page.

fixe
Le menu reste affiché en bas à droite en toutes circonstances

Haut

Le positionnement relatif

Le positionnement relatif peut vite devenir difficile à utiliser, du fait qu'il permet d'effectuer des "ajustements": l'élément est décalé par rapport à sa position initiale.

La particularité de ce positionnement est que le point d'origine n'est pas celui de la page mais celui de l'élément sélectionné.

Prenons par exemple un texte important, situé entre deux balises strong. Pour commencer, je le mets sur fond rouge pour qu'on puisse mieux le repérer:

relatif
Origine de la position relative

Pour bien placer l'élément, il faut préciser en utilisant position: relative; +:

  • left
  • right
  • top
  • bottom

Prenons un exemple : je veux que mon texte se décale de 55 pixels vers la droite et de 10 pixels vers le bas. Je vais donc demander à ce qu'il soit décalé de 55 pixels par rapport au « bord gauche » et de 10 pixels par rapport au « bord haut » (lignes 6 à 8):

relatif modifié
Le texte est décalé

Haut