Limiter l'affichage d'une icone issue d'un sprite-css

[elderion]

Bonjour

J'ai une div qui fait 300px.
Dans cette div j'aimerais mettre une icone du type "succes " ou "echec"
en toile de fond (bref un V et un X)
Toutes mes icones sont dans une sprite css, pour alleger le chargement de la page.
Les icones "succes" et "echec" soit alignés horizontalement dans mon image PNG, "succes" tout gauche du cadre du PNG, et "echec" a droite juste a côté.
Elle font 40px en large.

En CSS j'arrive tres bien a placer l'icone "echec" completement a droite dans la div au moyen de background-position: xxx px yyy px
mais comme la div est bien plus grande que l'icone, et que "echec" est collé tout a droite de la div,l'icone "succes" s'affiche dans toute l'espace libre a gaiche dans la div.
Et evidemment si je veux afficher que l'icone "succes", pas de probleme, puisque cette icone est au bord de l'image.

Je vois bien une solution mais qui ne me permet plus d'utiliser une icone en tant que simple background : ca serait de mettre une div dans ma div avec la taille adaptée a l'icone. Mais c'est dommage.

Une solution ?
J'espere que je suis clair, pas evidemment a expliquer comme ca.

[eckerdecker]

Il n'y a pas de moyen de faire ce que tu veux à part la solution que tu proposes toi-même

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
.icon {
width:40px;
height:40px;
background:url(icons.png) no-repeat;
}
.error .icon {
background-position:0px 0px;
}
.success .icon {
background-position:-40px 0px;
}

l’intérêt c'est que si tu as d'autre icônes dans ton sprite il te suffira de suivre le modèle de tes deux boites error et success

[Macmillenium]

Envoyé par elderion

Une solution ?

3 solutions:
- Celle proposée par eckerdecker,
- faire un sprite diagonal,
- intégrer le sprite dans un pseudo-élément :before (ne fonctionne pas sous IE7-, sinon prévoir un fallback JS).

[eckerdecker]

Intéressant le sprite diagonal, je n'y avait jamais pensé, par contre en suivant un peu les liens dans les commentaires on tombe sur des infos intéressante quant au abus à éviter pour les sprites, rapport à la quantité de RAM nécessaire au navigateur pour en gérer l'affichage ...

... s'en va modifier ce qu'il a fait ce matin