> Le Site du Zéro - Informatique > Cours > Tutoriels > Site Web > HTML / CSS > Apprenez à créer votre site web avec HTML5 et CSS3 > Mise en page du site > Le modèle de boîte > Lecture du tutoriel

Le modèle de boîte

Par

Mathieu Nebra (M@teo21)

Mise à jour : 01/11/2011

Difficulté : Intermédiaire

276 525 visites depuis 7 jours , dont 6 573 sur ce chapitre , classé 1/777

Une page web peut être vue comme une succession et un empilement de boîtes, qu'on appelle "blocs". La plupart des éléments vus au chapitre précédent sont des blocs : <header>, <article>, <nav>... Mais nous connaissions déjà d'autres blocs : les paragraphes <p>, les titres <h1>...

Dans ce chapitre, nous allons apprendre à manipuler ces blocs comme de véritables boîtes. Nous allons leur donner des dimensions, les agencer en jouant sur leurs marges, mais aussi apprendre à gérer leur contenu... pour éviter que le texte ne dépasse de ces blocs !

Ce sont des notions fondamentales dont nous allons avoir besoin pour mettre en page notre site web... Soyez attentifs !

Retour en haut

Sommaire du chapitre :

Les balises de type block et inline
Les dimensions
Les marges
Quand ça dépasse...
Q.C.M.

Retour en haut

Les balises de type block et inline

En HTML, la plupart des balises peuvent se ranger dans deux catégories :

Les balises inline : c'est le cas par exemple des liens <a></a>.
Les balises block : c'est le cas par exemple des paragraphes <p></p>.

Il existe en fait plusieurs autres catégories très spécifiques, par exemples pour les cellules de tableau (type table-cell) ou les puces (type list-item). Nous n'allons pas nous y intéresser pour le moment, car ces balises sont minoritaires.

Mais comment je reconnais une balise inline d'une balise block ?

C'est en fait assez facile :

block : une balise de type "block" sur votre page web crée automatiquement un retour à la ligne avant et après. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée d'une série de blocs à la suite les uns des autres. Mais vous verrez qu'en plus, il est possible de mettre un bloc à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités pour créer le design de notre site !
inline : une balise de type "inline" se trouve obligatoirement à l'intérieur d'une balise "block". Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise "en ligne").

Pour bien visualiser le concept, voici un petit schéma que je vous ai concocté :

Sur fond bleu, vous avez tout ce qui est de type block.
Sur fond jaune, vous avez tout ce qui est de type inline.

Comme vous pouvez le voir, les blocs sont les uns en-dessous des autres. On peut aussi les imbriquer les uns à l'intérieur des autres (souvenez-vous, nos blocs <section> contiennent par exemple des blocs <aside> !).
La balise inline <a></a>, elle, se trouve à l'intérieur d'une balise block et le texte vient s'insérer sur la même ligne.

Quelques exemples

Afin de mieux vous aider à assimiler quelles balises sont inline et quelles balises sont block, voici un petit tableau listant quelques balises courantes.

Balises blocks	Balises inline
<p>	<em>
<footer>	<strong>
<h1>	<mark>
<h2>	<a>
<article>	<img />
...	...

Ce tableau n'est pas complet, loin de là. Si vous voulez avoir la liste complète des balises qui existent, et savoir si elles sont inline ou block, reportez-vous à l'annexe donnant la liste des balises HTML.

Les balises universelles

Vous les connaissez déjà car je vous les ai présenté il y a quelques chapitres. Ce sont des balises qui n'ont aucun sens particulier (contrairement à <p> qui veut dire "paragraphe", <strong> "important", etc.).
Le principal intérêt de ces balises c'est de pouvoir leur appliquer une class (ou un id) pour le CSS quand aucune autre balise ne convient.

Il existe 2 balises génériques, et comme par hasard la seule différence entre les deux c'est que l'une d'elle est inline, l'autre est block :

<span></span> (inline)
<div></div> (block)

Respectez la sémantique !

Les balises universelles sont "pratiques" dans certains cas, certes, mais attention à ne pas en abuser. Je tiens à vous avertir de suite : beaucoup de webmasters mettent des <div> et des <span> trop souvent, et oublient que d'autres balises plus adaptées existent.

Voici 2 exemples :

Exemple d'un span inutile : <span class="important">. Je ne devrais jamais voir ceci dans un de vos codes alors qu'il existe la balise <strong> qui sert à indiquer l'importance !
Exemple d'un div inutile : <div class="titre">. Ceci est complètement absurde puisqu'il existe des balises faites spécialement pour les titres (<h1>, <h2>...)

Oui, vous allez me dire qu'au final le résultat (visuel) est le même. Je suis tout à fait d'accord. Mais les balises génériques n'apportent aucun sens à la page et ne peuvent pas être comprises par l'ordinateur. Utilisez toujours d'autres balises plus adaptées quand c'est possible. Google lui-même le conseille pour vous aider à améliorer la position de vos pages au sein de ses résultats de recherche !

Retour en haut

Les dimensions

Nous allons ici travailler uniquement sur des balises de type "block".

