Accueil

Traduction

Tutoriel CSS - sommaire

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

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

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

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

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

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

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

Le code HTML

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