Les flottants
Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait un « habillage ».
Pour que vous voyiez bien de quoi on parle, la figure suivante vous montre ce que nous allons apprendre à faire.
Une image flottante entourée par du texte
J'imagine que, maintenant, la question qui vous brûle les lèvres est : « Mais quelle est donc la propriété magique qui fait flotter ? ».
La réponse est… float (« flottant » en anglais). Cette propriété peut prendre deux valeurs très simples :
L'utilisation des flottants est très simple :
On peut aussi bien utiliser la propriété float sur des balises block que sur des balises inline. Il est courant de faire flotter une image pour qu'elle soit habillée par du texte, comme dans l'exemple précédent.
Nous allons apprendre ici à faire flotter une image. Voici le code HTML que nous devons taper dans un premier temps :
<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /> Ceci est un texte normal de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante.</p> |
Vous devez placer l'élément flottant en premier dans le code HTML. Si vous placez l'image après le paragraphe, l'effet ne fonctionnera pas.
Voici le seul bout de code CSS qu'on ait besoin de taper, qui permet de faire flotter l'image à gauche :
.imageflottante { float: left; } |
Amusez-vous aussi à faire flotter l'image à droite, c'est tout bête : il suffit d'indiquer la valeur right et le tour est joué !
Quand vous mettez en place un flottant, le texte autour l'habille. Mais comment faire si vous voulez qu'au bout d'un moment le texte continue en dessous du flottant ? On pourrait enchaîner plusieurs<br /> à la suite mais cela ne serait ni élégant ni très propre…
En gros, on aimerait pouvoir obtenir le même résultat qu'à la figure suivante.
Le texte sous l'image ignore la propriété float
Il existe en fait une propriété CSS qui permet de dire : « Stop, ce texte doit être en-dessous du flottant et non plus à côté ». C'est la propriété clear, qui peut prendre ces trois valeurs :
Pour simplifier, on va utiliser tout le temps le clear: both, qui marche après un flottant à gauche et après un flottant à droite (cela fonctionne donc à tous les coups). Pour illustrer son fonctionnement, on va prendre ce code HTML :
<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /></p> <p>Ce texte est écrit à côté de l'image flottante.</p> <p class="dessous">Ce texte est écrit sous l'image flottante.</p> |
Et ce code CSS :
.imageflottante { float: left; } .dessous { clear: both; } |
Et voilà le travail.
On applique un clear: both; au paragraphe que l'on veut voir continuer sous l'image flottante et le tour est joué !
Créé avec HelpNDoc Personal Edition: Créer des documents d'aide HTML facilement