Positionnement texte / image

Bonjour à tous

Voila je suis en train d'écrire un site pour une amie et je me trouve bloqué sur le positionnement du texte par rapport à une image.

<p>Vous pouvez refuser de voir la vérité en face : <img src="images/lion.jpg" width="70" height="70" alt="" /></p><br /><br />
      <p>Avoir confiance en l’avenir : <img src="images/belette.jpg" width="70" height="70" alt="" /></p><br /><br />
      <p>Refuser de ne rien faire : <img src="images/panda.jpg" width="70" height="70" alt="" /></p><br /><br />
      <p>Ou prendre votre envol !! : <img src="images/heron.jpg" width="70" height="70" alt="" /></p><br /><br />
      <p>Et surfer sur la vague du changement : <img src="images/surf.jpg" width="70" height="70" alt=""/></p>

Le texte se trouve à gauche et l'image à droite mais le texte est au niveau de la base de la photo et j'aimerai l'inverse...que le texte soit sur le haut.

J'espère que vous comprendrez mon explication

D'avance merci de vos idées

@+

Naje83
Modifié par naje83 (08 Apr 2010 - 16:10)

Salut,

Dans ton code CSS il faut mettre l'attribut à la balise <img>:

position: relative;

Et ensuite jouer avec "top=xx px;" avec xx qui dépendent de la taille de l'image

mamax a écrit :
Salut,
Dans ton code CSS il faut mettre l'attribut à la balise <img>:

position: relative;

Et ensuite jouer avec "top=xx px;" avec xx qui dépendent de la taille de l'image

Ou pas...
Pour utiliser ta solution, il faut positionner le paragraphe en relatif et ensuite l'images en absolu. C'est très lourd pour obtenir ce résultat..

Il est plus simple de jouer avec la propriété qui est faite pour ça : vertical-align
Un vertical-align: top; sur l'image devrait régler le problème.

Par ailleurs, je suggère l'emploi d'une marge basse sur les paragraphes à la place des <br /> .
Modifié par Corinne S. (08 Apr 2010 - 18:11)

Bonsoir,

Je rajouterai juste un petit commentaire concernant ton code xhtml.
Le code que tu nous donnes est invalide car, tu ne peux pas insérer des retours à la ligne après avoir fermé la balise <p>. Ces derniers doivent obligatoirement être insérés avant de fermer la balise <p>.

Donc, voici ton code xhtml valide :

<p>Vous pouvez refuser de voir la vérité en face : <img src="images/lion.jpg" width="70" height="70" alt="" /><br /><br /></p>

    <p>Avoir confiance en l’avenir : <img src="images/belette.jpg" width="70" height="70" alt="" /><br /><br /></p>

    <p>Refuser de ne rien faire : <img src="images/panda.jpg" width="70" height="70" alt="" /><br /><br /></p>

    <p>Ou prendre votre envol !! : <img src="images/heron.jpg" width="70" height="70" alt="" /><br /><br /></p>

    <p>Et surfer sur la vague du changement : <img src="images/surf.jpg" width="70" height="70" alt=""/></p>

De plus, je vois que les attributs alt sont vides. Or, ils servent à afficher un texte de remplacement pour les internautes qui n'affichent pas les images. Il serait donc judicieux de les remplir.
Pour plus d'informations à ce sujet, voir ce lien .

Super vos réponses.
Un grand merci à tous je suis en train de mettre en application...

@+

Naje83

voici un tuto proposant une autre alternative
http://gcyrillus.free.fr/essai/testdroite-gauche-inline-block.html

Merci pour ce tuto
Je pense que cela devient un peu trop ardu pour moi pour le moment, mais je n'ai pas dit mon dernier mot

Encore merci à tous

@+

Naje83