Aligner du texte à côté d'une image en css

Code css:

<style type="text/css">
.image {float: left; margin: 0 6px 6px 0;}
  </style>

.image est le nom que je donne à mon style
float: left; indique que l'image se trouve à gauche
margin: 0 6px 6px 0; indique la marge de chaque côté de l'image. Dans l'ordre, sa donne: 0=marge au dessus de l'image, 6px=marge à droite de l'image, 6px=marge sous l'image, 0=marge à gauche de l'image.

Maintenant pour afficher l'image il suffit de faire un lien normal en utilisant en plus la class css soit:

<img class="image" src="images/mon-image.jpeg" width="100" height="100" alt="titre de mon image"> ici mon texte ...

Exemple:

Ce site à pour but d'essayer d'aider les personnes qui n y connaisse rien à créer un site ou page perso sans connaissances particulières et sans rien payer ;-). Vous souhaitez créer un site web,mais vous ne savez pas trop comment vous y prendre!! Créer un site gratuitement et simplement. Des tuto est des explications simples sur la création d'un site web à la portée de tous. Ce site est loin d'être exhaustif mais il se veut simple pour les débutants. Ce site à été créé gratuitement, l' hébergement fut gratuit avant migration de ce site vers un hébergement payant, le référencement éffectué est gratuit ...etc...ect. Bref tout ce qui fait ce site a été réalisé gratuitement et vous pouvez donc en faire autant :).

Afin d'alléger votre page, vous pouvez incorporer les attributs width et height directement dans votre style css. Par contre si vous utilisez ce style pour plusieurs images, toute les images feront la même taille...

Code css:

  <style type="text/css">
.image {float: left; margin: 0 6px 6px 0;
width:100px;
height:100px;
}
  </style>

Code de l'image:

<img class="image" src="images/mon-image.jpeg" alt="titre de mon image"> ici mon texte ...

Catégorie CSS