Notion de flux en CSS
Notion de flux en CSS
-
Objectif
- Comprendre la notion de flux en CSS
- Appliquer les propriétés
floatetclearpour définir un positionnement flottant. -
Définition
- Le flux, c’est l’ordre d’affichage des éléments.
- Le flux d’un document pourrait se définir comme étant le comportement naturel d’affichage des éléments d’une page web, ces éléments se succèdent dans l’ordre où ils sont déclarés dans le code HTML.
- Le contenu d’une page HTML sans mise en page avec des styles CSS s’affiche dans le flux courant (ou flux normal). Ce flux courant est constitué par les éléments de type bloc qui s’affichent les uns sous les autres, selon l’ordre indiqué dans le code HTML de la page.
- La notion de flux est essentielle pour bien maîtriser toutes les subtilités du positionnement en css. A l’écran, les différents éléments viennent se positionner de gauche à droite puis de haut en bas (dans le sens de lecture occidental direction:ltr):
- Le flux correspond à l’écoulement des informations (ou données) dans le processus d’interprétation des navigateurs
-
Interprétation par le navigateur
- Un navigateur commence par le haut de la page, place les éléments qu’il rencontre les unes à la suite des autres, de gauche à droite puis de haut en bas, à ceci près que cela dépend si ce sont des balises bloc ou en-ligne
- L’ordre du flux courant intervient dans l’affichage par défaut, sans style, sans mise en page ni positionnement particulier, mais certaines propriétés CSS permettent de sortir des éléments du flux courant pour les positionner de façon personnalisée.
- Constatation
- Les éléments de type block se mettent les un en-dessous des autres
- Les types block utilisent tout l’espace à disposition en largeur
- Les inline se mettent à la suite les uns des autres
- La longueur des inline est celle de leur contenu.
- Les 2 types fixent leur hauteur en fonction de leur contenu
-
Sortir du flux
- Pour sortir du flux par défaut adopter un positionnement fixe (position:fixed), absolu (position:absolute) ou flottant (float:left ou float:right).
- Les propriétés par défaut du html qui paraissent assez contraignantes, peuvent toujours être modifiées avec les CSS que ce soit la propriété display ou par les propriétés de positionnement.
-
Applications
-
Exercice 01
- Créer deux blocs 50px de hauteur l’un en-dessous de l’autre avec un espace de séparation vertical de 20px. Le premier bloc sera bleu et le second sera vert. Le résultat final devra être :
-
Exercice 02
- Créer trois blocs côte-à-côte avec un espace de séparation horizontal de 20px. Chaque bloc aura une largeur de 100px et une hauteur de 50px. Le résultat final devra être :
-
Exercice 03
- La page HTML de base est structuré en 5 zones en utilisant des
id. Voici un schéma permettant de comprendre les différentes zones mises en place à l’intérieur de la partie. Des couleurs d’arrière-plan ont été ajoutées aux zones pour pouvoir en visualiser les limites.
- Créer un dossier racine locale qui contiendra tous les fichiers de l’exercice.
- Téléchargez les fichiers de base nécessaires pour commencer l’exercice : fichier HTML et le fichier CSS
- Placer les deux fichiers téléchargés à la question précédente dans votre dossier racine local.
- Ouvrir les deux fichiers
.htmlet.cssdans votre logiciel d’édition et la page .html dans votre navigateur. - En utilisant le sélecteur universel
*: - Initialiser les marges internes de tous les éléments à 0px :
padding - Initialiser les marges externes de tous les éléments à 0px :
margin - En utilisant le sélecteur #entete,
ajoutez une hauteur à l’en-tête de 100px :height - En utilisant le sélecteur
#colonne_menu: - Positionner le menu en flottement à gauche :
float : left ; - Ajouter un largeur de 200 px : width
- En utilisant le sélecteur
#colonne_contenu, ajouter une marge à gauche équivalente à la largeur du menu :margin-left - En utilisant le sélecteur
#pieddepage: - Positionnez le pied de page en fixe à 0px du bas de la page :
- position: fixed ;
- bottom: 0px ;
- Ajoutez une hauteur au pied de page de 30px et une largeur de 100 %
Afficher la solution
Partie HTML :
<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>
Partie CSS correspondante :
.bloc1 {
background-color: blue;
height: 50px;
}
.bloc2 {
background-color: green;
height: 50px;
margin-top: 20px;
}
Afficher la solution
Partie HTML :
<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>
<div class="bloc3">blu blu blu</div>
Partie CSS correspondante :
.bloc1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
Afficher la solution
Partie HTML :
............
Partie CSS correspondante :
.............
