Salut, j'ai un petit soucis au niveau de mon CSS pour réaliser des listes imbriquées avec puces.


Concrêtement je dois arriver à ce résultat final :




Mais j'arrive juste à faire :





En gros je n'arrive pas à redéfinir mes puces des sous-listes. Pourtant dans mon code, je déclare chaque liste comme une div différente avec des puces bien définies, ça devrait normalement "surcharger" les puces de la div parente. Quelqu'un aurait une solution ?

Pour info, mon CSS ressemble à ça :

Code : 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
 
#liste_sommaire ul{
list-style-type:upper-roman;
font-style:italic;
line-height: 180%;
}
 
#liste_preparation ul{
list-style-type:lower-greek;
font-style:italic;
line-height: 120%;
color:#808080;
 
}
 
#liste_ingredient ul{
	list-style-type:square;
}
 
#liste_ingredient2 ul{
	list-style-type:circle;
}
 
 
 
#liste_preparation li:first-line{
color:#009900;
}
 
#liste_preparation li:first-letter{
font-weight:bold;
text-transform: uppercase;
}


et c'est utilisé dans un XSLT qui me génère le HTML. Le bout de code qui concerne les listes ressemble à ça :

Code : 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<!-- DESCRIPTION RECETTE -->
<xsl:template match="recettes/recette" mode="description">
	<boiteRecette>
		<titreRecette>
			<xsl:value-of select="nom"/>
		</titreRecette>
			<div id="liste_ingredient">
				<ul>					
					<xsl:apply-templates select="ingredient" mode="ingredientRecette"/>
				</ul>
			</div>
		<div id="liste_preparation">
			<ul>
				<xsl:apply-templates select="preparation" mode="preparationRecette"/>
			</ul>
		</div>
	</boiteRecette>
 
</xsl:template>
 
 
 
 
<xsl:template match="ingredient" mode="ingredientRecette">
 
		<xsl:choose>
			<xsl:when test="ingredient">
 
				<li>
					<xsl:value-of select="@nom"/>
						<div id="liste_ingredient2">
							<ul>
								<xsl:apply-templates select="ingredient" mode="ingredientRecette"/>
							</ul>
						</div>
					</li>
			<div id="liste_preparation">
				<ul>
					<xsl:apply-templates select="preparation" mode="preparationRecette"/>
				</ul>
			</div>
 
 
			</xsl:when>
			<xsl:otherwise>
				<li>
						<xsl:if test="@qte!='*'"> 
						<xsl:value-of select="@qte"/>
						</xsl:if>
						<xsl:text> </xsl:text>
						<xsl:if test="@unit">
							<xsl:value-of select="@unit"/>
							<xsl:text> of </xsl:text>
						</xsl:if>
						<xsl:value-of select="@nom"/>				
				</li>
					<div id="liste_preparation">
					<ul>
						<xsl:apply-templates select="preparation" mode="preparationRecette"/>
					</ul>
				</div>
			</xsl:otherwise>
		</xsl:choose>
 
 
</xsl:template>
 
<xsl:template match="preparation" mode="preparationRecette">
 
	<xsl:apply-templates select="pas" mode="paspreparation"/>
 
 
</xsl:template> 
 
<xsl:template match="pas" mode="paspreparation">
	<li>
		<xsl:value-of select="text()"/>
	</li>
 
</xsl:template>