Traduction

Débuter en programmation web - sommaire

Tutoriel mis à jour au 20 mars 2024

Débuter en programmation web - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

HTML & CSS : les éléments 'block' ou boites

On appelle courammment "boites" les éléments de type block.
Les nouvelles balises sémantiques (header,section,nav, article, aside) sont de type block ainsi que les DIV.

Comment disposer de front plusieurs boites ?

Faut-il rappeler que par défaut les boites d'une page se positionnent les unes en dessous des autres. C'est le mode de positionnement normal ou flux normal des éléments de type "block".
Donc dès que vous voulez mettre plusieurs éléments "block" côte à côte vous devez utiliser une technique de positionnement !

Paradoxalement la propriété CSS position avec ses différentes valeurs : absolute, fixed, relative est rarement utilisée pour placer de front plusieurs boites ...

Si vous voulez que plusieurs boites se positionnent côte à côte dans leur conteneur parent il faut que la somme de leur largeur ne dépasse pas celle du parent.
Attention la largeur totale d'une boite peut être supérieure à celle indiquée par la propriété width ... Voir le paragraphe suivant.

Exemple

Le code HTML commun aux différentes solutions

	<header>
		<h2>En-tête de page </h2>
	</header>
	<section>
		<nav>
			<h2>Menu </h2>
			<img src ="../images/bikini.jpg" class ="droite" />
		
		</nav>
		<article>
			<h2>Contenu</h2>
			<img src ="../images/trikini.jpg" class ="gauche"/>
			<p>... 
		</article>
	</section>
	<footer><h2>Pied de page</h2></footer>

BODY (la page) contient trois grandes divisions : HEADER, SECTION, FOOTER.
La boite SECTION contient à son tour deux boites : NAV & ARTICLE.
Les boites NAV et ARTICLE sont donc "enfants" de SECTION et doivent être de front.

Le code CSS commun aux deux solutions

La feuille de style de base : * {margin :0px; padding : 0px; } header,nav,article,footer {background : lavender ; margin-top : 10px;} header, footer{height : 100px ;}

La première règle s'appelle un "reset" car elle annule les marges par défaut associées par défaut à certaines balises de type block.
Les images "flottent" à gauche ou à droite dans leur boite parente sans coller (marge) selon la classe appliquée ("droite" ou "gauche").
Il y aussi gestion de l'éventuel déborbement du contenu dans ARTICLE ; règle indispensable pour les petits écrans.

Première solution : float

Rajout dans la feuille de style de base

	header {float : left;}
	nav{float : left ; width : 29% ; height : 400px ; }
	article {float : right ; width : 69% ; height : 400px ; margin-left : 1% }
	footer {float : left ; height : 100px ;  }

Notez que dans le cadre d'un "responsive" basique la largeur de BODY est exprimée en pourcentage : 90% de la fenêtre.
La propriété float est en principe destinée à positionner (à gauche ou à droite) un élément "inline" dans son conteneur. Mais dans la pratique elle est très utilisée pour positionner de front des grandes divisions de la page.

Les deux boites "enfants" de SECTION doivent être de front.
La boite NAV doit "flotter" à gauche dans SECTION et la boite ARTICLE doit "flotter" à droite.
Il faut donc que la somme de leur largeur ne dépasse pas celle de SECTION sinon ARTICLE va se positionner à droite mais sous NAV.
La largeur de SECTION n'étant pas précisée, elle est égale à celle de son conteneur (BODY).
Largeur totale de ARTICLE = 69% + 1% (marge externe gauche) ; largeur totale de NAV = 29% (pas de marges) donc il y aura même un "gouttière" de 1% entre les deux boites !

Le rendu !

Observez la "gouttière" entre NAV & ARTICLE.

Deuxième solution : display inline-block

Une autre technique consiste à transformer les éléments NAV et ARTICLE en "inline-block" c'est à dire des boites qui par défaut se positionnent côte à côte et tant qu'il y a de la place bien sûr !

Attention si les éléments "inline-block" n'ont pas la même hauteur ils s'alignent verticalement par rapport à la base. Il faut donc forcer l'alignement vertical par le haut avec vertical-align : top.

Rajout dans la feuille de style de base (en plus des six règles déjà citées)

	header, nav, article, footer {display : inline-block ; vertical-align:top;}
	header,footer {width : 100% ; height : 100px ;}
	nav{width : 29% ; height : 400px ;}
	article {width : 69% ; height : 400px ; margin-top : 10px; margin-left: 1% ;}

Les boites HEADER, NAV, ARTICLE, FOOTER sont désormais des éléments "inline-block".

Le rendu !

Notez le petit "bug" : la boite ARTICLE est un peu en retrait à droite par rapport à HEADER et FOOTER
Et si la marge gauche passe à 2% alors la boite ARTICLE passe alors à la ligne.
L'un de ses inconvénients majeurs de la méthode display inline-block est l'apparition d'un espace indésirable et incompressible entre les blocs.

La version 3 de CSS introduit de nouvelles techniques de positionnement des boites.
Voir le tutoriel CSS - version 3 dans le même site.

Largeur interne et totale d'une boite

