Changer les Styles de liste ou sous liste

Bonjour,
J'ai un problème pour gérer mes sous-listes. Ma liste de niveau 1 possède une image (un triangle) , mais je veux que ma liste de niveau 2 ne possede pas ce triangle et prend un square à la place. mais cela ne marche pas.


Voici mon html :

    <div class="box">

<div class="dossier">
        <h2>Un dossier<br />
          <span class="black">pour aller</span><br />
          <span class="big">plus loin</span></h2>
        <ul>
          <li><a href="#">Le scandale de la Juventus de Turin</a></li>
          <li><a href="#">La coupe du monde de football en Allemagne</a></li>
          <li><a href="#">La Dépêche</a>
          				<ul>
                             <li><a href="#">La lettre de la dépêche</a></li>
                             <li><a href="#">La lettre de la dépêche</a></li>
                             <li><a href="#">La lettre de la dépêche</a></li>
            </ul></li>
          <li><a href="#">Le scandale de la Juventus de Turin</a></li>
          <li><a href="#">La coupe</a></li>
          <li><a href="#">La Dépêche du Midi 29/03/07</a></li>
          <li><a href="#">Le scandale de la Juventus de Turin</a></li>
          <li><a href="#">La coupe du monde de football en Allemagne</a></li>
          <li><a href="#">La Dépêche du Midi 29/03/07</a></li>
          <li><a href="#">Le scandale de la Juventus de Turin</a></li>
          <li><a href="#">La coupe du monde de football en Allemagne</a></li>
          <li><a href="#">La Dépêche</a>
        </ul>
</div>
    </div>

et ma partie de css :

/* dossier  */
.dossier h2 {
color:#840909;
font:bold 28px/22px "Times New Roman", Times, serif;
letter-spacing:-2px;
margin:0;
padding:10px 0 0 4px;
text-transform:uppercase;
}

.dossier h2 .black {
color:#000;
font-size:27px;
line-height:16px;
}

.dossier h2 .big {
font-size:32px;
line-height:26px;
}

.dossier h3 {
color:#840909;
font:bold 26px/22px "Times New Roman", Times, serif;
letter-spacing:-2px;
margin:0;
padding:10px 0 0 4px;
text-transform:uppercase;
}

.dossier h3 a {
color:#840909;
text-decoration:none;
}

.dossier h3 a:hover {
color:#840909;
text-decoration:underline;
}

.dossier h4 {
color:#000;
font:bold 15px/18px "Times New Roman", Times, serif;
margin:0;
letter-spacing:-1px;
padding:10px 0 0 4px;
}

.dossier h4 a {
color:#000;
text-decoration:none;
}

.dossier h4 a:hover {
color:#000;
text-decoration:underline;
}

.dossier ul {
float:left;
margin:0;
padding:10px 5px 20px 6px;
}

.dossier ul li {
float:left;
font:bold 14px/16px "Times New Roman", Times, serif;
list-style:none;
margin:0;
padding:0;
}

.dossier ul li a {
background:url(../images/arrow-small.gif) no-repeat 0 3px;
color:#000;
display:block;
padding:0 0 0 16px;
text-decoration:none;
}

.dossier ul li a:hover {
background:url(../images/arrow-small-2.gif) no-repeat 0 3px;
text-decoration:underline;
}

.dossier ul li ul {
margin:0;
padding: 0px 0px 0px 7px;
list-style:square;

}


.dossier ul li ul li {
float:left;
color:#840909;
font:bold 12px/13px "Times New Roman", Times, serif;
margin:0;
padding:0;
}

.dossier ul li ul li a {
color:#840909;
list-style:none;
text-decoration:none;
}

Bonjour,

En supprimant le background image du bloc de liste inclus et en spécifiant bien list-style-type et non pas seulement list-style.

Pas testé mais cela devrait le faire.

.dossier ul li ul {
list-style-image:none
list-style-type:square;
}

EDIT:

Ha! mais oui mais non , le titre m'a enduit plein d'erreurs

En fait la flèche est présente en background sur les liens et pas sur les les listes .

Donc supprimer le background des liens pour ceux de la liste imbriquée et spécifier le list-style-type pour celle-ci.

.dossier ul li ul li a {
color:#840909;
background:none;
text-decoration:none;
}

et

.dossier ul li ul {
list-style-type:square;
}

Modifié par knarf (29 Feb 2008 - 17:54)

Je n'ai plus l'image en background mais je n'ai pas le square

mon css

/* dossier  */
.dossier h2 {
color:#840909;
font:bold 28px/22px "Times New Roman", Times, serif;
letter-spacing:-2px;
margin:0;
padding:10px 0 0 4px;
text-transform:uppercase;
}

.dossier h2 .black {
color:#000;
font-size:27px;
line-height:16px;
}

.dossier h2 .big {
font-size:32px;
line-height:26px;
}

.dossier h3 {
color:#840909;
font:bold 26px/22px "Times New Roman", Times, serif;
letter-spacing:-2px;
margin:0;
padding:10px 0 0 4px;
text-transform:uppercase;
}

.dossier h3 a {
color:#840909;
text-decoration:none;
}

.dossier h3 a:hover {
color:#840909;
text-decoration:underline;
}

.dossier h4 {
color:#000;
font:bold 15px/18px "Times New Roman", Times, serif;
margin:0;
letter-spacing:-1px;
padding:10px 0 0 4px;
}

.dossier h4 a {
color:#000;
text-decoration:none;
}

.dossier h4 a:hover {
color:#000;
text-decoration:underline;
}

.dossier ul {
float:left;
margin:0;
padding:10px 5px 20px 6px;
}

.dossier ul li {
float:left;
font:bold 14px/16px "Times New Roman", Times, serif;
list-style:none;
margin:0;
padding:0;
}

.dossier ul li a {
background:url(../images/arrow-small.gif) no-repeat 0 3px;
color:#000;
display:block;
padding:0 0 0 16px;
text-decoration:none;
}

.dossier ul li a:hover {
background:url(../images/arrow-small-2.gif) no-repeat 0 3px;
text-decoration:underline;
}

.dossier ul li ul {
margin:0;
padding: 0px 0px 0px 7px;
list-style-type:square;

}


.dossier ul li ul li {
float:left;
color:#840909;
font:bold 12px/13px "Times New Roman", Times, serif;
margin:0;
padding:0;
}

.dossier ul li ul li a {
color:#840909;
background:none;
text-decoration:none;
}

Oui cela semble normal

.dossier ul li {
float:left;
font:bold 14px/16px "Times New Roman", Times, serif;
list-style:none;
margin:0;
padding:0;
}

Il est demandé de ne pas mettre de puce sur tous les éléments de listes, donc je dirai qu'il est normal qu'elles n'aparaissent pas.

En supprimant le list-style-type sur le "li" et en le mettant sur "ul" les puces doivent apparaitre enfin pas complètement car avec le positionnement (testt rapide sous firefox) il existe un chevauchement et l'on ne voit que la première.

Donc surement un réglage à voir sur les padding et margin.