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 :

Des propriétés d'apparence : Couleurs, bordures, polices...
Des propriétés de placement : Largeur, hauteur...

Un sélecteur peut être :

Une balise.
Un identifiant (unique).
Une classe.

Un sélecteur peut être complété par une pseudo-classe. A chaque propriété correspond une valeur.

Syntaxe générale

sélecteur:pseudo-classe {
  propriété: valeur;
}

Exemples

body { background: #f59; }

body : Sélecteur associé à une balise.
background : Propriété d'apparence.
#f59 : Valeur de la propriété.

#introduction:hover { margin : 10px; }

#introduction : Sélecteur associé à un identifiant.
:hover : Pseudo-classe.
margin : Propriété de placement.
10px : Valeur de la propriété.

.petit { font-size: 0.7em; }

.petit : Sélecteur associé à une classe.
font-size : Propriété d'apparence.
0.7em : Valeur de la propriété.

Ordre de priorité pour un style

Un style peut être définie :

Dans une feuille de style à part.
Dans un style intégré à la balise.
Avec un attribut de balise.

Ordre de priorité :

Le style, intégré à la balise ou dans une feuille de style à part, est toujours prioritaire sur l'attribut de balise.
Le style intégré à la balise est toujours prioritaire sur le style définit dans une feuille de style à part.

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 :

Les balises <h1></h1>, <h2></h2>... pour les titres.
Les balises <p></p> pour les paragraphes.

Toutefois, il peut comporter aussi :

Un menu.
Une introduction.
Une préface.
Des chapitres
Une conclusion.
Des annexes.
...

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é.

A un bloc unique est associé un identifiant.
A plusieurs blocs semblables sont associés une classe.

Exemples :

<div id="sommaire"></div> : Le document ne comporte qu'un seul sommaire.
<div class="chapitre"></div> : Le document comporte plusieurs chapitres.

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 :

Balises	Dé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.

Dimensions :
- La largeur du bloc se définit avec la propriété width.
- Si aucune hauteur de bloc n'est définie, alors celle-ci s'ajustera en fonction du contenu.
La position du bloc se définit avec une marge, par exemple :
- margin-left : 20%; pour une marge de 20% en partant de la gauche.
- margin : auto; pour un bloc centré.

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 à :

Définir la largeur des blocs (en % par exemple).
Utiliser la valeur "inline-block" de la propriété "display" pour placer les blocs les uns à la suite des autres, sur la même ligne.

Attention :

Pour éviter l'espace entre deux blocs, il est possible de coller les balises </div> et <div>.
Pour les dimensions des blocs, prévoir des valeurs légèrement inférieures au maximum pour éviter les retours à la ligne, en particulier si on définit des valeurs pour les propriétés "margin", "padding" ou "border".
Eventuellement, positionner le premier bloc en définissant une valeur à la propriété "margin-left".
Tous les blocs sont alignés par le bas...

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" :

"block;" : Place les blocs les uns en dessous des autres.
"inline-block;" : Place les blocs les uns à la suite des autres.
"none;" : Rend les blocs invisibles.
"inline;" : Considère les blocs comme formant une seule ligne.

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" :

"middle;" : Aligne le milieu du bloc avec le milieu de son conteneur.
"top;" : Aligne le haut du bloc avec le haut de son conteneur.
"bottom;" : Aligne le bas du bloc avec le bas de son conteneur.

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 :

static :
C'est la valeur par défaut. L'élément vient à droite (display: inline;) ou en-dessous (display: block;) du précédent. Pour cette valeur, les propriétés top, left, bottom et right sont inutiles.
relative :
L'élément est positionné par rapport à sa position normale.
fixed :
L'élément est retiré du flux, positionné par rapport aux bords de la fenêtre du navigateur. Il reste toujours visible, même dans le cas d'une longue page qui défile.
absolute :
L'élément est retiré du flux et positionné par rapport à l'élément choisi.
- Ce sera le conteneur (le parent le plus proche) si ce dernier est positionné en relative, en fixed ou en absolute.
- Sinon... c'est un peu délicat. Ce sera le plus souvent la page.

Exemple de code, très classique, 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 :

La propriété "position" du conteneur "body" a pour valeur par défaut "static". Les blocs sont alors positionnés par rapport à la page si on donne à la propriété "position" la valeur "absolute". Ils 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.

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 :

Voici maintenant un cas moins classique. Des 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 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 :

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.