Les objectifs

La mise en page des sites web avec des boîtes fut la première grande avancée des CSS 2.1. Même si les modules Flexbox et Grid permettent d’obtenir des mises en pages très élaborées, les techniques « classiques » avec les CSS rendent toujours de bons services, même actuellement.

Le positionnement des boîtes

1. Les positions des boîtes

Le positionnement des boîtes faisait partie intégrante des CSS 2.1 : https://www.w3.org/TR/CSS2/visuren.html#propdef-position

Actuellement, le W3C travaille sur le module dédié Positioned Layout Module Level 3, qui est encore en Working Draft au 3 avril 2023 : https://www.w3.org/TR/css-position-3/. C’est donc un module qui n’est pas du tout prêt pour la production, il est uniquement utilisable pour des tests en local.

La propriété position des CSS 2.1 accepte plusieurs valeurs :

static est le positionnement standard et par défaut de toutes les boîtes qui s’affichent dans le flux normal de la page dans la fenêtre du navigateur.
relative permet de positionner un élément relativement à un autre élément. Ce positionnement se fait aussi dans le flux normal de la page.
absolute implique que l’élément concerné sort du flux normal de la page et s’affiche au-dessus de ce flux. Sa position se détermine par rapport à l’élément parent qui peut être la fenêtre du navigateur.
fixed donne le même résultat que le positionnement absolu, à la différence que l’élément reste fixe dans la fenêtre du navigateur quand l’utilisateur fait défiler la page.

Le positionnement des éléments HTML concernés se fait avec les propriétés suivantes :

top position par rapport au côté haut de l’élément.
right position par rapport au côté droit de l’élément.
bottom position par rapport au côté bas de l’élément.
left position par rapport au côté...

Les boîtes flottantes

1. L’habillage des images

L’objectif du flottement des boîtes est habillage du texte autour d’une image.

C’est la propriété float qu’il faut utiliser. Elle accepte ces valeurs :

left : l’élément est placé sur sa gauche dans son élément parent et les éléments suivants le contournent sur sa droite.
right : l’élément est placé sur sa droite dans son élément parent et les éléments suivants le contournent sur sa gauche.

Voici un exemple simple :

<!doctype html>  
<html lang="fr">  
<head>  
<meta charset="UTF-8">  
<title>Titre de la page</title>  
<style>  
  #hippopotame img {  
    float: left ;  
    margin-right: 20px ;  
  }  
  #tigre img {  
    float: right;  
    margin-left: 20px ;  
  }  
</style>  
</head>  
<body>  
<div id="hippopotame">  
  <h1>Vestibulum id ligula porta</h1>  
  <p><img src="hippopotame.jpg"></p>  
  <p>Lorem ipsum...

Les boîtes superposées

Avec le positionnement absolu, les boîtes se superposaient selon l’ordre de déclaration dans le code. Voici un exemple simple :

<!doctype html>  
<html lang="fr">  
<head>  
<meta charset="UTF-8">  
<title>Titre de la page</title>  
<style>  
  #un, #deux, #trois {  
    position: absolute ;  
    border: 1px solid #000 ;  
    background-color: #eee ;  
    width: 400px ;  
  }  
  #un {  
    left: 40px ;  
    top: 40px ;  
  }  
  #deux  {  
    left: 80px ;  
    top: 80px ;  
  }  
  #trois {  
    left: 120px ;  
    top: 120px ;  
  }  
</style>  
</head>  
<body>  
<div id="un">  
  Vestibulum id ligula porta felis euismod semper...  
</div>  
<div id="deux">  
  Cras mattis consectetur purus sit amet fermentum...  
</div>  
<div...

Le débordement des boîtes

Dans une mise en page, il peut arriver que le contenu soit plus important que le conteneur. Par exemple, il est possible d’avoir une boîte ayant une hauteur parfaitement fixée contenant beaucoup plus de texte que ne peut afficher cette boîte. La propriété overflow permet de décider ce qu’il faut faire pour l’affichage du texte en surplus. Voici les valeurs possibles :

hidden : le contenu en trop est masqué, sans possibilité de visualiser le texte qui déborde.
visible : le contenu en trop est visible et l’affichage ignore les restrictions de hauteur fixe de l’élément parent.
scroll : une barre de défilement s’affiche pour visualiser le texte qui déborde.

Voici un exemple de ces trois possibilités :

<!doctype html>  
<html lang="fr">  
<head>  
<meta charset="UTF-8">  
<title>Titre de la page</title>  
<style>  
  #un, #deux, #trois {  
    border: 1px solid #000 ;  
    width: 400px ;  
 ...

La visibilité des boîtes

La propriété visibility permet de masquer une boîte avec la valeur hidden et de l’afficher avec la valeur visible. Attention, lorsqu’un élément est masqué avec la valeur hidden, il est simplement non affiché, mais la place utilisée pour son affichage est toujours conservée dans la fenêtre du navigateur. Par contre, avec la propriété display: none, non seulement l’élément n’est pas affiché, mais il est aussi retiré de la page, sans que son espace d’affichage soit conservé. Il convient donc de ne pas confondre l’utilisation de ces deux propriétés.