Je vais évoquer entres autres dans ce paragraphe la propriété box-sizing.
Il s'agit dune propriété CSS3 mais elle est tellement pratique que j'estime qu'il faut une légère digression.

Une boite dépourvue de la propriété "width" a une largeur égale à celle de son conteneur.
Lorsqu'un boite est dotée de la propriété "width" sa largeur totale est fonction de la valeur de la propriété "box-sizing".

Exemple

Observations

Les deux premières boites ont des largeurs totales très différentes mais des largeurs internes identiques.
Les deux dernières ont des largeurs totales identiques par contre les largeurs internes sont très différentes.

Le code dans la partie BODY

<div class ="type1" style ="width : 80%; padding : 10% ; border : 5px solid red; "> 
	<p>Has autem provincias ...
</div>
<div class ="type1" style ="width : 80%; padding : 1% ; border : 1px solid black; "> 
	<p>Has autem provincias ...
</div>

<div class ="type2" style ="width : 80%; padding : 10% ; border : 5px solid red; "> 
	<p>Has autem provincias ...
</div>
<div class ="type2" style ="width : 80%; padding : 1% ; border : 1px solid black; "> 
	<p>Has autem provincias ...
</div>

Les quatre boites ont officiellement une largeur égale à 80% de celle du conteneur or leurs largeurs réelles sont bien différentes ...

Les règles de style

div {margin : 10px auto ; }
.type1 {box-sizing : content-box;}
.type2 {box-sizing : border-box}

Commentaire

Si la propriété box-sizing a la valeur "content-box" (valeur par défaut) alors la propriété width définit la largeur interne (hors marges internes (padding) et bordures. Donc la largeur totale peut être beaucoup plus grande ...
Si la propriété box-sizing a la valeur "border-box" alors la propriété width définit la largeur totale (marges internes et bordures).

Je vous conseille d'écrire dans la feuille de style externe du site la règle suivante : * {box-sizing : border-box}.
Ainsi, même si vous modifiez les valeurs des propriétés padding & border pour certaines boites, vous êtes assuré que leur largeur totale ne changera pas. Et que donc les boites qui doivent être de front le seront toujours !

si une hauteur de boite est définie alors "box-sizing : content-box" définit la hauteur interne
"box-sizing : border-box" définit la hauteur jusqu'aux bordures haute et basse inclues.

Gérer le risque de débordement du contenu

Par défaut la valeur de la propriété "height" d'une boite est "auto". Ce qui signifie que la hauteur est ajustée au texte contenu. Mais si vous avez défini une hauteur le risque de débordement du contenu (overflow) est bien réel. Il faut le gérer !

Exemple

Ci-dessous cinq boites de même dimension et même contenu (contenu dépassant à la capacité de stockage de la boite) mais avec des comportements différents (débordement du surplus ou masquage du surplus avec ou pas barre de défilement).

Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit. Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit. Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum

Le code correspondant

CSS : 
	article {width : 90% ; height : 150px ; border : 1px solid black ; 
		margin : 20px auto 20px auto ; padding : 10px; box-sizing :border-box;  }
	#boite1 {color : red ;}
	#boite2 {overflow : hidden ;}
	#boite3 {overflow : scroll;}
	#boite4 {overflow : auto;}
	#boite5 {overflow : hidden;}
	#boite5:hover {height  : auto; }

HTML : 
<article id ="boite1">Has autem provincias ...</article>
<article id ="boite2">Has autem provincias ...</article>
<article id ="boite3">Has autem provincias ...</article>
<article id ="boite4">Has autem provincias...</article>
<article id ="boite5">Has autem provincias...</article>
...

Commentaire du code CSS

Les cinq boites font toutes la même hauteur : 150px ; hauteur pour le contenu limité à 130px (150px - 20 de marges internes hautes et gauche).

dans la première boîte le surplus (texte en rouge) déborde de la boîte. C'est le comportement par défaut. Ne pas utiliser la propriété OVERFLOW revient à écrire "overflow : visible"
dans la deuxième boîte le surplus est masqué car overflow vaut "hidden". C'est fâcheux de ne pouvoir lire tout le texte ...
dans la troisième boite une barre de défilement apparait et apparaitra toujours même si ce n'est pas nécessaire car "overflow : scroll"
dans la quatrième boite une barre de défilement apparait et apparaitra seulement si c'est nécesaier car "overflow : auto"
pour la cinqième boite il y a deux règles de style : par défaut le surplus est masqué mais si survol de la boite sa hauteur s'ajuste au contenu.

Traduction

Débuter en programmation web - sommaire

Initiation au HTML & CSS

Pour des pages dynamiques - initiation à PHP & SQL

Débuter en programmation web - recherche

L'auteur : Patrick Darcheville

HTML & CSS : les éléments 'block' ou boites

Comment disposer de front plusieurs boites ?

Exemple

Le code HTML commun aux différentes solutions

Le code CSS commun aux deux solutions

Première solution : float

Rajout dans la feuille de style de base

Deuxième solution : display inline-block

Rajout dans la feuille de style de base (en plus des six règles déjà citées)

Largeur interne et totale d'une boite

Exemple

Observations

Le code dans la partie BODY

Les règles de style

Commentaire

Gérer le risque de débordement du contenu

Exemple

Le code correspondant

Commentaire du code CSS