Editions ENI Livres | Vidéos | e-Formations
La mise en page à l'aide des boîtes
Les objectifs
Les premières pages web étaient principalement constituées de texte, avec quelques illustrations. Ces pages étaient linéaires et avaient pour objectif premier de partager de l’information. La mise en page importait peu.
Puis vint le temps des premières mises en page à l’aide des tableaux. Ce détournement d’utilisation permettait de placer du texte et des images dans les cellules du tableau, afin de simuler une mise en page à l’aide d’une grille de composition.
Enfin, avec les CSS 2.1, vinrent les véritables fonctionnalités de mise en page à l’aide des boîtes positionnées.
Actuellement, l’avènement des modules Flexbox et Grid permet aux designers d’entrer dans une nouvelle ère de la mise en page, avec des fonctionnalités très avancées. Nous allons consacrer un chapitre à ces deux nouvelles techniques de mise en page très performantes.
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é gauche de l’élément.
Vous pouvez utiliser des valeurs numériques positives...
Le flottement des boîtes
1. Habiller une image
L’objectif initial du flottement des boîtes était l’habillage du texte autour d’une image. Comme souvent, cette fonctionnalité a été utilisée pour autre chose, à savoir pour faire de la mise en page. Cela reste possible, mais avec de nombreuses limites qu’il faut savoir contourner.
C’est la propriété CSS 2.1 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 {
...La superposition des boîtes
Nous avons vu qu’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> ...La mise en page en affichage tableau
La propriété display que nous avons étudiée précédemment permet de changer le mode d’affichage des éléments HTML qui ont un autre type d’affichage initial. Nous allons pouvoir utiliser les valeurs d’affichage dédiées aux tableaux pour créer une mise en page.
Attention, il ne s’agit pas de créer une mise en page avec des tableaux ! Nous allons simplement utiliser les propriétés d’affichage des tableaux pour créer une mise en page.
Nous allons créer une mise en page avec un en-tête, un corps de page à deux colonnes et un pied de page.
Voici le code HTML/CSS utilisé :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
#tableau {
display: table ;
}
#en-tete {
display: table-header-group ;
}
#pied-de-page {
display: table-footer-group ;
} ...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, nous pouvons 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 ;
height: 150px ;
margin-bottom: 50px ;
...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.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
#cache {
visibility: hidden ;
}
</style>
</head>
<body>
<p>Pellentesque ornare sem lacinia quam venenatis...</p>
<p id="cache">Pellentesque ornare sem lacinia quam...</p>
<p>Pellentesque ornare sem lacinia...