CSS – Disposition des blocs

Le code CSS est un langage dit descriptif. Non obligatoire bien qu’essentiel sur une page web, il a pour but de mettre en forme et d’animer des balises HTML. Son but est uniquement visuel, à contrario du HTML qui a un but sémantique.

Voyons dans cet article comment disposer nos blocs HTML à l’aide du CSS

Sommaire

Disposition par défaut

Balises parents et fils

Ici, on part d’une situation avec 1 bloc section conteneur (ou parent) et 3 blocs div fils (ou enfants). Par défaut, les fils vont former un empilement de haut en bas.

Affichage par défaut des fils dans leur conteneur représenté par sa bordure noire

les balises section et div sont choisies par hasard, vous pouvez utiliser d’autres balises à condition que la balise conteneur soit « block ».

Elément étudiéFichier HTMLFichier CSS

<!-- Conteneur - Extrait de code HTML --> 
<section>
	<!-- Eléments fils --> 
	<div id="bloc1"> Elément 1 </div>
	<div id="bloc2"> Elément 2 </div>
	<div id="bloc3"> Elément 3 </div>
</section>

<!DOCTYPE html>
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8"> 
        <title>Je positionne mes blocs</title>
		<link rel="stylesheet" href="./styles.css" />
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body>
		<!-- Conteneur --> 
		<section>
			<!-- Eléments fils --> 
			<div id="bloc1"> Elément 1 </div>
			<div id="bloc2"> Elément 2 </div>
			<div id="bloc3"> Elément 3 </div>
		</section>
    </body>
</html>

/* Le fichier CSS doit être nommé styles.css et mis dans le même dossier que le fichier HTML */

section {
	border: solid;
	border-width: 2px;
}

#bloc1 {
	background-color: rgb(255, 0, 0, 0.5);
}

#bloc2 {
	background-color: rgb(0, 255, 0, 0.5);
}

#bloc3 {
	background-color: rgb(0, 0, 255, 0.5);
}

Familles de balises

Il existe plusieurs familles de balises html dont les deux principales sont :

Les balises de rendu CSS bloc (block)
Les balises de rendu CSS en-ligne (inline)

Présentation par défaut des balises « block » à gauche et « inline » à droite

Les balises block se placent par défaut l’une en dessous de l’autre. Elles occupent toute la longueur de l’espace du « block » parent dans lequel elles sont. Une balise « block » peut contenir d’autres balises « block » ou « inline ». On parlera ici essentiellement de ces dernières.

html, body, div, p, h1, ..., h6, ul, ol, table, pre, ...

Les balises inline se placent par défaut l’un à côté de l’autre dans le « block » dans lesquelles elles sont pour rester dans le texte. Leur taille est déterminée par le texte ou l’élément qu’elles contiennent. Une balise « inline » ne peut contenir que d’autres balises « inline »

span, em, strong, img, br, input, ...

Certaines balises dite « inline-block » sont des balises « inline » qui peuvent être dimensionnés des balises « block » (ex : input). Pour en savoir plus : www.alsacreations.com

Positionnement

Le positionnement manuel

Les propriétés CSS permettant de définir la position d’un « block » par rapport à son conteneur, la page web, ou la fenêtre du navigateur sont les suivantes :

position (défaut : position: static;) et les propriétés annexes
- top, left, bottom, right (défaut : top: 0; left: 0;)
- z-index (défaut : z-index: 0;)

La propriété CSS position dans un bloc détermine le cadre par rapport auquel il sera positionné et à partir duquel sera appliqué les propriétés annexes. La valeur de la propriété position pour positionner notre bloc fils par rapport au cadre …

… de son conteneur est:
- position: static;. Notre bloc se situe « en dessous de » la position static du bloc fils précédent ayant la valeur static ou relative. Les propriétés annexes sont ignorées dans ce cas.
- position: relative;
… de la page web : <strong><code>position: absolute;
… de la fenêtre du navigateur est : position: fixed;

Le terme « après » sera vu plus en détail lors de la description de la propriété CSS display

Les propriétés annexes top, left, bottom, right indiquent la distance du bloc par rapport au cadre de référence. La propriété annexe z-index indique l’ordre d’apparition des blocs :

Position du bloc par rapport au cadre de référence

Les propriétés annexes top, left, bottom, right n’acceptent que des valeurs avec une taille comme unité. Cependant, selon les cas, certaines unités de tailles (%) ne sont pas tolérés.

Le positionnement automatique

Un site web peut contenir beaucoup de blocs. Aussi, il peut être intéressant dans certains cas de demander un positionnement automatique. Aussi, la propriété CSS display sur un bloc détermine à la fois :

