Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Cet article recapitulera plusieurs fonctionnalités de mise en page CSS que l'on a déjà cotoyé dans les modules précedents — telles que les différentes valeurs de display — et en introduit de nouveaux que nous aborderons au travers de ce module.

Prérequis: Les fondamentaux du HTML (étudiez Introduction au HTML), et avoir une idée dont CSS fonctionne (étudiez Introduction à CSS).
Objectif: Vous donner un aperçu des techniques de mise en page en CSS. Chaque technique peut être apprise plus précisément dans des tutoriels dédiés.

Les techniques de mise en page en CSS nous permettent de prendre des éléments contenus dans une page web et de contrôler leurs positionnement par rapport à leur position par défaut dans le flux de mise en page CSS, ainsi qu'aux autres éléments autour d'eux, à leur conteneur parents, ou de la fenêtre principal d'affichage. Les techniques de mises en page abordées en détails dans ce module sont:

  • Floats (Flottants)
  • Positioning (Positionnement)
  • CSS tables (Tableaux CSS)
  • Flexbox (Boîtes flexibles)
  • Grid (Grilles)

Chaque technique à ses usages, ses avantages, et ses inconvénients.

Le flux de disposition classique

Le flux classique est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML:

<p>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>

Par défaut, le navigateur affichera ce code de telle manière:

Remarquez ici comment le HTML est affiché dans l'ordre exact dans lequel il se trouve dans le code source, avec les éléments qui se superposent les uns aux dessus des autres — le premier paragraphe, puis la liste non ordonnée, et enfin le second paragraphe.

Les techniques de mise en page ont tendance à modifier ce comportement par défaut, par l'utilisation de:

  • La propriété positionstatic est le comportement par défaut dans le flux, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur.
  • Floats — appliquer à float une valeur comme left peut crééer un alignement du bloc de l'élément aux côtés d'un autre au lieu de se placer au dessus.
  • La propriété display — avec les valeurs standards comme block, inline ou inline-block peuvent changer la manière dont l'élément se comporte dans le flux classique (voir Les types de boîtes pour plus d'informations), tandis que des valeurs peu habituelles ou spécialisées nous permettent de disposer les éléments de manières complètement différentes en utilisant les outils comme Flexbox.

Floats

Floats (les flottants) est une technique qui permet à des éléments de flotter à gauche ou à droite d'autres éléments, à la place du positionnement par défaut qui est au-dessus d'un autre. Les principales utilisations des flottants sont de faire des mises en page en colonnes et de faire flotter du texte autour d'une image.    Pour vous mettre en condition, regardons de plus près la propriété float suivi d'un exemple simple.

La propriété float a quatre valeurs possibles:

  • left — fait flotter l'élément à gauche.
  • right — fait flotter l'élément à droite.
  • none — spécifie que l'élement ne flotte plus. C'est la valeur par défaut.
  • inherit — spécifie que la valeur de la propriété float devrait être héritée de son élément parent.

Exemple HTML simple

Voyons de quelle manière nous pouvons créer une mise en page simple avec deux colonnes en utilisant les flottants. Tout d'abord, un peu de HTML:

<h1>2 column layout example</h1>
<div>
  <h2>First column</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
</div>

<div>
  <h2>Second column</h2>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.</p>
</div>

Ici nous avons un titre en tout début, et deux <div> simples, dont chacun contient un second niveau avec un titre et un paragraphe. Par défaut, le contenu sera disposé dans l'ordre dans lequel il se trouve dans le code source, du haut vers le bas jusqu'à la fin de la page:

Faire flotter les colonnes

Faisons quelques changements — nous voulons à la place que nos deux <div> se trouvent côte à côte. Pour ce faire, nous pouvons utiliser le code suivant. Remarquez de quelle manière les deux <div> sont rendus flottants. L'un avec la valeur left, et l'autre avec la valeur right, ce qui signifie que l'un flottera à gauche, et l'autre flottera à droite. Il y a également des valeurs données à width qui leurs permettent de s'ajuster entre eux sur la même ligne et d'avoir un écart (une gouttière) entre eux (la largeur totale (width) ne sera jamais plus haute que 100).

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

