Vous êtes ici > CSS Débutant | Premiers pas en CSS | Aligner une image et du texte

Pour positionner une image à droite ou à gauche d'un texte, on peut bien sûr utiliser une mise en forme par tableau... Mais un tableau n'est pas fait, normalement, pour faire de la mise en page.

A l'aide du langage CSS, aligner une image et du texte est très simple grâce à la propriété CSS float qui fait "flotter" les éléments.

Aligner une image et du texte à l'aide de la propriété float

Sommaire

Fonctionne avec :

  • Tous les navigateurs graphiques

Propriétés utilisées :

  • float
  • line-height

Avertissements préliminaires

  • Tout élément flottant doit être déclaré en premier dans le flux, c'est à dire dans la lecture de haut en bas du code html.
  • Les images déclarées dans le code html, qui n'ont pas donc vocation à être des images de fond, doivent contenir l'attribut alt. Cet attribut est le texte alternatif qui doit apparaître si l'image n'est pas visualisée. Il a donc un rôle important pour l'accessibilité, et pas pour le référencement !
    • Si l'image est purement décorative, le contenu du alt doit être vide ;
    • Si l'image est porteuse d'information, le contenu du alt doit être pertinent et reprendre cette information.

Aligner une image à gauche du texte

Code xhtml

<p class="flotte">
 <img src="images/new.png" alt="Nouveau !" />
</p>
<p>
 Toutes les nouveautés, rien que des nouveautés.
</p>

Bien sûr, ce code tout seul positionne l'image au dessus du texte, et puis c'est tout...
Mais en indiquant un float:left dans la classe flotte déclarée dans le paragraphe contenant l'image, celle-ci va dégager un espace libre sur sa droite (puisqu'elle flotte à gauche) où le texte pourra se placer.

Remarque : si vous n'avez pas de notions sur les classes CSS, mieux vaut lire ce tutoriel avant de continuer.

Code CSS

.flotte {
float:left;
}

Zone de Test

Nouveau !

Toutes les nouveautés, rien que des nouveautés.

Et là vous allez me dire : C'est bien joli votre truc, mais le texte il est tout en haut de l'image, ça ne le fait pas.

Nan, mais bien sûr... Si le texte occupe un espace moins haut que la hauteur de l'image (ici 65 pixels) l'alignement peut paraître mal fait. Cela peut se régler de différentes façons.

Si le texte est très court, on peut appliquer une hauteur de ligne égale à la hauteur de l'image, par exemple, à l'aide de line-height. Le texte sera ainsi naturellement aligné au milieu de cette hauteur (attention, ceci ne sera donc pas valable si vous avez plusieurs lignes car elles vont être toutes espacées de la hauteur de ligne déclarée. Mais cela ne sera pas forcément nécessaire non plus...).

Code (x)html

<p class="flotte">
 <img src="images/new.png" alt="Nouveau !" />
</p>
<p style="line-height:65px;">
 Toutes les nouveautés, rien que des nouveautés.
</p>	

Zone de Test

Nouveau !

Toutes les nouveautés, rien que des nouveautés.

Aligner une image à droite du texte

Pour aligner son image cette fois à droite, on ne change rien au code html. C'est juste dans la feuille de style qu'il faut déclarer un float:right à la place du float:left.

Code CSS

.flotte {
float:right;
}

Zone de Test

Nouveau !

Toutes les nouveautés, rien que des nouveautés.

Bien entendu, si vous désirez bénéficier des deux options, il faudra deux noms de classes différents et appliquer celle qui ira bien selon vos désirs.

Complément

Le flottement de l'image persiste tant que le texte n'a pas dépassé le hauteur de l'image. Pour annuler cet effet, il faut indiquer un clear:both au premier élément que l'on veut voir dépasser ce phénomène. Cet élément passera donc à la ligne, sous l'image, quelque soit la hauteur de celle-ci.

précédent suivant

Haut

Contact : pascale at mammouthland.net

Creative Commons License

En cas de reproduction (partielle ou totale) de cet article, prière de faire un lien vers la page originale : http://css.mammouthland.net/positionner-image-float-html-css.php