Préambule

Une image flottante est, comme dit dans le descriptif, similaire à une lettrine.
Leurs propriétés sont identiques et le but est le même : écrire autour de l'image.

Une image flottante peut être apposée à droite comme à gauche. Pas la peine de passer par un tableau, de calculer vos lignes, vos espaces, ...

Pour ceux qui ne savent pas ce qu'est une lettrine vous pouvez aller jeter un oeil au tutoriel d'Orange sur lacréation d'une lettrine.

Pré-requis

Avant toute chose, pour utiliser ce code il faudra évidemment activer votre HTML.

Pour le faire il faut aller dans Panneau de configuration.

Puis rendez-vous dans Général > Messages et e-mails > Configuration > Activer le HTML.
Enfin, dans Profil > Préférences > Toujours autoriser le HTML.

Vous êtes à présent prêt pour continuer !

La théorie

En CSS, la propriété float permet de faire flotter un élément.
Elle peut prendre les valeurs suivantes :

• left - flottement à gauche (c'est notre cas)
  
• right - flottement à droite

Le principe est très simple : il s'agit de créer une classe CSS pour faire flotter un élément à gauche ou à droite, puis appliquer cette classe aux éléments que l'on souhaite faire flotter dans notre HTML (ici, notre image).

Une image qui flotte c'est une <img /> qui float

Alors dans le cas de ForumActif (ça tombe bien, on est sur CSSActif), j'ai une très bonne nouvelle : les classes dont on vient de parler existent déjà !

Autrement dit, il n'y a qu'à les utiliser, que vous soyez ou non administrateur du forum n'y change rien à condition bien entendu :

• Que le HTML soit activé (on en a parlé avant)
  
• Que le forum utilise le CSS de base de FA (je n'ai jamais croisé de forum qui désactive le style de base mais supposons...)

Flottement à gauche

La classe porte le doux nom de .left (gauche en anglais, sisi sans blague...).

Il suffit de l'appliquer sur notre image de la manière suivante :

Code:

<img src="URL DE l'IMAGE" class="left" alt="Texte alternatif" /> Mon texte à droite de l'image, blablabla...

Pour information, le code CSS n'est autre que :

Code:

.left {
    float: left;
}

A partir de ceci, il vous suffira juste de taper tranquillement votre texte à la suite de la balise comme si de rien n'était. Votre texte suivra ainsi les bordures de l'image, sans avoir à se soucier de sauter des lignes, etc.

Flottement à droite

La classe porte le doux nom de .right (droite en anglais, que de surprises...).

Il suffit de l'appliquer sur notre image de la manière suivante :

Code:

<img src="URL DE l'IMAGE" class="right" alt="Texte alternatif" /> Mon texte à gauche de l'image, et oui...

Pour information, le code CSS n'est autre que :

Code:

.right {
    float: right;
}

Arrêter le flottement : une histoire de clear(fix)

Faire une image flottante c'est bien. Mais... comment faire si vous voulez arrêter le flottement et écrire la suite de votre texte sous l'image (qui flotte, donc) ?

Stop ! Que ceux qui pensaient rajouter autant de sauts de lignes que nécessaire pour arriver en bas de l'image se taisent à jamais : ce n'est pas la bonne méthode !

En réalité, il existe une propriété qui permet d'arrêter le flottement de l'élément qui le précède : il s'agit de la propriété clear qui prend différentes valeurs, mais nous retiendrons l'application simple de clear: both; pour arrêter tout flottement sans se poser de question !

Il suffit donc d'appliquer cette propriété au paragraphe que vous souhaitez voir apparaître en-dessous de votre image flottante.

Bonne nouvelle ! Il se trouve que FA dispose d'ores et déjà d'une classe pour cela dans son CSS de base. Nul besoin donc de vous embêter (sauf si vous n'utilisez pas le style par défaut du forum bien entendu).

Il s'agit de la classe .clear qui se présente de la manière suivante :

Code:

.clear {
    clear: both;
}

Que vous soyez administrateur ou non, vous pouvez donc l'utiliser directement dans vos messages de la manière suivante :

Code:

<img src="URL DE l'IMAGE" class="left" alt="Texte alternatif" /> Mon texte positionné à côté de mon image flottante...
<p class="clear">Mon nouveau texte qui se placera en dessous de l'image, peu importe sa taille</p>

La notion de clearfix, by Espeon:

Personnalisation

Pour aller plus loin que le tutoriel, il est bien entendu possible de personnaliser votre image flottante.

Je ne vais pas donner toutes les possibilités car elles sont infinies. Mais je vais vous présenter sommairement quelques aspects classiques qui peuvent être ajoutés.

Si vous êtes administrateur...

Si vous êtes administrateur d'un forum, passez par le CSS de votre forum.
C'est relativement simple. Pour accéder à la feuille de style CSS allez dans Panneau d'Administration > Affichage > Couleurs > Feuille de style CSS.

Plusieurs choix s'offrent à vous :

1. Rajouter des propriétés aux classes .left et .right, c'est à dire réécrire ces classes dans votre code en y ajoutant les propriétés que vous souhaitez, par exemple :
   

   Code:

   .right {
       float : right;
       background:yellow;
   }

   Je vous le déconseille fortement, sauf si vous savez exactement ce que vous faîtes, car cela risque de générer des effets indésirables (tous les éléments auxquels ces classes sont associées vont subir vos modifications, ce qui n'est pas forcément votre intention).
   
   
2. Surcharger (réécrire) ces classes dans un contexte plus ciblé, c'est à dire en utilisant un sélecteur plus précis. Par exemple ajouter des propriétés pour les images se trouvant dans les posts :
   

   Code:

   .postbody img.left {
       background:red;
   }

   Par défaut, la classe .left possède déjà la propriété float:left; et vous y ajoutez simplement la propriété background:red pour le cas des images placées dans les blocs de classe .postbody (en principe, le corps des messages).
   C'est une solution qui dépend du contexte et où il faut tâtonner, mais vous n'aurez pas à surcharger votre HTML (ajouter d'autres classes sur vos éléments).
   
   
3. Créer une(des) classe(s) supplémentaire(s) pour ajouter vos effets. C'est la solution qui ne dépend pas du contexte, réutilisable mais qui vous imposera de rajouter ces classes dans votre HTML, comme ceci par exemple :
   

   Code:

   <img src="URL" alt="nom" class="left uneClasse" />

Le choix entre ces solutions, by Espeon:

Par exemple, avec la solution n°2, stylisons les images flottantes contenues des posts de votre forum :

Code:

.postbody img.left,
.postbody img.right {
    margin: 5px;  /* Place une marge autour de l'image */
    width: 100px; /* Fixe la largeur d'une image flottante */
    height: 100px; /* Fixe la hauteur d'une image flottante */
    border: solid #ffffff 3px; /* Définit une bordure autour de l'image */

    /* Arrondi les bords de l'image */
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    -htm-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

A vous de personnaliser le tout comme bon vous semble, mais je parie que vous souhaiterez appliquer une marge autour de votre image, pour que le texte n'y soit pas collé.

La propriété margin permet de créer un espace entre l'image et le texte et s'appliquera aux 4 bords de l'image : haut - bas - droite - gauche. Le site W3School vous présente plus en détails les spécificités de cette propriété si ça vous intéresse.

Si vous n'êtes pas aministrateur...

Si vous n'êtes pas administrateur d'un forum et que vous n'avez pas accès à une feuille de style CSS, ne vous inquiétez pas, ce code fonctionne en HTML.

A la place de créer une classe pour simplifier le code, il suffira d'insérer les propriétés dans la balise img via l'attribut style="VOTRE CSS ICI".
Votre codage ressemblera donc à ceci :

Code:

<img src="URL DE l'IMAGE" class="left" style="margin: 5px; border: solid #ffffff 3px;" width="100" height="100" alt="Texte alternatif" /> Mon texte qui est toujours là...

Je n'ai mis que des valeurs non définitives, uniquement pour vous montrer les différentes possibilités que vous avez. Vous pourrez évidemment déplacer votre image, ajouter un fond, des bordures, des arrondis, etc.

Faites-vous plaisir, les possibilités sont infinies.