ARCHIVÉ - Bouclage de texte autour d'images et de tableaux
Cette information est archivée parce qu'elle est désuete et n'est plus pertinente.
Contenu archivé
Information archivée dans le Web à des fins de consultation, de recherche ou de tenue de documents. Cette dernière n’a aucunement été modifiée ni mise à jour depuis sa date de mise en archive. Les pages archivées dans le Web ne sont pas assujetties aux normes qui s’appliquent aux sites Web du gouvernement du Canada. Conformément à la Politique de communication du gouvernement du Canada, vous pouvez obtenir cette information dans un autre format en communiquant avec nous.
Table des matières
1.0 Introduction
Auparavant, on bouclait le texte autour des images et des tableaux à l'aide de l'attribut align. Étant donné que cet attribut a été proscrit, il faut maintenant utiliser les feuilles de style en cascade (« Cascading Style Sheets ») (CSS) pour en arriver au même résultat. S'il est appliqué correctement, la propriété CSS float permet de boucler le texte, ou de le faire « couler » autour des tableaux et des images.
Les classes « CSS .floatLeft », « .floatRight », « .image-left », « .image-right » et « div.wrapContainer » sont déjà définies dans le modèle de page NSI 2.0 du GC. Si vous n'utilisez pas le modèle de page NSI 2.0 du GC, il sera nécessaire de définir les classes CSS suivantes :
.floatLeft{float: left;}.floatRight{float: right;}.image-left{float: left; vertical-align: text-top;}.image-right{float: right; vertical-align: text-top;}div.wrapContainer{width:99.5%; float:left;}
Nota : L'image ou le tableau flottant doit être le premier élément de la ligne d'affichage courante et le texte qui coule autour de l'image ou le tableau flottant doit utiliser l'élément « div » pour s'assurer d'obtenir des résultats uniformes avec tous les navigateurs et sur toutes les plates-formes.
2.0 Exemples d'images et de tableaux flottants
2.1 Comment insérer une image flottante à gauche
2.1.1 Code
<p>Voici le texte qui précède l'image. Il ne coule pas autour de l'image.</p>
<div class="wrapContainer">
<p class="image-left"><img src="images/wmms.gif" height="20" width="83" alt="Gouvernement du Canada" /></p>
<div>Voici le texte qui coule à droite de l'image. Le texte continue d'entourer l'image jusqu'à ce qu'il atteigne une ligne qui n'est pas occupée par l'image flottante, après quoi il coule normalement.<br /><br /></div>
</div>
<p>Voici le texte qui ne coule pas autour de l'image.</p>
2.1.2 Résultat
Voici le texte qui précède l'image. Il ne coule pas autour de l'image.
Voici le texte qui ne coule pas autour de l'image.
2.2 Comment insérer une image flottante à droite
2.2.1 Code
<p>Voici le texte qui précède l'image. Il ne coule pas autour de l'image.</p>
<div class="wrapContainer">
<p class="image-right"><img src="images/wmms.gif" height="20" width="83" alt="Gouvernement du Canada" /></p>
<div>Voici le texte qui coule à gauche de l'image. Le texte continue d'entourer l'image jusqu'à ce qu'il atteigne une ligne qui n'est pas occupée par l'image flottante, après quoi il coule normalement.<br /><br /></div>
</div>
<p>Voici le texte qui ne coule pas autour de l'image.</p>
2.2.2 Résultat
Voici le texte qui précède l'image. Il ne coule pas autour de l'image.
Voici le texte qui ne coule pas autour de l'image.
2.3 Comment insérer un tableau flottant à gauche
2.3.1 Code
<p>Voici le texte qui précède le tableau. Il ne coule pas autour du tableau.</p>
<div class="wrapContainer">
<table class="floatLeft width50 data-table">
<thead>
<tr>
<th scope="col">Numéro de pièce</th><th scope="col">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<td>53242</td><td>599,99 $</td>
</tr>
<tr>
<td>53123</td><td>44,99 $</td>
</tr>
</tbody>
</table>
<div>Voici le texte qui coule à droite du tableau. Le texte continue d'entourer le tableau jusqu'à ce qu'il atteigne une ligne qui n'est pas occupée par le tableau flottant, après quoi il coule normalement.<br /><br /></div>
</div>
<p>Voici le texte qui ne coule pas autour du tableau.</p>
2.3.2 Résultat
Voici le texte qui précède le tableau. Il ne coule pas autour du tableau.
| Numéro de pièce | Prix |
|---|---|
| 53242 | 599,99 $ |
| 53123 | 44,99 $ |
Voici le texte qui ne coule pas autour du tableau.
2.4 Comment insérer un tableau flottant à droite
2.4.1 Code
<p>Voici le texte qui précède le tableau. Il ne coule pas autour du tableau.</p>
<div class="wrapContainer">
<table class="floatRight width50 data-table">
<thead>
<tr>
<th scope="col">Numéro de pièce</th><th scope="col">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<td>53242</td><td>599,99 $</td>
</tr>
<tr>
<td>53123</td><td>44,99 $</td>
</tr>
</tbody>
</table>
<div>Voici le texte qui coule à gauche du tableau. Le texte continue d'entourer le tableau jusqu'à ce qu'il atteigne une ligne qui n'est pas occupée par le tableau flottant, après quoi il coule normalement.<br /><br /></div>
</div>
<p>Voici le texte qui ne coule pas autour du tableau.</p>
2.4.2 Résultat
Voici le texte qui précède le tableau. Il ne coule pas autour du tableau.
| Numéro de pièce | Prix |
|---|---|
| 53242 | 599,99 $ |
| 53123 | 44,99 $ |
Voici le texte qui ne coule pas autour du tableau.