Dernière mise à jour le 11 mars 2019 par LMD
Les boîtes HTML (conteneurs qui renferment le contenu de votre site), de type div, header, footer, nav, main, section, article, aside, etc. doivent être répartis sur la page afin de créer la mise en page.
Il existe plusieurs techniques pour cela :
– Les tableaux (technique aujourd’hui abandonnée pour la mise en page; les tableaux ne servent qu’à faire des … tableaux ou des newsletters)
– La propriété float (de moins en moins utilisée, mais qui peut dépanner)
– le comportement inline-block (souvent réservé aux galeries d’images ou aux menus)
– le positionnement position: absolute / relative / fixed (à connaitre absolument car encore très utile pour placer des éléments sur la page et nécessaires dans des situations bien particulières, comme les effets de survol par exemple)
– FlexBox (c’est la technique moderne que nous allons utiliser principalement)
– CSS Grid (cette technique, très puissante, est trop récente et n’est pas encore reconnue correctement par tous les navigateurs; c’est l’avenir mais il faut la réserver à des projets très spécifiques. Nous ne l’utiliserons donc pas).
Vous trouverez toutes les explications nécessaires sur FlexBox à ces deux URL :
https://la-cascade.io/flexbox-guide-complet/
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox
Trois types de mise en page à partir du même code HTML
Les flexbox permettent souvent d’adapter la mise en page en conservant le même code HTML. Il est parfois nécessaire cependant de rajouter des containers intermédiares en HTML afin de moduler plus finement la disposition des boîtes principales.
Ici plusieurs typologies courantes de mise en page sont illustrées, à partir du même code HTML. Seuls les CSS vont être différents.
Voici le code HTML :
<div id="wrap">
<header class="tete">
<h2>HEADER</h2>
</header>
<nav class="menu">
<h2>NAV</h2>
</nav>
<main class="contenu">
<h2>MAIN CONTENT</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, quo minima voluptatibus inventore tenetur a, eos dolor nulla corrupti omnis dolores nobis repellat quasi ipsam voluptate esse, quam alias magnam!</p>
</main>
<footer class="pied">
<h2>FOOTER</h2>
</footer>
</div>
1. Disposition standard
Dans ce cas de figure, on utilise flex en colonne. Mais cela traduit le comportement normal. FlexBox est presque inutile dans cette configuration standard.
Voici le code CSS :
#wrap {
display: flex;
flex-direction: column;
}
.tete {
background-color: cadetblue;
}
.menu {
background-color: gold;
}
.contenu {
background-color: hotpink;
}
.contenu p {
text-align: left;
margin-left: 10px;
}
.pied {
background-color: yellowgreen;
}
2. Nav latérale à gauche
Voici le code CSS :
#wrap02 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.tete {
background-color: cadetblue;
flex: 1 100%;
}
.menu {
background-color: gold;
flex: 1 20%;
}
.contenu{
background-color: hotpink;
flex: 1 80%;
}
.contenu p {
text-align: left;
margin-left: 10px;
}
.pied {
background-color: yellowgreen;
flex: 1 100%;
}
3. Nav sur la même ligne que le header
C’est une configuration courante, généralement associée au fait de rendre l’ensemble header + nav fixes en haut de page. Cet effet nécessite un conteneur supplémentaire pour englober les deux containers.
Voici, en version ed base, le code CSS :
#wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.tete {
background-color: cadetblue;
flex: 1 30%;
}
.menu {
background-color: gold;
flex: 1 70%;
}
.contenu {
background-color: hotpink;
flex: 1 100%;
}
.contenu p {
text-align: left;
margin-left: 10px;
}
.pied {
background-color: yellowgreen;
flex: 1 100%;
}
Voir également cette ressource :