LE PLACEMENT EN CSS

Introduction au langage CSS

Terminologie

Ce langage sert à mettre en forme les documents en définissant, pour des sélecteurs, deux sortes de propriétés :

Un sélecteur peut être :

A chaque propriété correspond une valeur.

Exemples :

body { background: orange; }
#introduction { margin : 10px; }
.petit { font-size: 0.7em; }

Ordre de priorité pour un style

Un style peut être définie :

Ordre de priorité :

Exemple :

On souhaite donner une couleur de fond à un tableau. Dans l'exemple ci-dessous, on définit trois couleurs différentes selon les trois méthodes. Au final, le tableau apparaît en bleu. Toutefois, il reste centré par rapport à la page avec une marge intérieure de 20px.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      table {
        background: orange;
        padding: 20px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <table bgcolor="green" style="background: blue;">
      <tr><td>Mon tableau</td></tr>
    </table>
  </body>
</html>

Résultat obtenu :

Pour plus de clarté, on essaie de séparer les codes en HTML, en JavaScript et en CSS. On préfère donc généralement définir le style en dehors de la balise.

Les pseudo-classes

Une pseudo-classe est un mot-clé ajouté au sélecteur afin d'indiquer l'état spécifique dans lequel se trouve l'élément.

Exemple de bouton personnalisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      a {
        background-color: #fcf;
        padding: 8px 16px 8px 16px;
        border: 1px solid #68b;
        border-radius: 10px 10px 20px 20px;
        box-shadow: 0px 2px 6px #68b;
      }
      a:hover { background-color: #f9f; }
      a:active {
        position: relative;
        top: 2px;
      }
    </style>
  </head>
  <body>
    <a>Cliquez!</a>
  </body>
</html>

Résultat obtenu :

Dimensionner et positionner un bloc

La balise DIV

Un document comporte essentiellement des titres et des paragraphes, structurés avec :

Toutefois, il peut comporter aussi :

On utilise les balises <div></div> pour créer des conteneurs génériques qui structurent les pages HTML en plusieurs "sections" ou "boîtes", que nous nommerons "blocs" dans la suite de cet exposé.

Exemples :

A la place d'un bloc, créé avec les balises <div> et </div>, auquel on associe un identifiant ou une classe, il est possible d'utiliser un "élément de section". Il est, peut-être, préférable d'attendre un peu avant de les utiliser car ils ont été mis en place récemment, avec le HTML5. La compatibilité avec les anciens navigateurs n'est donc pas assurée...

Liste des éléments de section :

BalisesDétails
<section></section> Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web.
<article></article> Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
<nav></nav> Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages).
<aside></aside> Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
<header></header> Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
<footer></footer> Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).

Dimensionnement et positionnement

On souhaite parfois créer un bloc de petites dimensions et le positionner dans la page.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .f1 {
        padding: 10px;
        background: green;
        width: 50%;
        margin: auto;
      }
      #f2 {
        padding: 20px;
        background: orange;
        width: 30%;
        margin-left: 20%;
      }
    </style>
  </head>
  <body>
    <div class="f1">Fenêtre 1, centrée.</div>
    <div id="f2">Fenêtre 2<br>positionnée avec une marge.</div>
    <div class="f1">Fenêtre 3, centrée.</div>
  </body>
</html>

Résultat obtenu :

Dimensionner et positionner plusieurs blocs

Utiliser un tableau

L'objectif est de positionner des blocs à différents endroits de la page. Par exemple, on souhaite placer du contenu sur deux colonnes. Celle de droite contient le menu et celle de gauche le texte associé.

Une solution consiste à placer le contenu dans les cellules d'un tableau. Cette solution, autrefois très répandue, tend aujourd'hui à être abandonnée. En effet, la balise <table> est conçue pour créer des tableaux, pas pour positionner des blocs. Ceci étant, lorsqu'elle n'est pas définie, la largeur d'une cellule de tableau présente l'avantage de s'adapter automatiquement à son contenu...

Utiliser display: inline-block

Cette solution consiste à :

Attention :

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #c1 {
        margin-left: 5%;
        padding: 10px;
        background: orange;
        width: 30%;
        display: inline-block;
      }
      #c2 {
        padding: 10px;
        background: red;
        width: 20%;
        display: inline-block;
      }
      #c3 {
        padding: 10px;
        background: blue;
        width: 20%;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="c1">Colonne 1<br>suite</div>
    <div id="c2">Colonne 2</div>
    <div id="c3">Colonne 3<br>suite<br>suite</div>
  </body>
</html>

Résultat obtenu :

Valeurs possibles pour la propriété "display" :

Des blocs à l'intérieur d'un bloc

C'est la même solution que précédemment, mais tous les blocs sont placés dans un autre bloc. Cela permet de les positionner verticalement, avec la propriété "vertical-align". Une largeur importante du bloc qui engloge les autres blocs évite les retours à la ligne.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #tout {
        margin-left: 20%;
        background: #dddddd;
      }
        #tout div {
        padding: 10px;
        width: 20%;
        display: inline-block;
        vertical-align: middle;
      }
      #b1 { background: green; }
      #b2 { background: blue; }
      #b3 { background: orange; }
    </style>
  </head>
  <body>
    <div id="tout">
      <div id="b1">Première partie<br>suite...</div>
      <div id="b2">Deuxième partie</div>
      <div id="b3">Troisième partie<br>suite...<br>suite...</div>
    </div>
  </body>
</html>

Résultat obtenu :

Valeurs possibles pour la propriété "vertical-align" :

Utiliser float: left;

La propriété "float" retire un bloc du flux normal pour le placer le plus à droite ou le plus gauche possible dans son conteneur, où le texte et les éléments en-ligne se répartiront autour de lui.

