On suppose ici que l'image "attention.png" est suffisament petite pour se glisser dans le texte (16x16 pixels, par exemple).
On appelle ensuite le style dans le code :
<span class="url">mon texte</span>
L'image "attention.gif" apparaitra à la gauche du texte "mon texte".
La marge intérieure gauche (padding-left) est définie pour laisser suffisament de place à la petite image et donner l'illusion que celle-ci se trouve à gauche du texte.
Je n'ai testé cela que pour Firefox, il faudrait vérifier la fonctionnement pour les autres navigateurs. Certes, ils n'ont qu'à être conforment, mais si on veut que ça tourne...
[^] # Re: Nucleus CMS et un plugin de gallerie
Posté par ebellot . En réponse au journal Blog collaboratif et galerie photo. Évalué à 1.
---
.url { padding-left: 16px;
background-image:url(attention.png);
background-position: left;
background-repeat: no-repeat;
}
---
On suppose ici que l'image "attention.png" est suffisament petite pour se glisser dans le texte (16x16 pixels, par exemple).
On appelle ensuite le style dans le code :
<span class="url">mon texte</span>
L'image "attention.gif" apparaitra à la gauche du texte "mon texte".
La marge intérieure gauche (padding-left) est définie pour laisser suffisament de place à la petite image et donner l'illusion que celle-ci se trouve à gauche du texte.
Je n'ai testé cela que pour Firefox, il faudrait vérifier la fonctionnement pour les autres navigateurs. Certes, ils n'ont qu'à être conforment, mais si on veut que ça tourne...