CSS et Images

[Boub]

Bonjour @ tous,

Je suis jeune membre de ce forum, en esperant pouvoir partager mes quelques connaissances avec vous, et recevoir de l'aide de votre part.

Je recherche activement depuis quelques jours le moyen de d'afficher une image grace à une balise. Je m'explique...

Sur un portail d'actualité Hardware, nous postons quotidiennement des news. Certaines avec des caractéristiques de produits que nous notons de la sorte :

"une fleche" Athlon 3000+
"une fleche" 7800gt...
"une fleche" ...

Je voudrais en fait, que "la fleche" qui se trouve etre une image .gif soit remplacé par

<f1> Athlon 3000+
<f1> 7800gt...
<f1> ...

... dans le code.

Ce <f1> renverrai directement à l'image correspondante dans le style.css

J'ai cherché en vain sur google, sur pas mal de tutos css.

Auriez vous une idée ?

Merci !

[Dudu]

Salut,

Je ne suis pas sûr d'avoir compris ce que tu demandes, mais d'emblée je pense à quelque chose du genre:

<ul>
<li class="fleche">Athlon 3000+</li>
<li class="fleche">7800gt</li>
<li class="fleche">...</li>
</ul>

avec une CSS qui ressemblerait à çà

.fleche {background: transparent url(path/to/image.gif) no-repeat left center; padding-left:20px;}

Pour le padding de 20px c'est la valeur que j'utilise habituellement avec des icônes standards de 16x16. Ainsi on laisse 4 pixels (20-16=4) de marge entre la flèche et le mot. Mais bien sûr çà dépend de la taille de l'image, et surtout de sa largeur en fait.

[Boub]

Tout d'abord merci pour ta réponse...

Ce que tu m'as expliqué est dans l'idée mais en fait je cherche à faire beaucoup plus simple que cela. Cette idée vient d'une nouvelle recrue qui m'a expliqué qu'il utilisait ce système dans un site où il travaillait avant. Le problème c'est que cette personne s'y connait autant que moi en dev. et qu'il n'a plus d'accés à son ancien site.

Un autre exemple :

Sous dreamweaver, en mode WYSIWYG

Il tapait sa news "normalement" et lorsque qu'il voulait une fleche / logo... (jpg ou gif ou autre) il tapait le code correspondant <f1> <f2> <fX> devant le mot où il voulait que ce logo apparaisse.

Merci

[Dudu]

Çà c'est du PHP avec des fonctions comme str_replace() par exemple

Et c'est le genre qui dépend tellement du script de news ... à moins de se coder son script tout seul.

La deuxième solution a été celle pour laquelle macbidouille.com a opté: devant chaque news ils ont une icône différente pour distinguer les différentes catégories.

[Boub]

Bah je sais pas exactement, un dev. va m'envoyer les infos. Je les partagerai ici Merci quand même !