C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» [RPG] Fiche personnage avec bannière
Aujourd'hui à 04:36 par angyg

» Slideshow horizontal infini
Dim 19 Nov 2017, 10:34 par Lilynufare

» Barre(s) Hitskinienne
Ven 17 Nov 2017, 10:20 par Rinema

» Bouton ''Sélectionner le contenu'', pour les codes
Mar 14 Nov 2017, 18:29 par Nat'

» Effet de volet glissant sur un bloc
Jeu 09 Nov 2017, 16:59 par Arshow

» Infobulle avec effets CSS3
Mer 01 Nov 2017, 11:35 par Gold

» Dimensions des avatars
Mer 01 Nov 2017, 11:24 par Gold

» Previsualiser le premier message d'un sujet
Mer 01 Nov 2017, 11:17 par Gold


Poster un nouveau sujet   Répondre au sujetPartagez | 
 

Créer une image flottante

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 44



Image flottante


Informations générales

Description :
Une image flottante fonctionne sur le même principe qu'une lettrine. Il s'agit tout simplement d'écrire autour de votre image, sans devoir calculer les espaces, les interlignes et autres joyeusetés...

Démo :
CSS ActifLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. Nunc commodo odio at ipsum. Nam lacinia tempor dui.

Nam lacinia eros ac lectus. Sed id pede at lacus sagittis dapibus.

Cras metus metus, porta porta, tincidunt vitae, gravida vel, quam. Proin sit amet sapien. Nullam sed lectus. Mauris vehicula cursus justo. Pellentesque rutrum, mi in lobortis euismod, libero magna bibendum dui, quis commodo dolor risus ac enim.


Testé sur :
Tous les navigateurs

Crédits :
Proposé par Cheschire et Furase le 13/07/2012 | Validé par Espeon

Mise(s) à jour :
Mise à jour le 25/10/2012 par Espeon

Le tutoriel


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;
}

Remarquez que même si vous faîtes flotter ll'image à droite, il faut placer le code de votre image avant le texte. Sinon vous aurez un décalage dû au fait que votre texte ne flotte pas, lui.


Si vous êtes en version PHPBB3...
... les classes .left et .right ont pour propriété un text-align et non un float. Vous pourrez potentiellement les réécrire avec le code décrit ci avant, ou bien en créer de nouvelles pour éviter d'interférer avec le fonctionnement normal du forum.


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.

Pour ceux qui souhaitent fixer la taille de leur image (pour homogénéiser les grandes et petites images par exemple), les propriétés width et height sont là pour ça ! C'est bien sûr tout à fait facultatif, il s'agit d'un exemple de personnalisation.


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. Wink


Dernière édition par Cheschire le Mer 01 Aoû 2012, 18:44, édité 3 fois
MessageSujet: Créer une image flottante   Jeu 12 Juil 2012, 21:50
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


MessageSujet: Re: Créer une image flottante   Jeu 02 Aoû 2012, 07:14
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



02-08-2012 - Tutoriel validé par CSSActif




Dernière édition par Espeon le Mar 11 Déc 2012, 08:57, édité 1 fois
MessageSujet: Re: Créer une image flottante   Jeu 02 Aoû 2012, 07:14
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



11-12-2012 - Tutoriels fusionnés (Cheschire + Furase) et refonte en profondeur par les codeurs de CSSActif \o/


MessageSujet: Re: Créer une image flottante   Mar 11 Déc 2012, 08:56
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://shinrabanshou.forum-pro.fr/
avatar
{ Membre }
{ Membre }

Féminin Messages : 10



merci =)
MessageSujet: Re: Créer une image flottante   Sam 25 Mar 2017, 03:59
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Créer une image flottante   
Revenir en haut Aller en bas
 

Créer une image flottante

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Créer une image flottante
» roll-over, zone réactive, image et son
» [résolu] Lien dans image survolée vers page html
» agrandir reduire une image en son centre
» Changement d'une image de fond

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Les Messages-
Poster un nouveau sujet   Répondre au sujet

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit