Éléments en Ligne, Blocs et Vides
Les éléments HTML se catégorisent en fonction de leur comportement de mise en page :
- Éléments en ligne :
<span>,<a>,<img>,<input>,<strong> - Éléments blocs :
<div>,<h1>à<h6>,<p>,<table>,<form> - Éléments vides :
<br>,<hr>,<meta>
Modification du Type d'Affichage
La propriété CSS display permet de changer le type d'affichage d'un élément :
display:block: Transforme l'élément en élément bloc, occupant toute une ligne avec la possibilité de définir largeur, hauteur, marges intérieures et extérieures.display:inline-block: Convertit en élément bloc en ligne, aligné horizontalement avec les éléments adjacents, mais avec un espace potentiel. Les dimensions et marges restent configurables.display:inline: Transforme en élément en ligne, ne créant pas de nouvelle ligne, dont la taille dépend du contenu comme la police ou l'image.
Utilisation de overflow:hidden
La valeur hidden de la propriété CSS overflow permet de recouper et masquer tout contenu dépassant les limites du conteneur parent.
Exemple de Structure Verticale
<html>
<head>
<meta charset="UTF-8">
<title>Disposition Verticale</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.bandeau {
width: 80%;
margin: 0 auto;
height: 80px;
background-color: #333;
}
.zone-principale {
width: 80%;
margin: 0 auto;
height: 400px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="bandeau"></div>
<div class="zone-principale"></div>
</body>
</html>
Exemple de Structure Horizontale
<html>
<head>
<meta charset="UTF-8">
<title>Disposition Horizontale</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.conteneur-global {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.colonne-gauche {
float: left;
width: 25%;
height: 500px;
background-color: #555;
}
.colonne-droite {
float: left;
width: 75%;
height: 500px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="conteneur-global">
<div class="colonne-gauche"></div>
<div class="colonne-droite"></div>
</div>
</body>
</html>
Technique de Flottement
Le flottement (float) positionne les éléments sur le côté gauche ou droit du conteneur, permettatn des mises en page horizontales. overflow:hidden sur le parent résout le problème de réduction de hauteur.
<html>
<head>
<meta charset="UTF-8">
<title>Flottement CSS</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.cadre {
width: 1000px;
margin: 0 auto;
overflow: hidden;
background-color: #f9f9f9;
}
.bloc-1 {
float: left;
width: 30%;
height: 300px;
background-color: #444;
}
.bloc-2 {
float: left;
width: 70%;
height: 300px;
background-color: #aaa;
}
</style>
</head>
<body>
<div class="cadre">
<div class="bloc-1"></div>
<div class="bloc-2"></div>
</div>
</body>
</html>
Disposition Complex Multi-Sections
Pour des mises en page élaborées, imbriquez des conteneurs avec des flottements et ajustez les propriétés d'overflow.
<html>
<head>
<meta charset="UTF-8">
<title>Disposition Composite</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.header {
width: 960px;
margin: 0 auto;
height: 80px;
background-color: #222;
}
.corps {
width: 960px;
margin: 0 auto;
}
.menu {
float: left;
width: 200px;
height: 350px;
background-color: #777;
}
.contenu-droit {
float: left;
width: 760px;
height: 350px;
}
.zone-superieure {
overflow: hidden;
background-color: #e74c3c;
}
.article-principal {
float: left;
width: 600px;
height: 300px;
background-color: #ecf0f1;
}
.barre-laterale {
float: left;
width: 160px;
height: 300px;
background-color: #1abc9c;
}
.pied-droit {
height: 50px;
background-color: #bdc3c7;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="corps">
<div class="menu"></div>
<div class="contenu-droit">
<div class="zone-superieure">
<div class="article-principal"></div>
<div class="barre-laterale"></div>
</div>
<div class="pied-droit"></div>
</div>
</div>
</body>
</html>