Mise en page

Modèle de boîte

Chaque élément HTML peut être vu comme une boîte rectangulaire qui peut éventuellement contenir d'autres éléments HTML enfants. La boîte de l'élément parent est appelée le contenant et les éléments enfants constituent le contenu.

<body>
  <div>
    <h1></h1>
    <p></p>
  </div>
</body>
div

h1

p

Grâce aux feuilles de style CSS, il est possbile de définir les dimensions, les marges ainsi que le bord d'une boite.

width

Largeur de la boîte. Cette valeur peut être exprimée en unités absolues ou relatives.

height

Hauteur de la boîte. Cette valeur peut être exprimée en unités absolues ou relatives.

margin

Marge de la boîte avec son élément contenant. Cette propriété est aussi appelée marge extérieure. Sa valeur peut être exprimée en unités absolues ou relatives.

Il est possible de définir des marges extérieures différentes pour chaque coté de la boîte. Pour cela on utilise les propriétés CSS margin-top, margin-right, margin-bottom et margin-left. Pour des considérations de concision du code CSS, on peut affecter 4 valeurs à la propriété margin, la première s'appliquant au coté haut et les suivantes aux autres cotés dans le sens horaire (droite, bas et enfin gauche). Par exemple, les deux extraits de code CSS ci-dessous sont équivalents.

p {
  margin-top: 25px;
  margin-right: 5px;
  margin-bottom: 20px;
  margin-left: 10px;
}
p {
  margin: 25px 5px 20px 10px;
}

padding

Marge de la boîte avec son contenu. Cette propriété est aussi appelée marge intérieure. Sa valeur peut être exprimée en unités absolues ou relatives.

Comme pour les marges extérieures, il est possible de définir des marges intérieures différentes pour chaque coté de la boîte à l'aide des propriétés CSS padding-top, padding-right, padding-bottom et padding-left.

schéma du modèle de boîte
Fig 1. Illustration du modèle de boîte (source: http://w3.org).

border-radius logo CSS3

Arrondi du bord. Cette valeur peut être exprimée en unités absolues ou relatives.

div {
  border-top-left-radius: 10px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 0px;

  /*
  border-radius: 10px 0 40px 0;
  */
}


<div>
  The path of the righteous man is beset on all sides by the iniquities
  of the selfish and the tyranny of evil men.
</div>
The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men.

border-width

Épaisseur du bord. Cette valeur peut être exprimée en unités absolues ou relatives.

border-style

Type de trait utilisé pour le bord.

solid              
double              
dashed              
dotted              

border-color

Couleur du bord. Sa valeur peut être exprimée à l'aide d'une des quatre manières décrites dans le chapitre Couleur.

La propriété border permet de spécifier l'épaisseur, le type de trait et la couleur du bord en une seule ligne. Les extraits de code CSS ci-dessous sont équivalents.

p {
  border-width: 4px;
  border-style: dashed;
  border-color: yellow;
}
p {
  border: 4px dashed yellow;
}

Enfin, pour définir un bord différent pour chaque coté de la boite d'un élément, on peut utiliser les propriétés border-top, border-right, border-bottom et border-left.

Attention ! Les dimensions spécifiées à l'aide des propriétés width et height correspondent respectivement à la largeur et à la hauteur du contenu de l'élément. Si bien que, si vous définissez des marges intérieures (padding) et une épaisseur de bord (border-width), les dimensions réelles du contenant seront d'autant plus grandes.

div {
  width: 750px;
  height: 400px;
  padding: 10px 20px 5px 15px;
  border: 3px solid black;
}

Dans l'exemple ci-dessus, la largeur effective de la boite de l'élément div, c'est à dire le contenant sera de :
3px + 15px + 750px + 20px + 3px = 791px.

box-sizing logo CSS3

Cette nouvelle propriété a été introduite pour mettre fin à ce casse-tête de calcul mental. Lorsque la propriété box-sizing a pour valeur content-box, les valeurs des propriétés width et height correspondent aux dimensions du contenu : il s'agit du mode par défaut. Par contre, si la propriété box-sizing a pour valeur border-box, les valeurs de width et height correspondent aux dimensions du contenant, marges intérieures (padding) et épaisseur du bord (border-width) comprises.

div {
  box-sizing: border-box;
  width: 750px;
  height: 400px;
  padding: 10px 20px 5px 15px;
  border: 3px solid black;
}

Dans ce nouvel exemple, la largeur effective de la boite de l'élément div, c'est à dire le contenant sera de 750px. Par contre, la largeur du contenu, c'est-à-dire la place réservée aux éléments enfants, sera de :
750px - 3px - 15px - 20px - 3px = 709px.

Notion de flux

Le flux correspond à l'information textuelle contenue dans le document Web qui s'affiche de gauche à droite et de haut en bas. On distingue deux natures d'éléments HTML :

Éléments en-ligne
sont intercalés dans le texte et sont incorporés dans le flux.
Exemples : em, q, img.
Éléments de niveau bloc
s'organisent les uns au dessous des autres et occupent toute la largeur disponible.
Exemples : div, h1, p, blockquote.

display

Cette propriété CSS permet de modifier la nature de l'élément concerné.

none Élément non affiché
inline Élément en-ligne
block Élément de niveau bloc
inline-block Élément en-ligne dont le contenu est traité comme un élément de niveau bloc

Positionnement

Pour vous familiariser avec les différents modes de positionnement, je vous recommande cet excellent tutoriel de Greg Smith.

Logo du site http://learnlayout.com Learn CSS layout

Éléments HTML sémantiques

HTML5 introduit de nouveaux éléments dits sémantiques. Ces éléments permettent de renseigner sur leur fonction au sein du document Web afin d'en faciliter l'analyse par les robots des moteurs de recherche et, par conséquent, d'en améliorer le référencement.

header logo HTML5

Entête du document Web où l'on retrouve en général un logo ainsi que le titre du document.

nav logo HTML5

Menu de navigation.

section logo HTML5

article logo HTML5

aside logo HTML5

footer logo HTML5

Pied de page du document Web.

Exercice 20

Proposez une mise en page originale du document Web ci-dessous.

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>My Awesome Company</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="My Awesome Company logo">
      <h1>My Awesome Company</h1>
    </header>
    <nav>
      <ul>
        <li>Home
        <li>Products
        <li>Services
        <li>Contact
      </ul>
    </nav>

    <aside>
      External links :
      <ul>
        <li><a href="#">Link 1</a>
        <li><a href="#">Link 2</a>
        <li><a href="#">Link 3</a>
        <li><a href="#">Link 4</a>
      </ul>
    </aside>

    <article>
      <h2>My Awesome Company</h2>
      <p>
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
      </p>
    </article>

    <article>
      <h2>My Awesome Company</h2>
      <p>
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
      </p>
    </article>

    <article>
      <h2>My Awesome Company</h2>
      <p>
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
        Everything is awesome, everything is awesome... In our team.
      </p>
    </article>

    <footer>
      <p>&copy; My Awesome Company 2014</p>
    </footer>
  </body>
</html>

Correction

Exercice 21

Utilisez les propriétés CSS de positionnement afin de transformer le code HTML ci-dessous en brique de LEGO jaune sur fond rouge. Vous pouvez consulter ce post sur le forum LEGO® Answers pour connaître les proportions exactes d'une brique LEGO.

<div>
  <header></header>
  <aside></aside>
  <footer></footer>
</div>
Une brique LEGO construite avec 3 éléments div

Correction