l’affichage du bloc
l’affichage de ses blocs fils

Par défaut, la propriété display sur une balise …

… block a une valeur display: block;
… inline a une valeur display: inline;
… non visible (comme la balise script) a une valeur display: none;

La valeur display: flex sur un conteneur pour agencer ses fils intègre énormément de possibilités (merci au travail d’openclassroom). Aussi, on va se centrer sur cette valeur, ignorer toutes les autres, et utiliser les propriétés annexes :

flex-direction : Sélection de l’axe d’alignement prioritaire (ligne ou colonne)
flex-wrap : Activation du retour à l’axe secondaire des fils
justify-content : Répartition des fils sur l’axe prioritaire
align-content : Répartition des fils sur l’axe secondaire

On va également regarder deux propriétés avec leur valeur qu’il est possible d’appliquer sur les fils du conteneur :

order: n; : réagencement de l’ordre des blocs fils
flex: n : Ordre d’occupation de l’espace par le bloc fils

Il existe beaucoup d’autres options, qu’on ne verra pas ici

Flex-directionflex-wrapjustify-contentalign-items

La propriété CSS flex-direction laisse le choix de l’axe principal d’alignement. Elle permet d’aligner les fils en ligne ou en colonne. Elle accepte les valeurs suivantes.

row : agencement des fils en ligne (par défaut),
column : agencement des fils en colonne,
row-reverse : agencement des fils inversé en ligne,
column-reverse : agencement des fils inversé en colonne,

Exemple de modification du code de départ :

section {
	border: solid;
	border-width: 2px;

	display: flex;
	flex-direction: row;
}

La propriété CSS flex-wrap autorise les fils à aller à la ligne / colonne suivante s’il n’y a plus de place sur la ligne / colonne actuelle. Elle accepte les valeurs suivantes :

nowrap : pas de retour à la ligne (par défaut)
wrap : les fils vont à la ligne / colonne suivante si besoin
wrap-reverse : les fils vont à la ligne / colonne précédente si besoin

Exemple de modification du code de départ :

section {
	border: solid;
	border-width: 2px;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

La propriété CSS justify-content gère l’espacement entre les fils sur l’axe principal (dans l’exemple ci-dessous la ligne). Elle accepte les valeurs suivantes :

flex-start : Les fils sont collés et alignés au début (par défaut)
flex-end : Les fils sont collés et alignés à la fin
center : Les fils sont collés et alignés au centre
space-between : les fils sont espacés jusqu’au bords des axes
space-around : les fils sont espacés sur l’axe

Exemple de modification du code de départ (pour le dernier cas) :

section {
	border: solid;
	border-width: 2px;

	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

La propriété CSS align-items est similaire à justify-content sur l’axe secondaire. Cependant, les valeurs qu’elle accepte, bien que de même nom, ont un fonctionnement légèrement différents :

flex-start : Les fils sont espacés et alignés au début (par défaut)
flex-end : Les fils sont espacés et alignés à la fin
center : Les fils sont espacés et alignés au centre
stretch : les fils sont étirés sur tout l’axe

Taille et bordures

Les dimensions

Les propriétés CSS width, height décrivent respectivement la largeur et la hauteur du bloc. Les valeurs acceptées sont des tailles.

Dans certains cas, la valeur en % ne fonctionne pas

L’usage de ces propriétés avec les propriétés top, left, bottom, right peut apporter des conflits

Les bordures et les marges d’un bloc

Les propriétés CSS margin, border, padding définissent les marges et la bordure d’un bloc :

margin donne la taille de la marge extérieur (à la bordure). Elle englobe les propriétés suivantes :
- margin-bottom : taille de la marge en bas
- margin-left : taille de la marge à gauche
- margin-right : taille de la marge à droite
- margin-top : taille de la marge en haut
- margin : taille global de la marge

padding donne la taille de la marge intérieur (entre la bordure et le contenu). Elle englobe les propriétés suivantes :
- padding-bottom : taille de la marge en bas
- padding-left : taille de la marge à gauche
- padding-right : taille de la marge à droite
- padding-top : taille de la marge en haut

border donne le style et la taille de la bordure. Elle englobe les propriétés suivantes :
- border-width : taille global de la bordure
- border-color : couleur de la bordure
- border-style : Style de la bordure. Elle accepte les valeurs : none, solid, dotted, dashed, double, groove, ridge, inset, outset

Parfois, il est possible de résumer plusieurs propriétés CSS en une seule. Ainsi, border-width: 25px; border-color: blue; border-style: solid; devient border: 25px blue solid;