Intégrer une image dans un texte

Bonjour,

j'ai cherché un tutoriel sur la méthode à appliquer pour insérer une image dans un coin d'un texte mais je n'ai pas trouvé. Je sais que c'est un classique mais j'arrive pas à le faire.
J'ai crée un div accueillant deux span ayant respectivement un p et un img mais même en jouant avec le fichier css je n'y arrive pas.

Est-ce qu'il y a un tutoriel ou un conseil que vous avez qui pourrait me servir d'aide.

Cordialement

Gudy

Salut,

Deux span qui contiennent un p et un img ?

<p> est une balise block, <span> est une balise inline. Ce sont les balises block qui contiennent les balises inline et pas l'inverse.

Pour ton texte qui suit l'image, regarde du coté de la propriété "float".

Je te conseille les 2 parties de ce tuto également qui m'a beaucoup aidé http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
Modifié par Zahn (09 Oct 2011 - 20:29)

Zahn a écrit :

&lt;p&gt; est une balise block, &lt;span&gt; est une balise inline. Ce sont les balises block qui contiennent les balises inline et pas l'inverse.

Salut,

Désolé de te contredire, la balise p est une balise inline. La balise span également...
Sémantiquement il est demandé de mettre les balises span dans les p. Et non l'inverse.

Salut,

JuJu57 a écrit :

Salut,

Désolé de te contredire, la balise p est une balise inline. La balise span également...

Tu te trompes pour <p>.

http://www.alsacreations.com/tuto/lire/530-structure-balises-css-display-bloc-block-ligne-inline.html

JuJu57 a écrit :

Sémantiquement il est demandé de mettre les balises span dans les p. Et non l'inverse.

C'est ce que j'ai dis. Sauf que p est une balise block.
Modifié par Zahn (09 Oct 2011 - 20:57)

Salut,

JuJu57 a écrit :
Désolé de te contredire, la balise p est une balise inline […] Sémantiquement il est demandé de mettre les balises span dans les p. Et non l'inverse.

Loupé, d'ailleurs c'est parce que <p> est de type bloc qu'il ne peut pas être enfant d'un <span> (type en ligne).

Pour Gudy : comme proposé, il faudrait fonctionner avec des flottants, par exemple :

<p><img class="gauche" src="…" alt="" />Bonjour, je suis un paragraphe de texte</p>

/* règle pour la classe .gauche qui aligne les images à gauche */
.gauche { 
float: left;
}
/* Tant qu'à faire, voilà aussi la règle CSS pour la classe .droite qui aligne les images à droite */
.droite { 
float: right;
}

:)
Modifié par audrasjb (10 Oct 2011 - 08:42)