Les designers et les intégrateurs

La mise en page a toujours été un problème entre les designers et les intégrateurs. À l’avènement du Web, les designers venaient principalement du monde de l’impression (le print) et proposaient des mises en page calquées sur les documents à imprimer. Les intégrateurs devaient alors essayer de restituer ces mises en page à l’aide du HTML et des CSS naissantes. Les intégrateurs détournaient alors l’utilisation de l’élément <table> pour effectuer ces mises en page.

Puis est arrivée avec les CSS, la possibilité de positionner les blocs de la mise en page (les boîtes <div>). Ce fut alors une réelle avancée, avec laquelle les intégrateurs ont pu réconcilier mise en page, sémantique et bonne utilisation des normes du W3C.

Le modèle des boîtes

Le W3C nous indique que tous les éléments HTML sont affichés sous la forme d’une "boîte". Ces boîtes sont caractérisées par plusieurs propriétés CSS :

Un contenu défini par une largeur (propriété width) et une hauteur (propriété height).
Ce contenu peut être espacé de ses limites par un remplissage interne (propriété padding).
Une bordure (propriété border) peut délimiter la boîte.
Une marge externe qui permet de définir un espace extérieur autour de la boîte (propriété margin).

Voici une représentation d’une boîte :

Pour connaître la largeur et la hauteur réelle d’affichage des boîtes, il faut cumuler toutes les dimensions : contenu + remplissages + bordures + marges.

Par exemple, si nous avons un contenu de 250 pixels de large (width), un remplissage sur les quatre côtés de 10 pixels (padding), une bordure identique de 5 pixels (border) et une marge de 20 pixels des quatre côtés de la boîte, nous obtenons une largeur d’affichage de : 20 + 5 + 10 + 250 + 20 + 5 + 20 = 320 pixels occupés à l’écran.

Les marges des éléments

Presque tous les éléments HTML ont des marges supérieure et inférieure par défaut. C’est notamment le cas de tous les éléments textuels, comme les paragraphes (<p>), les en-têtes (<h1> à <h6>)...

Donc tous ces éléments sont espacés les uns des autres par ces marges supérieure et inférieure.

Mais quand deux éléments se suivent, la marge inférieure de la première boîte et la marge supérieure de la deuxième boîte fusionnent.

Si les valeurs des marges sont différentes, c’est la valeur la plus grande qui est utilisée pour créer cette marge fusionnée.

L’affichage des éléments

Les CSS 2.1 définissent pour tous les éléments HTML, un affichage dans la page, avec la propriété intrinsèque display.

Les principales valeurs de cette propriété sont :

block : les éléments s’affichent les uns sous les autres. C’est le cas pour les éléments <p>, <h1> à <h6>, <ol>, <form>...
inline : les éléments s’affichent les uns à côté des autres, dans la ligne de texte. C’est le cas pour les éléments <a>, <em>, <strong>, <span>...
list-item : pour les éléments <li> qui ont un affichage de type block, mais qui peuvent utiliser les mises en forme CSS des listes à puces et numérotées.
inline-block : pour les éléments <input> et <select> qui ont un affichage de type inline, mais qui peuvent être dimensionnés.
table et les valeurs associées : tous les éléments des tableaux (<table>, <thead>, <tr>, <td>...) ont leur propre valeur d’affichage.

Vous trouverez à cette URL, la liste des valeurs de la propriété display : http://www.w3.org/TR/CSS2/visuren.html#propdef-display

L’affichage dans le flux courant

Le premier principe d’affichage se fait dans le flux courant. Le flux courant est l’affichage par défaut des éléments HTML. L’ordre d’affichage dans le flux courant est déterminé par l’ordre de saisie dans le code. Pour ce flux courant nous avons deux types d’affichage qui sont déterminés par la propriété display de chaque élément HTML :

display: block affiche les éléments les uns sous les autres.
display: inline affiche les éléments les uns à côté des autres.
display: table affiche les éléments sous forme de tableau.

Reportez-vous à la liste des valeurs display dans le titre précédent.

Voici un exemple simple :

Nous avons deux éléments de type bloc (affichage block), le <h1> et le <h2> qui s’affichent l’un sous l’autre. Ensuite l’élément <p> (affichage block) contient deux éléments en ligne (affichage inline), <strong> et <a> qui s’affichent dans la ligne de texte du paragraphe. Cet exemple se termine par un tableau en affichage table.

L’affichage en position absolue

Les intégrateurs web peuvent sortir un élément du flux courant, pour le placer sur un plan supérieur, au-dessus du flux courant. C’est la position en absolue qui permet de positionner où nous voulons tout élément. Les éléments du flux courant restent sous les éléments en position absolue.

