[Résolu] Mise en forme des listes (ul li)

Bonjour,

J'ai une petite question concernant la création de liste.
Je suis en train de créer un site, et j'ai utilisé plusieurs listes pour mettre en forme du texte.
Mon problème c'est que j'aimerais que mes listes n'aient pas toutes la même présentation.

Par exemple liste01 avec une puce ronde et rouge.
Liste02 sans puce
et
Liste03 avec une puce carré.

Je n'arrive pas à créer plusieurs style de liste, mes listes conservent la mise en forme de la premiere liste que j'ai défini dans la feuille de style css.

mmmh j'espère être claire

Voila le css :

/* Liste01*/
.liste01 {padding-top:10px; padding-bottom:10px;}
.liste01 img{float:right;}
.liste01 ul, li {list-style-position: outside; list-style-image:url(../../img/accueil/fleche02.jpg); padding:0px; margin:0px;}
.liste01 li { margin-left:27px; padding-bottom:5px; padding-left:0px;} 

/* Liste03 lettre de l'innovation*/
.liste03 {padding-top:10px; padding-bottom:10px;}
.liste03 img{float:right;}
.liste03 ul, li {padding:0px; margin:0px; list-style-type: none;}
.liste03 li { margin-left:17px; padding-bottom:5px; padding-left:0px;} 

Le code html :

<div class="liste01">
<img src="img/blocruge.jpg" width="120" height="158" alt="" />
<ul>
<li><a href="#">Partenariats public-privé Les premières Initiatives technologiques conjointes</a></li>
<li><a href="#">Grenoble école de management lance Discontinuous Innovation Lab</a></li>
<li><a href="#">Dix établissements publics de recherche créent un Groupement d'intérêt scientifique en sciences de l'information et de la communication l'information et de la communication</a></li>
<li><a href="#">Dix établissements publics de recherche créent un Groupement d'intérêt scientifique en sciences de l'information et de la communication l'information et de la communication</a></li>
</ul>
</div>

Dans mon code même si j'applique la class "liste03" qui n'a pas de puce, une puce apparaît quand même c'est la classe liste01 qui est prise en compte.
Je n'y comprend rien ....

Merci de votre aide !!

Modifié par ingrid04 (18 Sep 2007 - 15:40)

Salut ingrid04 ,

en mettant :

.liste01 ul {...}
à la place de
.liste01 ul, li {...}

et

.liste03 ul {...}
à la place de
.liste03 ul, li {...}

ça marchera mieux !

Et hop ! un premier lien concernant les sélecteurs et un autre...

A+


*Edit: Pour être plus clair c'est comme si tu avais mis dans ton CSS :

.liste01 ul {list-style-position: outside; list-style-image: url(../../img/accueil/fleche02.jpg); padding:0px; margin:0px;}
li {list-style-position: outside; list-style-image: url(../../img/accueil/fleche02.jpg); padding:0px; margin:0px;}
.liste03 ul {padding:0px; margin:0px; list-style-type: none;}
li {padding:0px; margin:0px; list-style-type: none;}

donc le list-style-image s'applique à tous les li (à noter que list-style-type: none est dans ce cas ignoré)
Modifié par Heyoan (17 Sep 2007 - 18:21)

Merci!
ça fonctionne super maintenant.