Construisez vos pages

Des questions ?

Les réponses en français à de nombreuses questions sur les langages HTML et CCS se trouvent sur le site du WDG.

Comment forcer un saut de page lors de l'impression

Il suffit de faire :

<h2 style="page-break-before: always">Mon titre</h2>

Comment centrer un tableau avec des feuilles de style CSS

Le réponse n'est pas très intuitive... Il faut créer la classe suivante :

table.tabcentre { margin-left: auto; margin-right: auto; }

et l'appliquer au tableau.

<table class="tabcentre" ...>
...
</table>

Si on veut centrer tous les tableaux, il suffit bien entendu de faire :

table { margin-left: auto; margin-right: auto; }

Le fait de mettre une marge automatique à gauche et à droite du tableau provoque le centrage.

Comment numéroter automatiquement les sections (h2, h3...)

La feuille de style CSS :

body {
   counter-reset: chapitre;
   counter-reset: section;
}
h2:before {
   content: counter(chapitre, upper-roman) ". ";
   counter-increment: chapitre;
   counter-reset: section;
}
h3:before {
   content: counter(chapitre, upper-roman) ". " counter(section) " - ";
   counter-increment: section;
}

Comment insérer une image pour que texte s'écoule autour

Il faut utiliser la propriété float: right (ou float: left). Il faut prévoir une marge pour que le texte ne soit pas collé à l'image.

La feuille de style CSS :

div.imagedroite {
   float:right; margin-left:1em;
   text-align: center; font-style: italic; font-size: 75%;
}

L'utilisation :

<div class="imagedroite">
   <img src="XXX.jpg" alt="XXX"<br>
   Légende de l'image
</div>
<p>Ici on met le texte qui va s'écouler à gauche
de l'image puis sous l'image.

Une exemple d'utilisation se trouve sur la page de la famille Aalberg.

Fer à gauche et fer à droite

Le problème : comment mettre deux éléments de texte sur la même ligne, l'un en fer à gauche, l'autre en fer à droite.

On peut bien sûr utiliser un tableau à deux cellules, en alignant le texte à gauche dans la cellule de gauche et à droite dans celle de droite.

Solution sans tableau :

<div style="width:100%;">
   <div style="float:left">Fer à gauche</div>
   <div style="float:right">Fer à droite</div>
</div>

Ce qui donne :

Autre méthode :

<div style="width:100%;">
   <div style="display:compact">Fer à gauche</div>
   <div style="text-align:right; margin-left: 50%">Fer à droite</div>
</div>

Ce qui donne :

(Fonctionne avec Opera mais pas avec Mozilla qui n'implémente pas display:compact)

Si en plus on veut un élément centré...

On doit « tricher » en utilisant les attributs CSS qui simulent un tableau.

<div style="width:100%; display: table">
   <div style="display: table-row">
      <div style="width:33%; text-align:left;
                  display: table-cell">Gauche<div>
      <div style="width:34%; text-align:center;
                  display: table-cell">Centre<div>
      <div style="width:33%; text-align:right;
                  display: table-cell">Droite<div>
   <div>
<div>


Ce qui donne :

Quelques équivalences entre du marquage HTML et des feuilles de style CSS