Conflit li et sprites

Version imprimable

Bonjour,

J'ai un menu en sprite et j'utilise également par ailleurs les LI.
Et j'ai un petit conflit entre les 2.
Dans mon LI, j'utilise une image et je retrouve cette image de LI dans mes menus 8O

Mon code :

Code:

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
li {
  margin-left: 20px;
  list-style-image: url("Puce.gif");
  list-style-type: disc;
  list-style-position: outside;
}
 
ul {
  margin: 0;
  padding: 0;
}
 
.categorie {
  list-style-type : none;
  font-family: "Helvetica", "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
}
 
.categorie li a, .categorie li a:link, .categorie li a:visited {
  height: 50px;
  width: 100px;
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 50px;
  text-align: center;
  background: url(ImgVideMenu.png) no-repeat 0 top;
  color: #6c3306;
  text-decoration:none;
  float: left; 
}
 
.categorie li.souscat a:hover {
  color: #f4ebda;
  background-position: 0 bottom;
}

Mon Code html pour info :

Code:

1
2
3
4
5
6
 <ul class="categorie">
    <li class="souscat"><a href="#">Opera</a></li>
    <li class="souscat"><a href="#">WordPress</a></li>
    <li class="souscat"><a href="#">Firefox</a></li>
    <li class="souscat"><a href="#">PHP</a></li>
  </ul>

Une idée ?
Merci pour votre aide

Thais

26/12/2014, 19h29
NoSmoking
Bonjour,

Citation:

Dans mon LI, j'utilise une image et je retrouve cette image de LI dans mes menus 8O

Alors là rien compris...

Une chose est sûr c'est que tu n'as pas une grande cohérence
Citation:
Code:

1 2 3 4 5 6 7 8 9 li { margin-left: 20px; list-style-image: url("Puce.gif"); list-style-type: disc; list-style-position: outside; } .categorie { list-style-type : none; }

Bon Ok, la prochaine fois, j'essayerai de ne pas poster sous les effets de l'alcool :weird:

Donc je reprend.
Dans mon site, j'utilise le CSS suivant pour gérer mes LI, notemment en rajoutant une petite puce à la place de celle existante.
Code:

1 2 3 4 5 6 li { margin-left: 20px; list-style-image: url("Puce.gif"); list-style-type: disc; list-style-position: outside; }
Et en ce moment, je suis en train de modifier mon menu pour le gérer avec des sprites.
Hors les sprites utilisent la notions de LI, j'ai donc rajouter dans mon CSS la partie ci-dessous.
Et le résultat est que je retrouve la puce "puce.gif" dans mon menu, le list-style-type : none; dans cette partie était pour essayer de ne pas faire apparaitre de puce ... mais ca ne marche pas
Code:

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 ul { margin: 0; padding: 0; } .categorie { list-style-type : none; font-family: "Helvetica", "Helvetica Neue", "Arial", sans-serif; font-weight: bold; } .categorie li a, .categorie li a:link, .categorie li a:visited { height: 50px; width: 100px; display: block; text-transform: uppercase; font-size: 12px; line-height: 50px; text-align: center; background: url(ImgVideMenu.png) no-repeat 0 top; color: #6c3306; text-decoration:none; float: left; } .categorie li.souscat a:hover { color: #f4ebda; background-position: 0 bottom; }
Est ce plus clair ? :oops:

Thais

27/12/2014, 10h41
NoSmoking

Pour ne pas faire apparaître la "puce" sur une liste il te suffit de mettre un list-style: none; sur la UL

:faq: Comment remplacer les puces par défaut par une image perso ?
27/12/2014, 11h47
thais781
J'aie essayé cette astuce, mais ca marche pas, j'aie même doublé :
Code:

1 2 3 4 5 6 7 ul { margin: 0; padding: 0; list-style: none; list-style-type: none; }
Mais sans réussite .... :?

Thais

Aucune raison que cela ne marche pas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS: list-style:none</title>
<style>
ul{
  list-style:none;
  margin:0;
  padding:0;
}
</style>
</head>
<body>
  <ul class="categorie">
    <li class="souscat"><a href="#">Opera</a></li>
    <li class="souscat"><a href="#">WordPress</a></li>
    <li class="souscat"><a href="#">Firefox</a></li>
    <li class="souscat"><a href="#">PHP</a></li>
  </ul>
</body>
</html>

J'aie trouvé une première piste en modifiant mon css
En remplacant :
Code:

1 2 3 4 5 .categorie { list-style-type : none; font-family: "Helvetica", "Helvetica Neue", "Arial", sans-serif; font-weight: bold; }
par
Code:

1 2 3 4 5 .categorie, .categorie li { list-style-type : none; font-family: "Helvetica", "Helvetica Neue", "Arial", sans-serif; font-weight: bold; }
Ca m'enleve la puce mais pas l'espace avant ....

Thais

Et avec un margin à 0, c'est bon :)

Code:

1
2
3
4
5
6
7
8
.categorie, .categorie li {
  margin: 0;
  padding: 0;
  list-style-type : none;
  font-family: "Helvetica", "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
  list-style: none;
}

Thais