Imbrication de CLASS, UL et LI

Bonjour,

mon problème est le suivant :

dans une div intitulée "cellule_sommaire", j'ai défini des propriétés pour les listes (balises UL et LI).

Le problème c'est que je voudrais ensuite pouvoir personnaliser les icones de la liste suivant les situations (class="connaissances", class="sites", class="livres", avec pour chacune de ces class d'UL une list-style-image: url(IMG/image_n.gif) .

A mon avis, il doit y avoir dans mon CSS des éléments définissant UL et LI qui rentrent en conflit, à moins que ce ne soit la syntaxe "ul.connaissances" qui soit fausse. Comme je ne comprends pas encore bien la syntaxe des styles imbriqués, j'aurais bien besoin de votre aide !

D'avance merci.

Mon code HTML :

<div class="cellule_sommaire">
<H2>CONNAISSANCES</H2>
  <div class="colonne">
  <span class="entete">Article scientifique</span>
	  
<ul class="connaissances">
  <li>Article 1</li>
  <li>Article 1</li>
  <li>Article 1</li>
</ul>

</div>

<div class="colonne">
<span class="entete">Sites Web</span>

<ul class="sites">
  <li>Article 1</li>
  <li>Article 1</li>
  <li>Article 1</li>
</ul>
</div>

<div class="colonne">
<span class="entete">Autres documents</span>

<ul class="livres">
  <li>Article 1</li>
  <li>Article 1</li>
  <li>Article 1</li>
</ul>
</div>

</div>

Le code CSS afférent :

.cellule_sommaire{
	 font-size: small;
	 clear: left;
	padding-bottom: 5px;
}

.cellule_sommaire ul {
	font-weight: bold;
	margin-bottom: 0;
	margin-left: -24px;
	margin-right: 1em;
}


.cellule_sommaire ul li {
	font-size: small;
	margin-top: 0em;
	margin-left: 10px;
	margin-right: 0;
	vertical-align: -2px;
}

ul.connaissances

{
	list-style-image: url(IMG/icone4.gif)
}

ul.sites
{
	list-style-image: url(IMG/icone5.gif)
}

ul.livres
{
	list-style-image: url(IMG/icone6.gif)
}

.colonne{
	 width: 32%;
	 float: left;
	 border-color: #f40;
	 border-style: solid;}

.entete{
	 font-style: italic;}

Modifié par labarique (28 Apr 2008 - 10:43)

Salut !

Je ne suis pas un pro de la grammaire CSS...

Mais il y a une espace dans ta déclaration ul.livres

Comme c'est le dernier ul, il remplace tous les précédents similaires...

Serait-ce par hasard (je n'ai pas essayé) la cause du problème ?

Non, l'erreur ne vient pas de là.

Je ne suis pas toujours pas sûr de comprendre la syntaxe CSS pour l'imbrication des class.

Pour résumer le problème :
- j'ai une DIV
- dans cette DIV, j'ai défini les propriétés UL et LI (communes à toutes les listes du DIV)
- je voudrais rajouter une CLASS pour définir une image pour les "puces" (list-style-image) de différentes listes contenues dans cette DIV (livres, connaissances, sites) mais je ne parviens pas à faire prendre en compte cette partie de mon CSS !
Modifié par labarique (28 Apr 2008 - 10:43)

A priori, la syntaxe était correcte. La raison des problèmes d'affichage était liée au chemin indiqué pour l'image de list-style-image. avec "list-style-image: url(../IMG/icone4.gif)", tout fonctionne.

Merci tout de même pour vos réponses !