Imbrication de styles UL LI

[labarique]

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é 23 Avril 2008 par labarique

[Dadou]

C'est juste pas dans le bon ordre pour les définition des classes :

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


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

[Ifmy]

DADOU je t'offre un café ?

sinon ce que vous avez écrit semble relativement correct même si certaines choses me paraissent obscure.

il ce peux que ce soit dut au chemin vers le fichier. Il faut le "calculer" par rapport à l'emplacement de la feuille de style.

exemple: le premeir / symbolise la "racine"

/css/screen.css

/css/uneimage.jpg

/img/uneimage.jpg

pour la première image ce sera ./uneimage.jpg (on est dans le même dossier)

pour la seconde image ce sera ../img/uneimage.jpg (on doit remonter d'un dossier et aller dans le dossier img)

Modifié 23 Avril 2008 par Ifmy

[Dadou]

DADOU je t'offre un café ?

Cela aurait été avec plaisir, mais tu es trop loin il me semble

[buh]

Salut

Malgré l'absence de réponse , je me permets d'ajouter que pour ce qui me concerne ton code (html et css) fonctionne.

Les icones apparaissent bien devant les li dans les blocs connaissances et sites mais pas dans celui nommé livres. En effet lors de la saisie dans le css tu as mis un espace ce qui donne ul. livres (au lieu de ul.livres)

Si les icônes n'apparaissent pas c'est qu'il y a sûrement un problème de chemin comme te le dit Ifmy. Pour vérifier, mets les icone4 5 et 6.gif dans le même répertoire que le fichier contenant ton code html et dans le css au lieu de :

ul.connaissances {

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

}

mets

ul.connaissances {

list-style-image: url(icone4.gif)

}

et idem pour les 2 autres bien sûr.

[labarique]

Merci pour vos réponses. Effectivement, c'était un problème de chemin !

Merci encore.