Titre: [Prb] Image + texte aligné
Posté par: Le lapin le le 08-06-2006 a 14:10:15
Bonjour à tous,
Ceci est mon premier message sur ce forum.
J'ai au préalable effectué une recherche sans succès à mon problème, je me tourne donc vers vous.
C'est un problème sans doute relativement simple pour vous, ne soyez donc pas étonne ;)
Je tente d'alligner sur une même ligne une image (15px par 15px) avec du texte derrière.
Ma mise en page est un tableau à 2 plusieurs colonnes. Mon but est d'obtenir que l'image et le texte soit aligné (donc que l'espace interligne s'ajuste automatiquement).
Si vous faite le test vous même avec mon code actuelle, vous constaterez le problème:
<table>
<tr>
<td>
Mon texte 1<br>
Mon texte 2<br>
...
</td>
<td>
<img src="....gif"><br>
<img src="....gif"><br>
....
</td>
</tr>
</table>
Problème: Au fur et a mesure le décalage devient si grand, que les images ne sont même plus en face des lignes de texte correspondante :(
Une piste: La seule "solution" que j'ai trouvé, mais qui ne fonctionne que sur Firefox est d'utilisé la valeur <p> afin de définir un paragraphe. MAis l'interligne devient complètement exubérant, et le résultat n'est valable que sous Firefox (merci IE...).
Pour vous donnez un exemple de ce que vers quoi je veux arriver, www.clubic.com , chaque news est alligné avec icones ainsi que l'heure de la news.
Avec le code source je vois clairement que ca fonctionne grâce à des div, mais comment...
Je vous remercie d'avance pour vos réponses, solutions... :)
Le lapin |
Titre: Re:[Prb] Image + texte aligné
Posté par: vertigo_76 le le 08-06-2006 a 14:37:07
Salut,
Pourqoi ne fais tupas simplement un div avec une liste:
<div>
<ul>
<li list-style-image: url(puce.png);>Mon texte</li>
<li list-style-image: url(puce.png);>Mon texte</li>
<li list-style-image: url(puce.png);>Mon texte</li>
<li list-style-image: url(puce.png);>Mon texte</li>
</ul>
</div>
Pour plus d'info sur les listes avec puce en image:
http://openweb.eu.org/articles/puces_images/ (http://openweb.eu.org/articles/puces_images/)
sinon tu crées un tableau avec une ligne par texte :
<table>
<tr>
<td>
Mon texte 1
</td>
<td>
<img src="....gif">
</td>
</tr>
<tr>
<td>
Mon texte 2
</td>
<td>
<img src="....gif">
</td>
</tr>
etc.....
</table> |
Titre: Re:[Prb] Image + texte aligné
Posté par: Le lapin le le 08-06-2006 a 14:57:51
Bonjour Vertigo,
Merci pour ta réponse.
Alors je viens de testé la solution <li>, le code exact dont tu faisait allusion semble être celui-ci:
<li style="list-style-image: url(http://.....gif)";>Mon texte</li>
<li style="list-style-image: url(http://.....gif)";>Mon texte</li>
<li style="list-style-image: url(http://.....gif)";>Mon texte</li>
Je viens de l'essayer, mais le résultat est exactement le même, les images ne sont pas allignés et le décalage augmente au fil des lignes.
Concernant ta deuxième solution, j'ai tenté de l'adopté, seulement dans ce cas la, l'espace entre les 2 lignes (donc les 2 TR) est 10x trop grande. Je pense que ce paramètre est ajustable dans le css, mais lequel est il ?
Merci |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|