Mise en page de site CSS
Display et Position ont enseigné comment les boîtes s’asseyent et s’empilent. La mise en page d’un site pose la question plus large : comment les régions — en-tête, navigation, contenu principal, barre latérale, pied — partagent-elles un écran avec calme ? Esquissez d’abord la coque ; Flexbox et Grid approfondiront bientôt le métier des colonnes.
Une boîte à outils des régions de layout
📊 Régions de page en un coup d’œil
| Région | Rôle au quotidien |
|---|---|
| Header | Identité du site, actions principales, parfois la recherche |
| Navigation | Liens vers les sections majeures (souvent dans ou sous le header) |
| Main | Contenu principal dont parle la page |
| Aside / sidebar | Liens liés, conseils, cartes secondaires |
| Footer | Mentions légales, nav secondaire, traces de contact |
| Container | Enveloppe max-width qui centre le contenu lisible |
Une bonne mise en page commence par les landmarks HTML, puis l’espacement et les colonnes en CSS. Peindre chaque boîte avec position: absolute évolue rarement bien.
Coque sémantique de page
Nommez les régions avec de vrais éléments. Les classes peaufinent l’apparence, mais les landmarks gardent la structure honnête pour les lecteurs et les technologies d’assistance.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
}
header,
nav,
main,
aside,
footer {
display: block;
}
Conteneur max-width centré
Les lignes trop longues fatiguent les yeux. Enveloppez la colonne lisible dans un conteneur avec max-width et margin horizontal auto.
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Bases de la barre d’en-tête
Un header couvre souvent le conteneur ou toute la largeur. Gardez un padding cohérent et laissez le style nav profond pour la leçon suivante.
.site-header {
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.site-header .brand {
font-weight: 700;
font-size: 1.25rem;
}
Une esquisse simple à deux colonnes
Jusqu’aux leçons Flexbox/Grid, une esquisse float calme peut montrer main + aside. Préférez apprendre Flex/Grid ensuite pour de vraies colonnes de page — c’est un pont, pas le plan éternel.
.layout {
display: flow-root;
}
.layout__main {
float: left;
width: 68%;
}
.layout__aside {
float: right;
width: 28%;
}
Pied sous l’histoire
Après des colonnes float, clear le footer pour qu’il tombe sous les deux. Plus tard, Flex/Grid contiendra les colonnes sans habitudes clearfix float.
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}
Une habitude de mise en page calme
Landmarks d’abord, conteneur ensuite, espacement en troisième. Utilisez float seulement comme esquisse temporaire de colonnes. Dans les modules à venir, tournez-vous vers Flexbox et Grid pour une structure durable — pas des piles absolute ni des grilles float sans fin.
.page {
min-height: 100vh;
}
.page__header { /* identity + nav hook */ }
.page__main { /* primary story */ }
.page__aside { /* secondary column */ }
.page__footer { /* closing chrome */ }
À vous de jouer
- Construisez une coque landmark : header, nav, main, aside, footer.
- Enveloppez le contenu dans un
.containeravec max-width et marges centrées. - Stylez une barre d’en-tête simple avec padding et bordure basse.
- Esquissez main + aside avec des largeurs float, puis clear le footer.
- Écrivez une phrase : pourquoi Flex/Grid remplacera cette esquisse float plus tard ?
Erreurs fréquentes
- Positionner en absolute chaque colonne de la page
- Laisser le texte sur toute la largeur du viewport sans max-width
- Sauter les landmarks sémantiques pour des piles de div anonymes
- Traiter cette leçon comme object-fit (cadres médias, pas régions de page)
- Livrer des grilles float éternelles au lieu d’apprendre Flex/Grid ensuite
Résumé
- La mise en page de site, c’est des régions qui partagent un écran
- Utilisez des landmarks sémantiques plus un conteneur max-width centré
- Une esquisse float main/aside peut illustrer brièvement les colonnes
- Clear les footers sous les floats ; préférez bientôt Flex/Grid pour la structure
- Layout ≠ object-fit — régions vs ajustement média dans une boîte
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut