Flotteurs (floats)
Au cours des derniers chapitres, nous avons appris à manipuler la taille des boîtes et l’espace autour d’elles, mais la plupart du temps, nous étions coincés avec le flux vertical par défaut de la page. Les éléments de bloc apparaissent toujours verticalement l’un après l’autre, ce qui nous limite à une disposition à une seule colonne.
Les «Floats» vous permettent de placer côte à côte des éléments de niveau bloc plutôt que les uns au-dessus des autres. Cela va nous permettre de construire toutes sortes de mises en page, y compris des encadrés, des pages multi-colonnes, des grilles et des articles de style magazine avec du texte qui se positionne autour d’une image. C’est ici que nous commençons à créer de vraies pages web.
Les mises en page flottantes ont été remplacées par Flexbox sur les sites Web modernes. Mais, cela ne veut pas dire que ce chapitre ne vaut pas la peine d’être lu. Pendant plus d’une décennie, les floats ont servi de base à la majorité des sites Web sur Internet.
Peut-être plus important encore, la nature limitée des flotteurs fait d’eux une introduction plus douce aux mises en page CSS que Flexbox. Au lieu d’être submergé par toutes les possibilités de Flexbox, nous aurons l’occasion de nous concentrer davantage sur le processus de création d’une mise en page sophistiquée.
Mise en place
Ce chapitre aborde les floats CSS au travers d’un projet assez simple. Au lieu de travailler avec du contenu HTML approprié comme nous l’avons vu dans les chapitres précédents, nous créerons un tas d’éléments vides <div> . Nous nous retrouverons avec quelque chose qui ressemble à ce qui suit, ce qui différe grandement par rapport aux types de pages Web que nous avons créés précédemment.
Tout d’abord, créez un nouveau dossier appelé floats, puis ajoutez une nouvelle page Web appelée floats.html avec le balisage suivant:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Floats</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<div class='menu'>Menu</div>
<div class='sidebar'>Sidebar</div>
<div class='content'>Content</div>
<div class='footer'>Footer</div>
</div>
</body>
</html>Cela nous donne une structure classique de site Web sur Internet. Nous avons un endroit pour mettre un menu de navigation, une barre latérale, le contenu principal de la page, et un pied de page.
Vous ne verrez pas grand-chose lorsque vous ouvrez floats.html dans un navigateur, car les éléments vides ont une hauteur nulle. Nous allons résoudre ce problème dans la section suivante.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Assurez-vous également de créer une styles.css feuille de style qui réinitialise le comportement de la boîte par défaut , comme indiqué ci-dessus.
Comportement de mise en page html par défaut
Les flottants modifient la mise en page par défaut d’une page Web, nous devrions donc probablement commencer par examiner ce qu’est exactement ce comportement « par défaut ». Nous avons introduit cela dans les éléments de bloc par rapport aux éléments en ligne , mais il est sur le point de devenir beaucoup plus important.
Nous pouvons avoir un meilleur aperçu de notre page d’exemple en ajoutant des couleurs de fond et des hauteurs explicites à chacun de nos éléments <div> . Ajoutez ceci à styles.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
height: 300px;
background-color: #F09A9D; /* Rouge */
}
.content {
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}Cela nous donne un bel arc-en-ciel, ce qui n’est pas ce que nous recherchons, bien qu’il démontre des concepts utiles.
La partie importante ici est que chaque élément de niveau bloc remplit 100% de la largeur de ses éléments parents ( <div class='page'> dans ce cas), et ils apparaissent verticalement l’un après l’autre. Encore une fois, nous sommes essentiellement limités à une disposition à une seule colonne.
Généralement, vous souhaitez que la hauteur de ces zones soit déterminée automatiquement en fonction du contenu qu’elles contiennent. Cependant, nous sommes plus préoccupés par le contrôle des dispositions dans ce chapitre, donc nous n’aurons pas beaucoup de contenu réel. C’est pourquoi nous avons besoin de la propriété explicites height .
Cela vaut la peine de regarder ce qui se passe quand on réduit la largeur d’un élément. Mettez à jour notre règle .sidebar pour qu’elle corresponde à ce qui suit:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}L’élément de la barre latérale devient plus étroit, mais le reste des boîtes reste exactement dans la même position. Tous les blocs sont toujours rendus verticalement l’un après l’autre. C’est le comportement que nous allons changer avec les flotteurs.
Faire « flotter » un élément
La propriété CSS float nous permet de contrôler la position horizontale d’un élément. En « flottant » la barre latérale vers la gauche, nous demandons au navigateur de l’aligner sur le côté gauche de la page. Allez-y et faites flotter notre barre latérale avec la ligne suivante:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}Toutefois, cela ne se contente pas d’ aligner la barre latérale , il indique également aux éléments qui peuvent circuler autour de la barre latérale au lieu de commencer dessous. C’est comme si la barre latérale était à l’intérieur du bloc .content. Cela nous donne une disposition de style magazine:
Vous pouvez également faire flotter les éléments à droite, comme indiqué ci-dessous (gardons notre barre latérale flottante à gauche si). Ou, si vous remplacez une déclaration flottante, vous pouvez l’annuler avec la valeur none. Ce sont les valeurs les plus courantes pour la propriété float.
float: right; /* Alignement à droite */
float: none; /* Retour au comportement par défaut */Nous avons maintenant tous les outils nécessaires pour aligner les éléments de niveau bloc: les flottants pour l’alignement gauche / droite et les marges automatiques pour l’alignement au centre. Rappelez-vous que cela ne s’applique qu’aux boîtes de blocs . Les boîtes en ligne sont alignées avec la propriété text-align, comme indiqué dans le chapitre précédent .
Flottant à l’intérieur des parents
Les boîtes flottantes s’alignent toujours à gauche ou à droite de leur élément parent. Dans notre exemple, le parent de la barre latérale est <div class='page'>, qui est aussi large que la fenêtre du navigateur. C’est pourquoi notre sidebar flotte à l’extrême gauche de la page.
Changeons cela en donnant à notre page une disposition à largeur fixe. Encore une fois, la technique de centrage de marge automatique est pratique. Ajoutez ceci à styles.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}Maintenant, nous pouvons voir que la .sidebar flotte à gauche du conteneur .page, par opposition au bord de la fenêtre du navigateur.
Positionner des conteneurs div imbriqués comme ceci est la façon dont on construit les mises en page de sites Web. Ici, nous avons commencé par centrer .page , puis nous avons aligné une barre latérale à l’ intérieur de cette page centrée. Les choses peuvent devenir beaucoup plus complexes, mais notre exemple simple démontre la vérité universelle des mises en page CSS: tout est une boîte à l’intérieur d’une boîte à l’intérieur d’une autre boîte.
Flotteurs Multiples
Examinons un peu plus notre flottant de style magazine actuel en ajoutant une largeur explicite à notre bloc .content:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
width: 650px;
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}
Ce genre de comportement du flotteur est intéressant pour les images (que nous verrons plus tard ), mais pour la mise en page, nous voulons en fait que le bloc de contenu soit à côté de la barre latérale.Pour cela, nous devons aussi dire au bloc de contenu de flotter à gauche. Ajouter une ligne supplémentaire à la règle .content:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
float: left;
width: 650px;
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}Lorsque vous faites flotter plusieurs éléments dans la même direction, ils s’empilent horizontalement, un peu comme l’algorithme de disposition verticale par défaut, mais avec une rotation de 90 degrés. Le code ci-dessus provoque l’affichage de l’ensemble de notre bloc de contenu sur la droite de la barre latérale au lieu de l’envelopper.
Cela nous donne un vrai contrôle sur l’alignement horizontal de nos boîtes de blocs. Essayez de jouer avec les valeurs float pour .sidebar et .content, et vous constaterez que nous avons déjà deux dispositions distinctes à notre disposition:
Assurez-vous que les deux flottent avant de continuer. Cela prend en charge la disposition de la barre latérale et des blocs de contenu, mais cela a malheureusement gâché notre élément .footer…
Après un flotteur
Vous avez probablement remarqué que notre pied de page apparaît en haut à droite, directement en dessous de .menu. C’est parce que les boîtes flottantes sont retirées du flux normal de la page. La hauteur de nos éléments flottants ne contribue pas à la position verticale du pied de page, de sorte qu’il se colle simplement au-dessous du dernier élément qui n’a pas flotté.
Nous pouvons le voir plus clairement en ajoutant une bordure rouge autour de notre élément .page:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
border: 1px solid red; /* Ajouter ceci */
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
float: left;
width: 650px;
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}Remarquez comment la bordure est seulement autour des éléments .menu et .footer. C’est comme si les éléments flottants n’étaient même pas là. Il existe deux façons de résoudre ce problème: effacer un flottant et cacher un débordement.
Effacer les flotteurs
« Effacer » un flottant est quand nous disons à un bloc d’ignorer les flottants qui apparaissent avant lui. Au lieu de circuler autour de la boîte flottante, un élément effacé apparaît toujours après tous les flottants. C’est comme forcer une boîte dans le flux vertical par défaut de la page.
Nous pouvons utiliser la propriété clear pour faire passer notre .footer vers le bas de la page:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
border: 1px solid red; /* Ajouter ceci */
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
float: left;
width: 650px;
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
clear: both;
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}Habituellement, vous voulez effacer les flottants gauche et droit comme nous l’avons fait ici, mais vous pouvez choisir d’effacer seulement l’un ou l’autre avec les valeurs left ou right.
Selon le type de mise en page que vous essayez de créer, cette solution est parfaitement acceptable. Nous pourions nous arrêter ici, mais nous allons explorer davantage le comportement du flottant en transformant notre page en une mise en page à fond perdu avec des couleurs d’arrière-plan remplissant toute la fenêtre du navigateur.
Regardez ce qui se passe lorsque nous sortons le menu et le pied de page hors de l’ élément .page. Changez l’ élément <body> pour qu’il corresponde aux éléments suivants:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Floats</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='menu'>Menu</div>
<div class='page'>
<div class='sidebar'>Sidebar</div>
<div class='content'>Content</div>
</div>
<div class='footer'>Footer</div>
</body>
</html>Maintenant que .menu et .footer sont en dehors de notre .page à largeur fixe , ils font la largeur totale de la fenêtre, ce qui est exactement ce que nous voulons pour cette mise en page.
Masquage de débordement
L’effacement des flottants ne permet de résoudre le problème de hauteur que s’il existe un élément dans l’élément conteneur auquel nous pouvons ajouter une propriété clear. Maintenant que notre pied de page est à l’extérieur de notre élément .page, nous avons besoin d’une nouvelle façon de faire en sorte que les éléments flottants contribuent à la hauteur de leur conteneur.
La solution est la propriété CSS overflow . En ajoutant une déclaration overflow: hidden à un conteneur div, nous lui disons de reconnaître la hauteur de tous les éléments flottants qu’il contient. C’est ainsi que nous pouvons ajouter une couleur de fond à notre élément .page et le rendre réellement:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
border: 1px solid red;
overflow: hidden; /* Ajouter ceci */
background-color: #EAEDF0; /* Ajouter ceci */
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
float: left;
width: 650px;
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
clear: both;
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}Vous devriez maintenant être en mesure de voir un fond gris clair à la place du blanc par défaut. La partie importante ici est le comportement de overflow: hidden. Sans cela, nous ne serions pas en mesure de voir l’arrière-plan du conteneur .page , car il aurait une hauteur nulle.
Pour récapituler, lorsque vous avez un élément HTML supplémentaire non flottant au bas d’un conteneur div, utilisez la solution clear. Sinon, ajoutez une déclaration overflow: hidden à l’élément conteneur. L’idée sous-jacente pour les deux options est que vous avez besoin d’un moyen d’indiquer au navigateur d’incorporer des flottants dans la hauteur de leur élément conteneur afin que leurs arrière-plans apparaissent.
Disposition avec fond en pleine largeur
Ensuite, nous voulons que notre arrière-plan remplisse toute la fenêtre du navigateur sans modifier l’alignement de notre barre latérale ou des blocs de contenu. Le problème est que notre élément .pages’occupes de centrer tout les éléments: nous ne pouvons pas l’utiliser pour un fond en pleine largeur, car le centrage requiert une propriété width explicite .
Il est temps pour un autre conteneur div. La mise en place d’une div englobant .page nous permet de continuer à centrer les choses tout en nous donnant une place pour définir une propriété background-color. Changez notre élément <body> pour qu’il corresponde aux éléments suivants:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Floats</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='menu'>Menu</div>
<div class='container'>
<div class='page'>
<div class='sidebar'>Sidebar</div>
<div class='content'>Content</div>
</div>
</div>
<div class='footer'>Footer</div>
</body>
</html>Rappelez-vous que le comportement de rendu de bloc par défaut est pour les éléments de remplir la largeur de leur conteneur. Donc, nous devrions être en mesure de déplacer notre déclaration background-color à une règle .container pour obtenir un fond en pleine largeur:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
}
.container {
overflow: hidden;
background-color: #EAEDF0;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
float: left;
width: 650px;
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
clear: both;
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}Comme dans la section précédente, nous avons toujours besoin de la ligne overflow: hidden pour forcer l’élément .containerà faire attention attention à la hauteur des éléments flottants. Sans cela, nous ne verrions pas notre couleur de fond parce l’élément .containern’aurait aucune hauteur.
Cela nous donne trois éléments <div> imbriqués pour finaliser notre mise en page: un wrapper .container pour la couleur d’arrière-plan en pleine largeur, un élément à largeur fixe .pagepour tout centrer, et enfin un bloc .sidebaraligné à gauche aisni qu’un bloc de contenu .content. Ce type d’imbrication et d’alignement est assez typique de la plupart des mises en page de sites Web.
Flotteurs pour colonnes à largeur égale
Jusqu’à présent, nous avons vu une disposition de barre latérale, une disposition à largeur fixe et une disposition en pleine largeur. Les flottants peuvent également être utilisés pour créer des dispositions multi-colonnes. Cela fonctionne exactement comme pour nos flotteurs .sidebar et .content – nous en avons juste plus.
Nous allons ajouter trois colonnes de largeur égale à notre pied de page. Mettez à jour l’élément <footer>, comme ceci:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Floats</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='menu'>Menu</div>
<div class='container'>
<div class='page'>
<div class='sidebar'>Sidebar</div>
<div class='content'>Content</div>
</div>
</div>
<div class='footer'>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
</div>
</body>
</html>Nous pouvons styliser chacune de ces colonnes comme nous l’avons fait pour le reste de notre page. Ajouter une nouvelle règle à styles.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
}
.container {
overflow: hidden;
background-color: #EAEDF0;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
float: left;
width: 650px;
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
clear: both;
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
}
.column {
float: left;
width: 31%;
margin: 20px 1.15%;
height: 160px;
background-color: #B2D6FF; /* Bleu */
}C’est la première fois que nous utilisons des valeurs en pourcentage au lieu de valeurs de pixels explicites. Les pourcentages en CSS sont relatifs à la largeur de l’élément parent. Le résultat est trois colonnes qui se redimensionnent automatiquement au tiers de la fenêtre du navigateur. Redimensionnez la fenêtre du navigateur, et vous verrez nos colonnes croître et rétrécir en conséquence. C’est le début du responsive design .
Ne perdons pas de vue la thèse centrale de ce chapitre: les flotteurs nous permettent d’empiler les choses horizontalement plutôt que verticalement. En changeant la largeur des éléments que nous flottons, nous pouvons obtenir toutes sortes de mises en page, des barres latérales aux colonnes multiples en passant par les grilles.
Flotteurs pour les grilles
Vous voulez une grille dans le pied de page au lieu de 3 colonnes? Aucun problème! Lorsqu’il n’y a pas assez de place pour empiler horizontalement un élément flottant, il apparaît à la ligne suivante. Tout ce que nous devons faire est d’ajouter quelques éléments .column supplémentaires :
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Floats</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='menu'>Menu</div>
<div class='container'>
<div class='page'>
<div class='sidebar'>Sidebar</div>
<div class='content'>Content</div>
</div>
</div>
<div class='footer'>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
</div>
</body>
</html>Voilà! Une grille! Eh bien, presque …
Notre arrière-plan de pied de page est trop court. Heureusement, nous savons déjà comment résoudre ce problème. Remplaçons la hauteur explicite du pied de page par une autre overflow: hidden afin qu’il puisse contenir n’importe quel nombre d’éléments de la grille:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
}
.container {
overflow: hidden;
background-color: #EAEDF0;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
float: left;
width: 650px;
height: 500px;
background-color: #F5CF8E; /* Jaune */
}
.footer {
clear: both;
/*height: 200px;*/
background-color: #D6E9FE; /* Bleu clair */
overflow: hidden;
}
.column {
float: left;
width: 31%;
margin: 20px 1.15%;
height: 160px;
background-color: #B2D6FF; /* Bleu */
}Vous pouvez utiliser cette même technique pour créer des grilles de n’importe quelle taille. Par exemple, créer une galerie de photos avec un tas de vignettes consiste simplement à placer les éléments de la grille dans .pageplutôt que dans le pied de page et d’ajouter des éléments <img/>. Mais, encore une fois, n’oubliez pas que flexbox est un moyen plus moderne de créer ce type de mise en page.
Flotteurs pour le contenu
Une mise en page Web comporte deux aspects. Vous avez la structure globale de votre page, sur laquelle nous avons travaillé tout au long de ce chapitre. C’est l’exemple de l’emplacement de la barre latérale, de la taille de votre menu de navigation, etc. L’autre aspect des mises en page est le style des composants HTML individuels (votre contenu réel) qui entrent dans cette structure de page globale.
Le processus pour ce dernier est le même, il est juste imbriqué dans le premier. Ajoutons du contenu factice à notre élément .content afin que nous ayons quelque chose à voir:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Floats</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='menu'>Menu</div>
<div class='container'>
<div class='page'>
<div class='sidebar'>Sidebar</div>
<div class='content'>
<img src='?' class='article-image'/>
<p>Ad netus sagittis velit orci est non ut urna taciti metus donec magnis
hendrerit adipiscing mauris sit a proin ultrices nibh.</p>
<p>Enim suspendisse ac scelerisque nascetur vestibulum parturient sed mi a
dolor eu non adipiscing non neque scelerisque netus ullamcorper sed
parturient integer.Eros dui risus non sodales ullamcorper libero a dis
cubilia a orci iaculis cursus.</p>
<p>Egestas at aliquam a egestas accumsan cum elementum consectetur conubia
tristique eu et vitae condimentum in ante consectetur suscipit a a duis
vestibulum gravida morbi sagittis.Parturient scelerisque facilisis
ullamcorper a a pretium a nisl parturient semper senectus accumsan ipsum
mus scelerisque eget ridiculus.Accumsan dolor a.</p>
<p>Ligula taciti vel primis sit a tincidunt habitant parturient parturient
in parturient ante nulla consectetur sem.Facilisis parturient litora.</p>
</div>
</div>
</div>
<div class='footer'>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
</div>
</body>
</html>Nous avons une image et plusieurs paragraphes que nous pouvons styliser comme nos divs structurels. Par exemple, créons une mise en page de type magazine en faisant flotter l’image. Ajoutez quelques règles supplémentaires à notre feuille de style:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
}
.container {
overflow: hidden;
background-color: #EAEDF0;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
float: left;
width: 650px;
height: 500px;
background-color: #F5CF8E; /* Jaune */
padding: 20px;
}
.article-image {
float: left;
width: 300px;
height: 200px;
margin-right: 20px;
margin-bottom: 20px;
}
p {
margin-bottom: 20px;
}
.footer {
clear: both;
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
overflow: hidden;
}
.column {
float: left;
width: 31%;
margin: 20px 1.15%;
height: 160px;
background-color: #B2D6FF; /* Bleu */
}Remarquez comment nous avons un flotteur à l’intérieur d’un flotteur, et que tout fonctionne très bien. La mise en page d’un site Web est un processus récursif: vous construisez une structure de haut niveau dans laquelle travailler, puis vous la remplissez avec votre contenu réel. Des mises en page plus complexes peuvent nécessiter une autre couche ou deux d’imbrication, mais l’idée est la même.
Masquage de débordement (pour le contenu)
Vous trouverez des exemples de mises en page imbriquées partout. Pour notre dernier exemple, considérons un thread de base de commentaire utilisateur. Vous avez une image qui est flottante à gauche avec un en-tête et du texte à côté:
Essayons de créer ceci dans notre pied de page. Dans votre élément .column favori , ajoutez les éléments suivants:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Floats</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='menu'>Menu</div>
<div class='container'>
<div class='page'>
<div class='sidebar'>Sidebar</div>
<div class='content'>
<img src='?' class='article-image'/>
<p>Ad netus sagittis velit orci est non ut urna taciti metus donec magnis
hendrerit adipiscing mauris sit a proin ultrices nibh.</p>
<p>Enim suspendisse ac scelerisque nascetur vestibulum parturient sed mi a
dolor eu non adipiscing non neque scelerisque netus ullamcorper sed
parturient integer.Eros dui risus non sodales ullamcorper libero a dis
cubilia a orci iaculis cursus.</p>
<p>Egestas at aliquam a egestas accumsan cum elementum consectetur conubia
tristique eu et vitae condimentum in ante consectetur suscipit a a duis
vestibulum gravida morbi sagittis.Parturient scelerisque facilisis
ullamcorper a a pretium a nisl parturient semper senectus accumsan ipsum
mus scelerisque eget ridiculus.Accumsan dolor a.</p>
<p>Ligula taciti vel primis sit a tincidunt habitant parturient parturient
in parturient ante nulla consectetur sem.Facilisis parturient litora.</p>
</div>
</div>
</div>
<div class='footer'>
<div class='column'>
<div class='avatar'></div>
<h3 class='username'>Bob Smith</h3>
<p class='comment'>Aptent vel egestas vestibulum aliquam ullamcorper volutpat
ullamcorper pharetra hac posuere a rhoncus purus molestie torquent. Scelerisque
purus cursus dictum ornare a phasellus. A augue venenatis adipiscing.</p>
</div>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
</div>
</body>
</html>Et les règles CSS correspondantes:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
width: 900px;
margin: 0 auto;
}
.container {
overflow: hidden;
background-color: #EAEDF0;
}
.menu {
height: 100px;
background-color: #B2D6FF; /* Bleu foncé */
}
.sidebar {
float: left;
height: 300px;
width: 200px;
background-color: #F09A9D; /* Rouge */
}
.content {
float: left;
width: 650px;
height: 500px;
background-color: #F5CF8E; /* Jaune */
padding: 20px;
}
.article-image {
float: left;
width: 300px;
height: 200px;
margin-right: 20px;
margin-bottom: 20px;
}
p {
margin-bottom: 20px;
}
.footer {
clear: both;
height: 200px;
background-color: #D6E9FE; /* Bleu clair */
overflow: hidden;
}
.column {
float: left;
width: 31%;
margin: 20px 1.15%;
height: 160px;
background-color: #B2D6FF; /* Bleu */
}
.avatar {
float: left;
width: 60px;
height: 60px;
margin: 25px;
border-radius: 40px;
background-color: #D6E9FE;
}
.username {
margin-top: 30px;
}
.comment {
margin: 10px;
overflow: hidden; /* Ceci est important */
}Ceci met en évidence un autre cas d’utilisation pour notre technique overflow: hidden . Utiliser sur notre élément .comment fait en sorte que le texte soit rendu comme nous le désirons.
En d’autres termes, overflow: hidden casse la disposition de style magazine de la section précédente, mais d’une manière très utile.
Résumé
Ce chapitre a été notre première rencontre avec des mises en page de pages Web réalistes. Nous avons appris comment faire flotter les divs vers la gauche et la droite, comment gérer le contenu après un flottement, et comment combiner les flottants avec la technique de centrage de marge automatique du chapitre Modèle de boîte CSS . Ce sont les outils dont nous avons besoin pour créer des barres latérales, des grilles, des mises en page de style magazine.
Il est important de ne pas perdre de vue le rôle du développeur dans le processus de création du site. Votre travail en tant que développeur Web est de prendre une maquette magnifiquement conçue et de la transformer en HTML et CSS que les navigateurs peuvent afficher à vos utilisateurs finaux. Les flotteurs sont un grand pas en avant vers cette fin, mais ils deviennent également obsolètes en faveur du schéma de disposition de flexbox.
Dans le chapitre suivant, nous apprendrons encore plus de façons de mettre en page des sites Web complexes en utilisant flexbox. Les propriétés CSS seront nouvelles, mais le processus sera le même que dans ce chapitre: nous alignerons toujours les boîtes à l’intérieur d’autres boîtes, à l’intérieur d’autres boîtes, et ainsi de suite jusqu’à ce que nous obtenions la mise en page souhaitée.