Pour commencer, intéressons-nous à la taille des blocs. Contrairement à un inline, un bloc a des dimensions précises. Il a une largeur et une hauteur.
Ce qui fait, Ô surprise, qu'on dispose de 2 propriétés CSS :

width : c'est la largeur du bloc. A exprimer en pixels (px) ou en pourcentage (%).
height : c'est la hauteur du block. Là encore, on l'exprime soit en pixels (px), soit en pourcentage (%).

Par défaut, un bloc prend 100% de la largeur disponible. On peut le vérifier en ajoutant des bordures ou une couleur de fond sur nos blocs :

Les blocs prennent toute la largeur disponible

Maintenant, pimentons d'un peu de CSS pour modifier la largeur des paragraphes. Le CSS suivant dit : "Je veux que tous mes paragraphes aient une largeur de 50%".

Code : CSS

p
{
    width: 50%;
}

Les pourcentages seront utiles pour créer un design qui s'adapte automatiquement à la résolution du visiteur.
Toutefois, il se peut que vous ayez besoin de créer des blocs ayant une dimension précise en pixels :

Code : CSS

p
{
   width: 250px;
}

Minimum et maximum

On peut demander à ce qu'un bloc ait des dimensions minimales et maximales. C'est très pratique, car cela nous permet de définir des dimensions "limites" pour que notre site s'adapte aux différentes résolutions d'écran de nos visiteurs.

min-width : largeur minimale
min-height : hauteur minimale
max-width : largeur maximale
max-height : hauteur maximale

Par exemple, on peut demander à ce que les paragraphes occupent 50% de la largeur et exiger qu'il fassent au moins 400 pixels de large dans tous les cas :

Code : CSS

p
{
    width: 50%;
    min-width: 400px;
}

Essayez le résultat en modifiant la largeur de la fenêtre de votre navigateur. Vous allez voir que, si celle-ci est trop petite, le paragraphe se force à occuper au moins 400 pixels de largeur :

Essayer !

Retour en haut

Les marges

Il faut savoir que tous les blocs possèdent des marges. Il existe 2 types de marges :

Les marges intérieures
Les marges extérieures

Regardez bien ce schéma :

Sur ce bloc, j'ai mis une bordure pour qu'on repère mieux ses bords.

L'espace entre le texte et la bordure est la marge intérieure (en vert).
L'espace entre la bordure et le prochain bloc est la marge extérieure (en rouge).

En CSS, on peut modifier la taille des marges avec les 2 propriétés suivantes :

padding : indique la taille de la marge intérieure. A exprimer en général en pixels (px).
margin : indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels.

Les balises de type inline possèdent aussi des marges. Vous pouvez donc aussi essayer ces manipulations sur ce type de balise.

Pour bien voir les marges, prenons 2 paragraphes auxquels je mets simplement une petite bordure :

Code : CSS

p
{
    width: 350px;
    border: 1px solid black;
    text-align: justify;
}

Comme vous pouvez le constater, il n'y a par défaut pas de marge intérieure (padding). En revanche, il y a une marge extérieure (margin). C'est cette marge qui fait que 2 paragraphes ne sont pas collés et qu'on a l'impression de "sauter une ligne".

Les marges par défaut ne sont pas les mêmes pour toutes les balises de type block. Essayez d'appliquer ce CSS à des balises <div> qui contiennent du texte par exemple, vous verrez que là il n'y a par défaut ni marge intérieure, ni marge extérieure !

Supposons que je veuille rajouter une marge intérieure de 12px aux paragraphes :

Code : CSS

p
{
    width: 350px;
    border: 1px solid black;
    text-align: justify;
    padding: 12px; /* Marge intérieure de 12px */
}

Une marge intérieure ajoutée aux paragraphes

Maintenant, je veux que mes paragraphes soient plus espacés entre eux. Je rajoute la propriété margin pour demander à ce qu'il y ait 50px de marge entre 2 paragraphes :

Code : CSS

p
{
   width: 350px;
   border: 1px solid black;
   text-align: justify;
   padding: 12px;
   margin: 50px; /* Marge extérieure de 50px */
}

Une marge extérieure ajoutée aux paragraphes

Essayer !

Mais ??? Une marge s'est rajoutée à gauche aussi ! o_O

