Mises en page fluides

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 63 sur 76.

Dans la conception web adaptative (responsive web design), une mise en page fluide s'adapte aux différentes tailles d'écran en utilisant des grilles flexibles et des unités relatives comme les pourcentages au lieu de valeurs de pixels fixes. Cela permet à la mise en page de s'étendre ou de se réduire pour s'adapter à n'importe quel écran, garantissant ainsi une expérience utilisateur fluide sur tous les appareils.

Les principes clés des mises en page fluides incluent :

Unités relatives : utiliser des pourcentages (%), des unités de la fenêtre d’affichage (vw, vh) ou des unités em (em) au lieu de pixels fixes (px) pour les largeurs, les hauteurs, les marges et les espacements internes.

Grilles flexibles : Utiliser CSS Grid ou Flexbox pour créer des mises en page basées sur une grille qui peuvent s'adapter à différentes tailles d'écran.

Largeur maximale et largeur minimale : définir les largeurs maximale et minimale des éléments afin d’éviter qu’ils ne deviennent trop larges ou trop étroits sur des écrans de taille extrême.

Voici un exemple d'une mise en page fluide de base utilisant des pourcentages :

.container {
    width: 90%; /* Le conteneur occupe 90 % de la largeur de la fenêtre d'affichage */
    max-width: 1200px; /* Le conteneur ne dépassera pas 1200px */
}
.sidebar {
    width: 30%; /* La barre latérale occupe 30 % de la largeur du conteneur */
    float: left;
}
.main-content {
    width: 70%; /* La zone de contenu principal occupe 70 % de la largeur du conteneur */
    float: left;
}

Dans cet exemple, l'élément .container a une largeur fluide de 90%, ce qui signifie qu'il occupera toujours 90 % de la largeur de la fenêtre d'affichage. La propriété max-width est définie sur 1200px pour empêcher le conteneur de devenir trop large sur les grands écrans.

Les éléments .sidebar et .main-content ont des largeurs fluides de 30% et 70%, respectivement, ce qui leur permet de s'adapter à la largeur du conteneur.

Défi

Facile

Vous disposez d’un document HTML contenant une division parente (<div>) qui contient deux divisions enfants (<div>) avec les classes sidebar et main. Votre tâche consiste à créer une mise en page fluide à l’aide de pourcentages. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l’élément <div> avec la classe container. Définissez sa propriété width sur 80% et sa propriété margin sur 0 auto. Ajoutez une border de 1px solid black pour la visualisation.
Écrivez une règle CSS qui cible l’élément <div> avec la classe sidebar. Définissez sa propriété width sur 25% et faites-le flotter vers la gauche.
Écrivez une règle CSS qui cible l’élément <div> avec la classe main. Définissez sa propriété width sur 75% et faites-le flotter vers la droite.

Essayez vous-même

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>