Accueil
Mes tutoriels sur la programmation

Tutoriel CSS - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Mon site est gratuit pour les visiteurs (et sans publicité) mais sachez qu'il a un coût ...
Signé : l'auteur.

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

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

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.

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.

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.

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.

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

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
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 et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.
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 et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.
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 et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.
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 et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.

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