Discussion :

[mshelv]

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 :

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

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 :

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

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><p>Header 1</p></li>
  <li><p>Header 2</p></li>
  <li><p>Header 3</p></li>
</ul>

Ex 2. Idéalement (sélection de l'icône via une classe ad hoc):

Code :

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

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

[Macmillenium]

Bonsoir,

Tu as plusieurs pistes, par exemple :

Code css :

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

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 xhtml :

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

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>

[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/

[Macmillenium]

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 css :

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

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 xhtml :

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

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

[mshelv]

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

Code :

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

1
2
3
4
5
                <ul>
                    <li class="sqred"><p>aaaaa</p></li>
                    <li class="sqred"><p>bbbbb</p></li>
                    <li class="sqred"><p>ccccc</p></li>
                </ul>

Pas très élégant, mais cela permet de contourner le problème. Merci encore!