Écrire à côté d'une image à l'aide du CSS

Publié le par Seifer



Nous allons voir dans ce tutoriel comment écrire à côté d'un texte grâce au CSS. Certes vous avez la possibilité d'utiliser simplement le HTML, mais cela sera plus laborieux, il vous faudrait répéter chaque chose à chaque fois au lieu d'utiliser une simple balise

Comment écrire à côté d'un texte?

La solution est très simple, comme dans le tutoriel précédent, cela fonctionne avec des classes, donc je vais vous inscrire ci-dessous une classe qui vous permettra d'écrire à côté d'une image, puis quelques options pour mettre en forme l'image.

Le premier code qui vous permettra simplement d'écrire à côté d'une image :
.image {
float: left; /* Indique que le texte sera aligné à gauche */
margin:0 6px 6px 0; /* Défini la distance entre le texte et l'image, margin : haut droite bas gauche */
text-align: justify; /* Le texte à côté de l'image sera justifié */
}



Passons maintenant à la personnalisation de l'image, vous souhaitez ajouter des bordures, c'est la ligne ci-dessous qu'il faudra ajouter :
border: 1px solid gray; /* L'image sera entourée d'une bordure de 1 pixel pleine de couleur grise */
padding: 0px; /* L'écartement entre l'image et la bordure est de 0px */
background-color: none /* il n'y aura pas de couleur de fond derrière l'image */

Vous pouvez choisir le style d'encadrement, à savoir :
solid : encadrement plein,
dashed : encadrement en tirets,
dotted : encadrement en pointillés,
double : encadrement double.


J'ai utilisé une nouvelle balise pour ce tutoriel car, pour les Over-blogueur, la balise "img" existe déjà, mais si vous remplissez ceci, toutes vos images sans exception disposeront de ce code.

Publié dans HTML & CSS

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article