Discussion :

[Kywhod]

Bonjour à tous,

Je me retrouve confronté une fois de plus au manque de support css de la part d'ie. En effet j'utilise la pseudo-classe :after et :before pour rajouter des images (puces en l'occurrence) à un texte.

Donc j'applique une classe à un texte qui est dans un span et le after de la classe rajoute tout proprement et automatiquement ma puce, c'est vraiment super pratique.
Le bémol : IE compatible oblige seulement il ne gère pas ces éléments. Avez-vous déjà rencontré ce problème ou une piste de réflexion?

J'ai envisagé trois solutions qui se révèle inefficaces :
- :after, :before -> incompatible avec ie
- sous forme de li -> sémantiquement pas propre et ne marche pas dans le cas où la puce est après le texte
- en background image avec un padding pour le texte -> ne marche pas dans le cas où la puce est après le texte (sauf si le texte est aligné à droite mais bon ...)

J'espère trouver une solution css pratique parce que ajouter à la main à chaque fois les balises images :s et pire pour la maintenance aie... Merci d'avance !

[c_s_s]

Bonjour

Peut-être avec une image après le texte ?
Avec un class particulier dans le conteneur de [texte - puce] tu peux faire apparaître ou non l'image.

Exemple :

Code :

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

1
2
3
4
5
6
<span class="texte-puce">
     <span class="puce-apres">
     texte
     <img src="puce.gif" alt="texte alternatif">
     <span>
</span>

et dans le CSS

Code :

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

1
2
3
4
5
6
.texte-puce img {	
	display:none;
}
.puce-apres img {	
	display:inline;
}

Si le class "puce-apres" est présent, l'image s'affiche. Sinon, elle ne s'affiche pas.

C'est un peu tiré par les cheveux, mais tant qu'IE n'interprètera pas la pseudo-class :after, il faudra ruser.

[Kywhod]

Merci pour cette réponse mais ça ne répond pas vraiment à mon problème.
En fait j'aimerais vraiment externaliser l'image, donc ne plus avoir à la répéter à chaque fois mais juste une seule fois dans le css.
Peut-être c'est pas possible ^^, je sais pas j'espère pas :/

[c_s_s]

Ok, une deuxième solution alors :

Code :

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

<span class="puce apres">Texte</span>

Si tu veux mettre le puce avant, bah il faut mettre "puce avant" au lieu de "puce apres".


Le css

Code :

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

1
2
3
4
5
6
7
8
.puce.avant {
	padding:0 0 0 20px;
	background:url(puce.gif) no-repeat left 50%;
}
.puce.apres {
	padding:0 20px 0 0;
	background:url(puce.gif) no-repeat right 50%;
}

Evidemment, le padding est de 20px à titre d'exmple. A toi de l'adapter en fonction de la largeur de ta puce.
De même, j'ai positionné mon image à 50% en hauteur pour qu'elle soit alignée avec le texte, mais tu peux adapter en fonction de tes marges.


J'ai un autre solution si tu dois mettre les puces avant et après le texte.

[Kywhod]

Uip voilà ça c'est la solution 3 que j'ai dit, mais c'est exactement ce qui faudrait.
En fait j'avais laché l'affaire parce que ca ne marchait pas, ca affichait :
|texte >| au lieu de
|texte > | mais en réessayant ce que tu viens de me dire je suis con de pas avoir plus creusé.

En fait le problème vient de la largeur du span par rapport au texte. Mon span prend la taille du conteneur dans lequel il est du coup la puce s'affiche a droite du span mais beaucoup trop loin du texte. En foutant width:auto ça ne marche pas, comment je peux faire pour adapter la taille du span automatiquement à la taille du texte + la puce?

[c_s_s]

Mon span prend la taille du conteneur dans lequel il est du coup la puce s'affiche a droite du span mais beaucoup trop loin du texte.

Là il y a un problème. Si ton span s'adapte à la largeur de ton texte, et si la puce est en background de ce span, elle ne peut pas dépasser la largeur de ton span, donc elle doit rester près du texte, sauf si tu as mis un padding droit gigantesque.


Si tu veux voir mon exemple, regarde ici : http://www.ellm.net/puce.html