Discussion :

[Ryan Sheckler]

Bonjour,

J'aimerai aligner verticalement un texte, ou plutôt un paragraphe, à côté d'une image. Je fais donc le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/>{TEXT}

Or, le texte étant trop grand, il fait un retour charriot en dessous de l'image :



Comment faire pour inclure le retour à la ligne à l'intérieur de l'alignement ? J'ai essayé sans succès les choses suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/>{TEXT}</p>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/><p>{TEXT}</p></p>

Merci d'avance !

[Cereales]

Tu as une solution toute simple à celà.
Tu créé un tableau de deux colonnes :
- Une avec l'image,
- Une avec le texte.
Au moins si ca fait un retour, ca sera à coter de l'image et non à la ligne

[blueice]

Les tableaux ne servent pas à ça

Il te suffit d'utiliser la propriété CSS float...

[Cereales]

Ok je change de prof l'an prochain xD
C'est la solution qu'il nous avez données, maintenant que je connais la tienne, je vais l'utiliser

[Ryan Sheckler]

Merci de m'avoir répondu.

Pour plus de précision, disons que je voudrai ça (montage caca), c'est-à-dire un alignement vertical sans retour chariot du texte :



Depuis vos propositions de float, j'ai testé, sans succès, ces différents codes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div style="float:left;"><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align:middle;" /></div>
<p>{TEXT}</p>

Résultat

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div style="vertical-align:middle;">
<img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="float:left;"/>
<p>{TEXT}</p></div>

Résultat


Où est-ce que ça coince please ?

[blueice]

Exemple simple :
http://www.dimension-internet.com/dev/float/

[Silent]

Exemple simple :
http://www.dimension-internet.com/dev/float/

Oui enfin, le problème, c'est que le contenu du bloc texte peut changer. Et donc il n'est pas question de gérer l'alignement vertical avec du padding.

N'est-il pas possible, sans table, d'aligner verticalement un texte à une image, sans retour chariot ?

EDIT : Ryan retransmettait mes messages, j'avais un problème avec mon compte.

[blueice]

Oui très simplement... en mettant vertical-align:middle à l'image, regarde à nouveau le lien ;-)

[Silent]

Oui très simplement... en mettant vertical-align:middle à l'image, regarde à nouveau le lien ;-)

Oui mais ça c'est équivalent à mes premières tentatives :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/>{TEXT}</p>

Et c'est là que je rencontre le problème du retour à la ligne.