Avec des propriétés CSS dédiées, nous avons la possibilité d’indiquer une largeur (width) et une hauteur (height) précises. Nous pouvons aussi définir la distance entre la boîte et le haut (top), la droite (right), le bas (bottom) ou la gauche (left) de la page HTML. Enfin, nous pouvons indiquer l’ordre de superposition (z-index) des boîtes qui sont en position absolue.

Voici un exemple très simple :


<!DOCTYPE html> 
<html lang="fr"> 
<head> 
      <title>Ma page web</title> 
      <meta charset="UTF-8" /> 
             <style> 
                   #boite1 { 
                          position: absolute; 
                          z-index: 1; 
      ...

L’affichage en position fixée

Le positionnement fixé permet de fixer la position d’un élément donné dans la page HTML. Même si l’utilisateur utilise la barre de défilement, cet élément fixé ne "bougera" pas de place dans la fenêtre du navigateur.

Les propriétés utilisables sont les mêmes que pour la position absolue, sauf que la valeur de la propriété position est fixed.

Voici les styles CSS pour cette boîte simple :


#boite-fixe { 
      position: fixed; 
      z-index: 3; 
      top: 0px; 
      left: 0px; 
      border: 1px solid #333; 
      background-color: #6cf; 
} 
#boite-fixe p { 
        margin: 0; 
}

Voici le code HTML ajouté à la fin du code précédent :


      <div id="boite-fixe"> 
             <p>Ma boite fixe en haut à gauche</p> 
      </div> 
      </body> 
</html>

Voici l’affichage obtenu :

Avec l’utilisation de la barre de défilement, la boîte reste fixée en haut à gauche de la page :

Nous retrouvons les mêmes problèmes potentiels...

L’affichage en position relative

Le dernier mode d’affichage est la position relative. Cet affichage ne sort pas les éléments du flux courant. Un élément en position relative reste dans le flux courant, mais est positionné relativement par rapport à sa position dans le code HTML. En fin de compte, il ne s’agit que d’un décalage.

Voici le sélecteur utilisé :


.decalage { 
      position: relative; 
      left: 10px; 
      bottom: 15px; 
      border: 1px solid #333; 
      background-color: #fce; 
}

Voici le code HTML utilisé :


...laoreet lorem vel dolor tempus vehicula. <span  
class="decalage">Excepteur sint obcaecat  
cupiditat</span> non proident culpa. Gallia est  
omnis divisa...

Voici l’affichage obtenu :

Vous retrouvez cet exemple dans le fichier à télécharger Chapitre-03/exemple-03.html.

Utiliser l’affichage en position relative et absolue

L’utilisation presque principale de la position relative est de définir un élément de référence parent pour les éléments en position absolue enfants, inclus dans l’élément parent. Il suffit de ne donner aucune valeur de position (top, right, bottom ou left) à l’élément référent parent, pour que les éléments inclus en position absolue soient positionnés par rapport à cet élément référent. Nous pouvons ainsi définir une boîte parent en position relative et définir des éléments enfants en position absolue par rapport à cette boîte.

Voici un exemple très simple, mais concret :

Le code HTML :


<!DOCTYPE html> 
<html lang="fr"> 
<head> 
      <Title>Ma page web</title> 
      <meta charset="UTF-8" /> 
             <style> 
                   .relative { 
                          position: relative; 
                   } 
                ...

L’affichage des boîtes flottantes

1. Le positionnement flottant

La mise en page à l’aide des boîtes flottantes est la technique la plus utilisée actuellement. Mais, revers de la médaille, c’est celle qui implique le plus de problème, celle qui comporte le plus de bug et celle qui est la plus diversement interprétée par les navigateurs !

Une boîte flottante, reste dans le flux courant, mais est placée tout à gauche ou tout à droite de son élément parent, de son conteneur. Elle reste dans la ligne où elle était placée dans le code HTML et le reste du flux, passe de l’autre côté de son positionnement.

Nous allons utiliser la propriété CSS float. Les deux valeurs usuelles sont left, pour un flottement sur la gauche de l’élément, et right pour un flottement sur la droite de l’élément.

Voici un premier exemple très simple :


<!DOCTYPE html> 
<html lang="fr"> 
<head> 
      <title>Ma page web</title> 
      <meta charset="UTF-8" /> 
      <link href="#" rel="stylesheet" /> 
      <style> 
      .flotte-gauche { 
             float: left; 
             width: 250px; 
             border: 1px solid #333; 
             background-color: #dedede; 
      } 
      p.flotte-gauche { 
             margin: 0; 
      } 
      </style> 
</head> 
<body> 
<div id="conteneur"> 
      <h1>Mercedem aut nummos unde unde extricat, amaras.</h1> 
      <p class="flotte-gauche">Sed haec...</p> 
      <p>Me non paenitet nullum...</p> 
</div> 
</body> 
</html>

Voici son affichage :