Habillez des images de texte

Publié le par PêUR

Mise à jour le 21/01/2006 14:22

Depuis la version 1.92 d'Over-Blog de décembre 2005, l'insertion d'image par la barre d'outils de l'éditeur applique directement à l'image insérée un style permettant au texte saisis de l'entourer sans passer par les manipulations d'écrite ci-dessous.

Toutefois, pour les images copié/collées d'un autre site, vous pouvez procéder comme expliqué dans cet article. De plus la méthode pour appliquer une bordure à une image ou pour appliquer une classe de votre CSS sont toujours d'actualité.


Voici une méthode simple pour que votre texte encadre parfaitement une image comme l'exemple suivant:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut ipsum. In dapibus. Maecenas posuere mi vel augue. Pellentesque aliquet porta tellus. Vestibulum a lorem. Duis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Insertion de l'image

Ecrivez tout d'abord votre texte. Placez votre curseur devant la 1ère lettre du paragraphe. Insérez normalement votre image via le bouton insérer/modifier Image Image  Plus d'info....

 Résultat:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut ipsum. In dapibus. Maecenas posuere mi vel augue. Pellentesque aliquet porta tellus. Vestibulum a lorem. Duis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

 

Habillage de l'image

Appliquons à l'image le style CSS qui va permettre au texte de venir encadrer l'image. Cliquez-droit sur l'image, sélectionnez Propiété d'Image (Fig. 1)

Menu contextuel image
Fig.1

Séléctionnez le 4ème onglet "Avancé" de la fenêtre Propriétés d'Image (Fig.2)

Proprités d'Image - Avancé
Fig. 2

 Dans le champs style, saisissez:

Style
float:left                            

Résultat:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut ipsum. In dapibus. Maecenas posuere mi vel augue. Pellentesque aliquet porta tellus. Vestibulum a lorem. Duis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Petite marge autour de l'image

Si vous voulez que le texte soit moins collé à droite, dans le champs style, saisissez: 

Style
float:left; margin-right:5px               

Résultat:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut ipsum. In dapibus. Maecenas posuere mi vel augue. Pellentesque aliquet porta tellus. Vestibulum a lorem. Duis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Bordures autour de l'image

Si vous voulez que l'image soit encadrée de rouge, dans le champs style, saisissez: 

Style
float:left; margin-right:5px; border:5px solid red 

Résultat:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut ipsum. In dapibus. Maecenas posuere mi vel augue. Pellentesque aliquet porta tellus. Vestibulum a lorem. Duis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi non orci. Cras tellus augue, nonummy vitae, laoreet sed, vestibulum ut, magna. Fusce porta turpis sit amet libero. Etiam id diam. Integer sed urna dignissim turpis egestas blandit. Curabitur sollicitudin urna sit amet risus. Nunc eu metus non elit laoreet tincidunt. Aliquam vel nunc. Ut mollis magna sit amet nibh.

Allez plus loin, appliquez une classe de votre CSS

Si vous avez créé une classe particulière dans votre CSS pour vos images, plutôt que de l'appeller via le mode HTML en faisant

 <img class="Votre_class" src="....">

vous pouvez le faire par l'onglet "Avancé" de la fenêtre Propriétés d'images (Fig.2) en renseignant le champs Classes de Feuilles de Style 

Classes de Feuilles de Style

Votre_class                             

Mais dites donc, on passe de moins en moins par le mode source ;-) 

 

Articles connexes:

 

Publié dans Faq

Commenter cet article

Frédérique, de Quilting, Patchwork & Appliqué 02/03/2006 05:42

Merci beaucoup pour cette astucieuse info, exactement ce que je voulais, sans arriver a le faire de facon propre... meme pas propre du tout ! Maintenant c'est nickel, merci !!

PêUR 02/03/2006 09:42

Content que cela soit utile!
En passant, voila de très belles réalisations de patchwork ;-)

Danet 20/12/2005 16:28

Bonjour, je vais essayer cette méthode pour mon prochain article, j'avais "bricolé" dans le code source et cela a été une cata ! Merci pour tes bons conseils. Danet

PêUR 20/12/2005 16:43

;-)

celine [Palmito] 13/12/2005 16:53

non mais je reve! je cherche comment faire ca depuis des semaines et la solution est chez toi! alors que qui mieux que moi connait ton blog (a part toi! hihi)?..

je vais me faire taper sur les doigts.. hihi

merci et bizou
palmito

PêUR 13/12/2005 18:36

Ben alors palmito!!!!!!!!!!!! C'est un best-seller cet article ;-)

Eric 21/11/2005 17:21

Merci
Sympa d'avoir fait ce sujet avec autant de détails.
C'est beaucoup plus simple que d'aller bidouiller le css (enfin pour moi)
Amitiés

PêUR 21/11/2005 18:25

Merci pour ce commentaire.
Et oui over-blog nous permet de faire des choses avancées comme toucher au CSS mais aussi met à disposition des outils simple d'édition!! Merci OB ;-)

babo 05/11/2005 14:27

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pellentesque tortor eu magna. Ut consequat rutrum augue. Suspendisse egestas quam non felis.
Moi j'y comprends rien mais comme ça commence comme ton texte je me suis dis que ça te ferait plaisir ;-) Je l'ai trouvé sur colormixer.
Tu vas trouver ce genre de texte à beaucoup d'autre endroit, car Il arrive souvent aux webmasters d'être embêtés de ne pas pouvoir remplir leur charte graphique de contenu pour avoir un aperçu réaliste de la « gueule » du site. Il peut s'amuser à tapoter aléatoirement sur le clavier pour remplir les zones réservées au texte mais le rendu n'est pas très convaincant et la tâche fastidieuse.
Face à ce problème, il y a le fameux « lorem ipsum » abrégé en lipsum. Il s'agit d'un texte fictif qui donne l'impression d'un contenu cohérent. Les espacements, la longueur des phrases, la ponctuation, la longueur des paragraphe, ... donnent une impression de contenu réel. Il s'agit d'un texte en latin, cohérent dans la forme, mais sans réelle signification. Il a été utilisé dans l'imprimerie depuis l'an 1500 mais n'a pas survécu longtemps. Depuis la venue de l'électronique le lipsum refait son apparition. Ci-après un site qui génère des lipsum: http://www.lipsum.com/