Traduction

Tutoriel CSS - sommaire

Tutoriel mis à jour au 15 mars 2024

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

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

CSS2 : 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.
Rappel : l'élément DIV, très utilisé, est de type block.

Comment disposer de front plusieurs boites ?

Faut-il rappeler que par défaut, les éléments "block" se positionnent les unes en dessous des autres. C'est le mode de positionnement normal ou flux normal des boites.
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

<body>
	<header>
		<h2>En-tête de page </h2>
	</header>
	<section>
		<nav>
			<h2>Menu </h2>
		</nav>
		<article>
			<h2>Contenu</h2>
		</article>
		<aside>
			<h2>Publicité</h2>
		</aside>
	</section>
	<footer><h2>Pied de page</h2></footer>
</body>

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

Le code CSS commun aux deux solutions

* {margin :0 ; padding : 0;}
body {width : 90% ; margin : 10px auto 10px auto ;}
header, footer {height : 100px; margin-top : 10px; margin-bottom : 10px;  }
header, nav, article, aside, footer {background : turquoise ; }

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.
Notez que dans le cadre d'un "responsive design" basique la largeur de BODY est exprimée en pourcentage : 90% de la fenêtre.

Première solution : float

Règles de style supplémentaires par rapport aux quatre règles communes

nav{float : left ; width : 29% ;height : 300px ;}
aside {float : right ; width : 18% ; height : 350px ;}
article {margin-left :30%; margin-right : 19%; height : 400px ; }

La boite NAV "flotte" à gauche de son conteneur (SECTION)
La boite ASIDE "flotte" à droite de son conteneur.
La boite ARTICLE se retrouve au milieu des deux autres grâce aux marges externes gauche et droite.

Le rendu :

Deuxième solution : display inline-block

Une autre technique consiste à transformer les éléments NAV, ARTICLE & ASIDE 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.

Règles de style supplémentaires par rapport aux règles communes

nav, article, aside {display : inline-block; vertical-align : top;}
nav{width : 29% ; height : 300px ; margin-right :1%;}
article {width : 49% ; height : 400px ; margin-right :1%;}
aside {width : 18% ; height : 350px ;}

Les boites NAV, ARTICLE & ASIDE sont désormais des éléments "inline-block".
Attention dans la feuille de style il faut respecter l'ordre de positionnement des boites enfants de SECTION : NAV puis ARTICLE puis ASIDE.

Le rendu :

Troisième solution

La version 3 de CSS introduit de nouvelles techniques de positionnement des boites. Voir sommaire de ce tuto.

Survolez puis cliquez sur l'image ci-dessous et observez les changements opérés.
Sur survol : changement d'image et ajout d'un bordurage.
Sur clic : changement d'image et ajout d'un ombrage et de coins arrondis.

Largeurs interne et totale d'une boite

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 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).

Il est conseillé d'écrire dans la feuille de style externe du site * {box-sizing : border-box}.
Ainsi, même si vous modifiez les valeurs des propriétés padding & border vous savez que la largeur totale de la boite est inchangée et 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.
Si vous avez défini une hauteur le risque de débordement (overflow) est 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

Le code 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; }

Le code 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) puisque

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 facheux 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

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

CSS2 : 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

Règles de style supplémentaires par rapport aux quatre règles communes

Deuxième solution : display inline-block

Règles de style supplémentaires par rapport aux règles communes

Troisième solution

Largeurs 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

Le code CSS

Le code HTML

Commentaire du code CSS