L'exemple mis à jour ressemblera à ceci:

Note: Pour en apprendre d'avantage sur les flottants CSS, référez vous à nos articles sur les Floats.

Techniques de positionnement

Le positionnement nous permet de déplacer un élément de son emplacement original sur la page jusqu'à un autre emplacement avec une grande précision.

Il y a quatre principaux types de positionnement que vous devriez connaître:

  • Le positionnement statique est la valeur par défaut que chaque élément reçoit — cela signifie simplement "place l'élément dans sa position normale dans le flux classique de la mise en page du document — il n'y a rien de spécial à changer ici".
  • Le positionnement relatif permet de modifier la position d'un élément sur la page, de le déplacer relativement de sa position classique dans le flux — incluant le chevauchement d'autres éléments sur la page. C'est très utile pour les modifications mineures de la mise en page et la précision du design.
  • Le positionnement absolu déplace un élément complétement en dehors du flux classique, comme si il se trouvait sur sa propre couche séparé du reste. À partir de là, vous pouvez le maintenir à une position relative au bord de la page de l'élément <html> (ou de son plus proche élément ancêtre positionné). C'est très pratique pour créer des effets de mises en page complexes tels que des boîtes d'onglets dans lesquels différents contenus se trouvent les uns à coté des autres et sont affichés ou cachés lorsque c'est nécessaire, ou bien des bandeaux d'informations qui se trouvent en dehors de l'écran par défaut, mais qui peuvent être configurés pour glisser sur l'écran à l'aide d'un bouton de contrôle.
  • Le positionnement fixe est vraiment très similaire au positionnement absolu, à l'exception qu'il accroche un élément relativement à la fenêtre d'affichage (viewport) du navigateur, et non d'un autre élément. C'et très pratique pour créer des effets tels qu'un menu de navigation persistant qui reste toujours au même endroit sur l'écran tandis que le reste de la page défile.

Exemple simple de positionnement

Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci:

<h1>Positioning</h1>

<p>I am a basic block level element.</p>
<p class="positioned">I am a basic block level element.</p>
<p>I am a basic block level element.</p>

Ce code HTML sera stylisé par défaut en utilisant le CSS suivant:

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

Le résultat est le suivant:

Positionnement relatif

Un usage courant du positionnement relatif est de faire de toute petite modification dans votre mise en page, comme déplacer légèrement une icône pour qu'elle s'aligne avec une étiquette de texte. Pour réaliser cette opération, nous pourrions ajouter la règle suivante pour ajouter un positionnement relatif:

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

Ici pour notre paragraphe du milieu, nous donnons à la propriété  position la valeur de relative — ce qui ne change rien avec cette valeur seule, alors nous ajoutons également les propriétés top et left. Elles servent à déplacer l'élément en question en bas et vers la droite — il semble que ce soit l'opposé de ce que vous attendiez mais vous devez vous représenter l'élément comme étant poussé depuis le coté gauche et le coté haut, ce qui à pour résultat de le déplacer à droite et en bas.

Ajouter ce code donnera le résultat suivant:

Le positionnement absolu

Le positionnement absolu est utilisé pour déplacer les éléments à n'importe quel endroit sur la page web, créant ainsi des mises en page complexes. De manière intéressante, il est souvent utilisé conjointement avec le positionnement relatif et les flottants.

De retour sur notre exemple non-positionné, nous pourrions ajouter la règle CSS suivante pour implémenter le positionnement absolu:

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Ici pour notre paragraphe du milieu, nous donnons à la propriété  position la valeur absolute, et les mêmes propriétés top et left que précédemment. Ajouter ce code, cependant, donnera le résultat suivant:

C'est vraimet très différent! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se trouve tout en haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés top et left ont des effets différents sur les éléments positionnés en absolu par rapport aux éléments positionnés en relatif. Dans ce cas elles ne précisent pas de combien de pixels le déplacement est effectué à partir de sa position d'origine; à la place, elles précisent la distance où l'élément doit se trouver en partant du haut de la page et du coté gauche à partir des limites de la page (l'élément  <html>, pour être exact).

