Utilisation de sprites dans une liste css

Version imprimable

J'utilise depuis un certain temps des sprites (image constituée d'images composites) pour réduire les requêtes serveurs. Pour les balises de type span ou div, l'utilisation des sprites se rèvèle assez triviale.

L'utilisation de sprites pour les listes (ul) me pose toutefois des difficultés. L'image sprite et les classes de sélection d'icônes sont définies comme suit:
Code:

1 2 3 4 5 6 /*css (image sprite de référence icon.gif composée des icônes sqred, .img_datetime, etc., espacés à intervalles réguliers.):*/ .sqred, .img_datetime {background:url(img/icons.gif) no-repeat;padding:0 0 0 19px;font-size:x-small;z-index:10;} /*classe de référence (ex img_datetime)*/ .img_datetime{background-position:0 -300px;margin-top:5px;margin-bottom:0;padding-top:0px;}
Si j'utilise la même approche pour une liste ul, les balises li font apparaître les premières icônes du sprite icon.gif au lieu de l'icône spécifiée (Ex2). Pour l'instant, j'ai réglé le problème de façon standard en spécifiant explicitement l'icône de référence (Ex1).

Existe-il une approche plus élégante, càd une classe de sélection sprite (ul.sqred1), pour arriver au même résultat? Merci d'avance pour toute suggestion.

Ex. 1. Approche actuelle (fonctionne, mais requiert une requête http)
Code:

1 2 3 4 5 6 7 8 9 css: ul.sqred1{list-style-image: url('img/bulred.gif');margin:0 30px;padding: 0 5px;} html: <ul class="sqred1"> <li>Header 1</li> <li>Header 2</li> <li>Header 3</li> </ul>
Ex 2. Idéalement (sélection de l'icône via une classe ad hoc):
Code:

1 2 css: ul.sqred1{background-position:0 -325px;margin-top:5px;margin-bottom:0;padding-top:0px;}

Bonsoir,

Tu as plusieurs pistes, par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
/* Une CSS générique pour toutes les listes */
ul {
   background:url(img/icons.gif) no-repeat;
   padding:0 0 0 19px;
   font-size:x-small;
   /* z-index:10; le z-index ne fonctionne que sur un élément positionné */ 
}
 
/* Ensuite on déclare la différence */
ul.sqred1 {
   background-position:0 -325px;
   margin-top:5px;
   margin-bottom:0;
   /* padding-top:0px; déjà déclaré */
}
 
ul.sqred2 {
   background-position:0 -385px;
   margin-top:5px;
   margin-bottom:0;
   /* padding-top:0px; déjà déclaré */
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<ul class="sqred1">
  <li><p>Header 1</p></li>
  <li><p>Header 2</p></li>
  <li><p>Header 3</p></li>
</ul>
 
<ul class="sqred2">
  <li><p>Header 1</p></li>
  <li><p>Header 2</p></li>
  <li><p>Header 3</p></li>
</ul>

20/05/2009, 16h33
mshelv

Merci pour la réponse. L'effet de cascade reste cependant identique (cf image): l'icône de départ est correcte, mais les icônes assignées aux li suivants sont décalées verticalement selon leur ordre d'inclusion dans icons.gif.

Peut-être est-ce là une limitation de l'approche sprite?

Une image détaillant l'effet est disponible sur: http://www.flickr.com/photos/mshelv/

http://www.flickr.com/photos/mshelv/

Citation:

Envoyé par mshelv

Merci pour la réponse. L'effet de cascade reste cependant identique (cf image): l'icône de départ est correcte, mais les icônes assignées aux li suivants sont décalées verticalement selon leur ordre d'inclusion dans icons.gif.

Peut-être est-ce là une limitation de l'approche sprite?

Oui, c'est difficile à gérer dans ce cas, sauf si tu limite le nombre de lignes entre <li> </li>.
Bref, c'est un du bricolage.
Si tu as la possibilité d'affecter une classe à chaque <li>, tu peux tester ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ul.cas1 li { background:url(img/icons.gif) no-repeat; padding:0 0 0 19px; font-size:x-small; } ul.cas1 li.sqred1 { background-position:0 -325px; margin-top:5px; margin-bottom:0; } ul.cas1 li.sqred2 { background-position:0 -350px; margin-top:5px; margin-bottom:0; } ul.cas2 li { background:url(img/icons2.gif) no-repeat; padding:0 0 0 19px; font-size:x-small; } ul.cas2 li.sqred1 { background-position:0 -325px; margin-top:5px; margin-bottom:0; } ul.cas2 li.sqred2 { background-position:0 -350px; margin-top:5px; margin-bottom:0; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <ul class="cas1"> <li class="sqred1">Header 1</li> <li class="sqred2">Header 2</li> <li class="sqred3">Header 3</li> </ul> <ul class="cas2"> <li class="sqred1">Header 1</li> <li class="sqred2">Header 2</li> <li class="sqred3">Header 3</li> </ul>

Au terme des essais, il semble que la seule approche viable soit d'injecter le css directement dans la balise li.
Code:

1 2 3 4 5 <ul> <li class="sqred">aaaaa</li> <li class="sqred">bbbbb</li> <li class="sqred">ccccc</li> </ul>
Pas très élégant, mais cela permet de contourner le problème. Merci encore!