Bien qu'elle n'ait pas été conçue pour cela, cette propriété est très répandue pour les mises en page. Ayant créé plusieurs blocs, placés les uns à coté des autres grâce à la propriété "float", on ajoute souvent un bloc au contenu fictif doté du style "clear:both;". Cela permet d'ajouter du contenu à la suite.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #gauche {
        float: left;
        width: 30%;
        background: orange;
        padding: 10px;
      }
      #droite {
        float: right;
        width: 60%;
        background: green;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div id="gauche">Colonne de gauche.</div>
    <div id="droite">Colonne de droite<br>suite...</div>
    <div style="clear:both;"> </div>
    <div>Suite...</div>
  </body>
</html>

Résultat obtenu :

Mise en page sans tableaux... avec des tableaux

Il est possible de faire une mise en page sans tableaux... avec des tableaux! Pour cela, on utilise les valeurs "table" et "table-cell" de la propriété "display".

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #tout {
        margin: auto;
        display: table;
      }
      #menu {
        width: 20%;
        background: #ff3366;
        display: table-cell;
      }
      #contenu {
        width: 40%;
        background: #9966ff;
        display: table-cell;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="tout">
      <div id="menu">
        <ul>
          <li>Lien 1
          <li>Lien 2
        </ul>
      </div>
      <div id="contenu">
        <p>Le contenu...</p>
      </div>
    </div>
  </body>
</html>

Résultat obtenu :

Utiliser la propriété position

La propriété CSS "position" s'utilise accompagnée d'autres propriétés : top, left, bottom ou right.

Elle peut prendre plusieurs valeurs :

La propriété "position" du conteneur "body" ayant pour valeur "static", les blocs seront positionnés par rapport à la page si on donne à la propriété "position" la valeur "absolute".

Exemple de code, avec la valeur "block" pour la propriété "display" :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #menu {
        position: absolute;
        top: 30px;
        left: 50px;
        width: 20%;
        background: #ff3366;
      }
      #contenu {
        position: absolute;
        top: 70px;
        left: 100px;
        width: 40%;
        background: #9966ff;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <ul>
        <li>Lien 1
        <li>Lien 2
        <li>Lien 3
      </ul>
    </div>
    <div id="contenu">
      <p>Le contenu...</p>
    </div>
    <p>bla bla...</p><p>bla bla...</p><p>bla bla...</p><p>bla bla...</p>
  </body>
</html>

Résultat obtenu :

Le but de cet exemple est de montrer que les blocs sont retirés du flux normal de la page pour être positionnés par dessus cette page. Ce peut être, selon le cas, un effet recherché ou un effet indésirable, qu'il faut gérer.

Autre exemple de code, avec la valeur "inline-block" pour la propriété "display" :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #b1, #b2, #b3 {
        display: inline-block;
        padding: 15px;
      }
      #b1 { background: orange; }
      #b2 { background: red; }
      #b3 { background: pink; }
      #b4 {
        background: blue;
	opacity: 0.7;
	position: absolute;
        padding: 20px; 
      }
    </style>
  </head>
  <body>
    <div id="b1">Bloc 1</div>
    <div id="b2">Bloc 2
      <div id="b4">Bloc 4</div>
    </div>
    <div id="b3">Bloc 3</div>
  </body>
</html>

Résultat obtenu :

Les blocs sont placés les uns à la suite des autres, sur la même ligne. La valeur "absolute" de la propriété "position" retire le dernier bloc de cette chaîne en le positionnant par rapport au bloc le contenant.

Exemple de code, avec le contenu positionné par rapport au contenant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #contenant {
        background-color: #299;
        padding: 1em;
        position: relative;
      }
      #contenu {
        background-color: #929;
        width: 30%;
        padding: 1em;
        position: absolute;
        top: 1em;
        right: 2em;
      }
    </style>
  </head>
  <body>
    <p>bla bla...</p>
    <div id="contenant">
      Le contenant...
      <div id="contenu">Le contenu...</div>
    </div>
  </body>
</html>

Résultat obtenu :

Mise en page avec Flexbox

Flexbox est une solution récente. Il est peut-être préférable d'attendre un peu avant de l'utiliser. Le principe est d'avoir un conteneur, avec plusieurs éléments à l'intérieur. La valeur "flex" pour la propriété "display" du conteneur permet d'agencer les éléments à l'intérieur en mode Flexbox. Avec différentes propriétés, les éléments à l'intérieur peuvent être placés de diverses manières. Un des avantages de cette solution est de pouvoir changer dynamiquement l’affichage en fonction des résolutions d’écrans.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex { display: flex; }
      .flex > div {
        padding: 1em;
        flex: 1 1 auto;
        width: 25%;
        transition: width 0.7s;
       }
       .flex > div:nth-child(1) { background: #a3a; }
       .flex > div:nth-child(2) { background: #3a3; }
       .flex > div:nth-child(3) { background: #aa3; }
       .flex > div:nth-child(4) { background: #33a; }
       .flex > div:hover { width: 70%; }
    </style>
  </head>
  <body>
    <div class="flex"><div>Un</div><div>Deux</div><div>Trois</div><div>Quatre</div>
  </div>
 </body>
</html>

Résultat obtenu :

Utiliser l'outil intégré à une bibliothèque

Certaines bibliothèques disposent d'un outil facilitant le positionnement des blocs. C'est le cas de Bootstrap, qui propose une grille de comportant douze colonnes au maximum. On place les blocs sur la grille à l'aide de classes associées à des balises <div>.

L'exemple ci-dessous est récupéré sur le site de Bootstrap. Il montre un résultat et le code permettant de l'obtenir.