Nous laissons de côté le positionnement fixe pour le moment — il fonctionne à peu près de la même manière, à l'exception près qu'il reste fixé au bord de la fenêtre d'affichage (viewport) du navigateur, et non pas du bord de son parent positionné.

Note: pour plus de détails sur le positionnement, voir nos articles sur le Positionnement et Exemples pratiques de positionnement.

Les tableaux CSS

Les tableaux HTML sont utiles pour afficher des données tabulaires, mais il y a quelques années — avant même que le CSS basique soit supporté fiablement à travers les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer entièrement la mise en page — en y plaçant leurs entêtes, leurs pieds-de-page, les différentes colonnes et ainsi de suite en de multiples lignes de tableaux et de colonnes. Cela fonctionnait en ce temps là, mais il y avait de nombreux problèmes — la mise en page par tableau n'était pas flexible, très lourde en balisage, difficile à déboguer, et sémantiquement fausse (par exemple, les utilisateurs de lecteur d'écrans avaient des problèmes de navigation avec cette disposition en tableau).

Les tableaux CSS existent pour vous permettre de disposer les éléments comme si ils étaient des tableaux, sans aucun des problèmes décris plus haut — cela peut paraître étrange, et vous devriez utiliser les éléments de tableau pour des données tabulaires, mais parfois cela peut être utile. Comme exemple, vous pourriez vouloir disposer un formulaire avec des étiquettes et du texte alignés; cela peut s'avérer difficile, mais les tableaux CSS rendent cette tâches facile.

Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément entré de données possède une étiquette, et nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est enveloppée dans un <div>, à des fins de disposition.

<form>
  <p>First of all, tell us your name and age.</p>
  <div>
    <label for="fname">First name:</label>
    <input type="text" id="fname">
  </div>
  <div>
    <label for="lname">Last name:</label>
    <input type="text" id="lname">
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="text" id="age">
  </div>
</form>

Maintenant, le CSS pour notre exemple. La plupart du CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété display.Le <form>, <div>, et <label> et <input> ont été configurés pour être affichés comme un tableau, en lignes de tableau, et en cellules de tableau respectivement — de manière basique, ils agiront comme un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce que nous avons à faire c'est ajouter un peu de grandeur, de marge, et ainsi de suite afin que tout soit agréable visuellement et nous en avons fini.

Vous remarquerez que la légende du paragraphe a reçu display: table-caption; — ce qui lui fait avoir le comportement d'un tableau <caption> — et caption-side: bottom; pour indiquer à la légende de s'ajuster en bas de la table for des raisons de style, même si le balisage est avant l'entrée de données dans le code source. Cela nous permet une bonne flexibilité.

html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label, form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}

Ce qui nous donne le résultat suivant:

Vous pouvez également voir cet exemple directement à css-tables-example.html (regardez le code source également.)

Note: Nous ne détaillerons pas plus les tableaux CSS dans ce module.

Les boîtes flexibles

CSS est un langage très puissant qui peut faire beaucoup de choses, mais il est descendu en grade en terme de disposition. Les méthodes traditionnelles de disposition comme float et position fonctionnent, mais parfois elles paraissent plus complexes, pointilleuses, inflexibles et requiert des astuces plus qu'elles ne devraient. Par exemple, que feriez-vous si vous vouliez:

  • Centrer verticalement une boîte de contenu (pas seulement le texte; line-height ne fonctionnera pas).
  • Faire de multiples colonnes contenant différents ensembles de contenus pour qu'elles aient la même hauteur, sans utiliser une hauteur fixe, ou de fausser l'ajustement de la taille grâce à une image en arrière-plan.
  • Faire de multiples boîtes sur une ligne prenant la même quantité d'espace disponible, indépendamment de savoir combien il y en a, et si elles ont des marges intérieures ou extérieures, et ainsi de suite, qui leurs sont appliquées.