Eh oui, margin (comme padding d'ailleurs) s'applique aux 4 côtés du bloc.
Si vous voulez indiquer une marge en haut, en bas, à gauche et à droite, il va falloir utiliser des propriétés plus précises... Le principe est le même que pour la propriété border, vous allez voir !

En haut, à droite, à gauche, en bas... Et on recommence !

L'idéal serait que vous reteniez les traductions suivantes en anglais :

top : haut
bottom : bas
left : gauche
right : droite

Comme ça, vous pouvez retrouver toutes les propriétés de tête.
Je vais quand même vous faire la liste des propriétés pour margin et padding, histoire que vous soyez sûrs que vous avez compris le principe.

Voici la liste pour margin :

margin-top : marge extérieure en haut.
margin-bottom : marge extérieure en bas.
margin-left : marge extérieure à gauche.
margin-right : marge extérieure à droite

Et la liste pour padding :

padding-top : marge intérieure en haut.
padding-bottom : marge intérieure en bas.
padding-left : marge intérieure à gauche.
padding-right : marge intérieure à droite.

Il y a d'autres façons de spécifier les marges avec les propriétés margin et padding. Par exemple :
margin: 2px 0 3px 1px;
... signifie "2px de marge en haut, 0px à droite (le px est facultatif), 3px en bas, 1px à gauche.
Autre notation raccourcie :
margin: 2px 1px;
... signifie "2px de marge en haut et en bas, 1px de marge à gauche et à droite".

Centrer des blocs

Il est tout à fait possible de centrer des blocs. C'est même très pratique pour réaliser un design centré quand on ne connaît pas la résolution du visiteur.

Pour centrer, il faut respecter les règles suivantes :

Donnez une largeur au bloc (avec la propriété width)
Indiquez que vous voulez des marges extérieures automatiques, comme ceci : margin: auto;

Essayons cette technique sur nos petits paragraphes :

Code : CSS

p
{
    width: 350px; /* On a indiqué une largeur (obligatoire) */
    margin: auto; /* On peut donc demander à ce que le bloc soit centré avec "auto" */
    border: 1px solid black;
    text-align: justify;
    padding: 12px;
    margin-bottom: 20px;
}

Essayer !

Ainsi, le navigateur centre automatiquement nos paragraphes !

Il n'est cependant pas possible de centrer verticalement un bloc avec cette technique. Seul le centrage horizontal est permis.

Retour en haut

Quand ça dépasse...

Lorsqu'on commence à définir des dimensions précises à nos blocs, comme on vient de le faire, il arrive qu'ils deviennent trop petits pour le texte qu'ils contiennent.

Les propriétés CSS que nous allons voir ici ont justement été créées pour contrôler les dépassements... et décider quoi faire si jamais cela devait arriver.

overflow : couper un bloc

Supposons que vous ayez un long paragraphe et que vous vouliez (pour une raison qui ne regarde que vous) qu'il fasse 250px de large et 110px de haut. Ajoutons-lui une bordure et remplissons-le de texte... à ras-bord :

Code : CSS

p
{
    width: 250px;
    height: 110px;
    text-align: justify;
    border: 1px solid black;
}

Horreur ! Le texte dépasse des limites du paragraphe !

Eh oui ! Vous avez demandé des dimensions précises, vous les avez eues ! Mais... le texte ne tient pas à l'intérieur d'un si petit bloc.

Si vous voulez que le texte ne dépasse pas des limites du paragraphe, il va falloir utiliser la propriété overflow. Voici les valeurs qu'elle peut accepter :

visible (par défaut) : si le texte dépasse les limites de taille, il reste visible et sort volontairement du bloc.
hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte.
scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse voir tout le texte. C'est un peu comme un cadre à l'intérieur de la page.
auto : c'est le mode "pilote automatique". En gros, c'est le navigateur qui décide ou pas de mettre des barres de défilement (il n'en mettra que si c'est nécessaire). C'est la valeur que je conseille d'utiliser le plus souvent.

Avec overflow: hidden; le texte est donc coupé (on ne peut pas voir la suite) :

Le texte est coupé aux limites du paragraphe

Essayons maintenant overflow: auto; avec le code CSS suivant :

Code : CSS

p
{
    width: 250px;
    height: 110px;
    text-align: justify;
    border: 1px solid black;
    overflow: auto;
}

Des barres de défilement sont ajoutées au paragraphe

Essayer !

Eurêka ! Des barres de défilement nous permettent maintenant de consulter le contenu qui n'était pas visible.

Il existe une balise HTML, <iframe>, qui donne à peu près le même résultat. Elle permet de charger tout le contenu d'une autre page HTML au sein de votre page. Je vous conseille d'éviter d'en abuser, car il peut être lourd de charger une page qui charge elle-même d'autres pages web.

word-wrap : couper les textes trop larges

Si vous devez placer un mot très long dans un bloc, qui ne tient pas dans la largeur, vous allez adorer word-wrap. Cette propriété permet de forcer la césure des très longs mots (généralement des adresses un peu longues).

Voici par exemple un problème que l'on peut avoir quand on écrit une URL un peu longue dans un bloc :

L'ordinateur ne sait pas "couper" l'adresse car il n'y a ni espace, ni tiret. Il ne sait pas faire la césure.

Avec le code suivant, la césure sera forcée dès que le texte risque de dépasser :

Code : CSS

p
{
    word-wrap: break-word;
}

Je conseille d'utiliser cette fonctionnalité dès qu'un bloc de texte est susceptible de contenir du texte saisi par des utilisateurs (par exemple sur les forums de votre futur site). Sans cette astuce, on peut "casser" facilement le design d'un site (en écrivant une longue suite de "aaaaaaaaaaa" par exemple).

Retour en haut

Vous connaissez maintenant un peu mieux le fonctionnement des blocs qui constituent les pages web. Et si nous apprenions à les agencer entre eux pour construire notre site web ?

Vous allez voir, notre site web va très bientôt prendre forme !