Les exemples au-dessus sont presque impossibles à réaliser avec du CSS habituel — les boîtes flexibles (flexbox) ont été inventés pour permettre à de telles tâches d'être accomplies plus facilement.

Examinons un exemple; premièrement, un peu de HTML:

<section>
  <div>This is a box</div>
  <div>This is a box</div>
  <div>This is a box</div>
</section>

<button class="create">Create box</button>
<button class="reset">Reset demo</button>

Ici nous avons un élément <section> avec trois <div> à l'intérieur, ajouté à cela deux boutons pour créer une nouvelle boîte et de remettre à zéro la démonstration. Par défaut, les éléments enfants ne seraient pas du tout étalés ou dimensionnés, et en utilisant les anciennes méthodes traditionnelles nous devrions les dimensionner en faisant attention à la taille de chacun, leur largeur, leur marge interieure, leur bordure et leur marge extérieure, et si nous ajoutons un autre élément enfant nous devrions complètement changer toutes ces valeurs.

À la place, faisons tout ceci avec Flexbox:

html {
  font-family: sans-serif;
}

section {
  width: 93%;
  height: 240px;
  margin: 20px auto;
  background: purple;
  display: flex;
}

div {
  color: white;
  background: orange;
  flex: 1;
  margin-right: 10px;
  text-shadow: 1px 1px 1px black;
}

div:last-child {
  margin-right: 0;
}

section, div {
  border: 5px solid rgba(0,0,0,0.85);
  padding: 10px;
}

Deux lignes de ce CSS sont vraiment intéressantes:

  • display: flex; informe l'élément enfant <section> de se comporter en boîte flexible — par défaut, ils s'étendraient pour remplir la hauteur disponible du parent, qu'importe l'élément, et de se disposer en ligne — avec assez de largeur pour envelopper le contenu.
  • flex: 1; informe chaque élément <div> de prendre un espace égal de tout l'espace disponible sur la ligne, peu importe leur nombre.

Afin de mieux illustrer à quel point ces outils sont extraordinaires, nous allons également ajouter un peu de JavaScript pour vous permettre d'ajouter plus d'élément <div> enfants en pressant le bouton Create box. Vous pouvez également remettre à zéro la démonstration si vous ajoutez trop de <div>, en pressant le bouton Reset demo.

Ici se trouve directement l'exemple — amuser vous avec et voyez à quel point les boîtes flexibles sont puissantes en tant qu'outil de mise en page.

Vous pouvez également trouver cette démonstration  à flexbox-example.html (voir également le source code).

Note: Pour trouver plus d'informations sur les boîtes flexibles, voyez notre article sur Flexbox.

La disposition en grille

La fonctionnalité la plus expérimentale à mentionner ici est celle des grilles CSS (grid), celle-ci n'est pas encore très largement supportée sur tous les navigateurs. Les pages web sont souvent présentées en utilisant le système de grille, de la même manière que la presse écrite, et l'idée ici est de rendre ce processus plus facile et plus naturel, en définissant une grille, et ensuite en définissant quelles parties du contenu se trouve dans quelle zone de la grille.

Les grilles CSS dans leur état présent ne sont pas encore vraiment pris en charge partout ( à l'exception des versions expérimentales de Firefox et Chrome). IE et Edge prennent en charge une version antérieure, obsolète de cette technologie. C'est  CSS Grids in their present state aren't really supported anywhere yet (except in experimental versions of Firefox and Chrome). IE and Edge support an older, obsolete version of the technology. C'est une chose dont nous pouvons être impatient pour l'avenir!

Note: Pour obtenir plus d'informations au sujet de l'actuel environnement de développement des grilles et d'autres technologies utilisées aujourd'hui, et sur la spécification à venir des grilles CSS natives, référez-vous à notre article sur les Grids.

Résumé

Cet article a fourni un bref résumé de toutes les technologies de mises en page que vous devez connaître. Continuez la lecture pour en apprendre davantage sur chaque technologie individuellement!

Dans ce module

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Alan_Braut
 Dernière mise à jour par : Alan_Braut,