Numérotation qui déborde du cadre li [Résolu]

apt · 22/01/2011, 17h12

Bonjour à tous,

Voila un code que j'ai trouvé posté sur un forum, pour lequel son auteur cherche à régler le problème des numéros de liste qui viennent s'afficher hors du titre cadré :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title>Hello!</title>
  <style type="text/css">
  /*<![CDATA[*/
  #wrapper {
  margin: 0;
  padding: 0;
}
 
 
#navMenu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
}
 
#navMenu li {
  margin-left: 5px;
  padding: 0;
  list-style: decimal inside;
  list-style-position: outside;
  float: right;
  position: relative;
  background: #f1f1f1;
}
 
#navMenu ul li a {
  text-align: center;
  font-family: Tahoma;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  border: 1px solid #999;
}
 
#navMenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 32px;
}
 
#navMenu ul ul li {
  padding: 0;
  margin: 0;
}
 
#navMenu ul li:hover ul {
  visibility: visible;
}
 
/******************************************/
 
#navMenu li:hover {
  background: #CCC;
}
 
#navMenu ul li:hover ul li a:hover  {
  background: ##999999;
  color: #fff;
}
 
#navMenu a:hover {
  color: #fff;
}
 
.clearFloat {
  clear: both;
}
  /*]]>*/
  </style>
</head>
 
<body>
<div id="hedar">
<div class="HedRight"></div>
<div class="HedLeft"></div>
</div>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#">Home</a>
<ul>
 
 
<li><a href="#">Link test 1</a></li>
<li><a href="#">Link test 2</a></li>
<li><a href="#">Link test 3</a></li>
<li><a href="#">Link test 4</a></li>
<li><a href="#">Link test 5</a></li>
 
 
</ul><!-- end ineer UL -->
</li><!-- end main Li -->
</ul><!-- end main UL  -->
 
<br class="clearFloat" />
</div><!-- end navMenu -->
</div><!-- end wrapper -->
 
</body>
 
</html>

Merci d'avance.

NoSmoking · 22/01/2011, 18h44

Bonjour,
je commencerais par déplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

border: 1px solid #999;

sur les éléments #navMenu li et non sur les éléments #navMenu ul li a

apt · 22/01/2011, 19h12

Ça ne change rien !

ICI

NoSmoking · 22/01/2011, 19h56

sous IExplorer elle n'y est même pas, quel est ton besoin, avec ou sans ?

ornitho13 · 22/01/2011, 22h26

si tu veux englober le numéro, il faut ajouter un margin négatif et mettre le border et le background sur le "a".

Exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
#navMenu li {
   float: right;
   list-style: decimal outside;
   list-style-position: outside;
   position: relative;
}
#navMenu ul li a {
   background: #F1F1F1;
   border: 1px solid #999;
   color: black;
   display: block;
   font-family: Tahoma;
   height: 30px;
   margin-left: -30px;
   text-align: center;
   text-decoration: none;
   width: 150px;
}

apt · 23/01/2011, 09h38

Voila une modification qui fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#navMenu li {
  margin-left: 5px;
  padding: 0;
  list-style: decimal ;
  list-style-position: inside; // changement de outside en inside
  float: right;
  position: relative;
  background: #f1f1f1;
  border: 1px solid #999;
  height: 30px;
  width: 150px;
  }
 
#navMenu ul li a {
  text-align: center;
  font-family: Tahoma;
  text-decoration: none;
  display: inline; // changement de block en inline 
  color: #000;
  }

S'il n'y a pas d'inconvénient.

ICI

NoSmoking · 23/01/2011, 16h13

il existe toujours un soucis sous IExplorer

ornitho13 · 23/01/2011, 18h57

Salut,

le css que j'avais donné fonctionne sous IE8, teste le.

NoSmoking · 24/01/2011, 20h58

Citation:

Envoyé par ornitho13

Salut,
le css que j'avais donné fonctionne sous IE8, teste le.

Rapport de test
- sous IE 7, les numéros n'apparaissent pas...
- sous Opera v11 les numéros sont dans le texte
- sous Chrome pas de problème
- sous FireFox pas de problème
- sous Safari pas de problème

apt · 26/01/2011, 18h40

Citation:

Envoyé par ornitho13

Salut,

le css que j'avais donné fonctionne sous IE8, teste le.

Il faut en premier installer IE8

apt · 26/01/2011, 18h41

Citation:

Envoyé par NoSmoking

Rapport de test
- sous IE 7, les numéros n'apparaissent pas...
- sous Opera v11 les numéros sont dans le texte
- sous Chrome pas de problème
- sous FireFox pas de problème
- sous Safari pas de problème

Donc pour explorer, selon le test de ornitho13, il faut au moins avoir IE8 pour fonctionner

Bovino · 26/01/2011, 20h35

Citation:

Envoyé par apt

Donc pour explorer, selon le test de ornitho13, il faut au moins avoir IE8 pour fonctionner

J'aurais surtout tendance à dire que pour tous les navigateurs, il faut mettre les listes ordonnées dans des <ol> et non des <ul>

NoSmoking · 26/01/2011, 20h52

Citation:

Envoyé par Bovino

J'aurais surtout tendance à dire que pour tous les navigateurs, il faut mettre les listes ordonnées dans des <ol> et non des <ul>

j'agrée complètement, à preuve l'exemple qui marche sur mes navigateurs et un certain nombre de commentaires inline

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/CSS">
* {
  font-family : Verdana, Arial;
}
#menu {
/*  float : right; /* pour basculer a droite */
/*  height : 28px; /**/
  padding : 2px;
  width : 150px;
  border : 1px solid #999;
}
#menu ol li a {
  display : inline; /* important */
  line-height : 28px;
/*  margin : 0; /* ne pas mettre de margin */
}
#menu ol {
  margin : 0; /* mettre 0 */
  padding : 0; /* mettre 0 */
  list-style-type : decimal;
  list-style-position : inside;
}
#menu li {
  background : #f0f0f0;
/*  margin : 0; /* ne pas mettre de margin */
/*  padding : 0; /* ne pas mettre de padding */
/*  border : 1px solid #999; /* ne pas mettre ici */
/*  height : 25px; /* pas de height */
/*  width : 200px; /* pas de width */
}
#menu li a {
  display : block; /**/
/*  color : white; /**/
  text-decoration : none;
  padding : 0px; /**/
  margin : 10px; /**/
}
#menu li a:hover {
  color : #FFD700;
}
#menu ol li ol {
  display : none;
}
#menu ol li:hover ol {
  display : block; /* OUI */
}
</style>
</head>
<body>
<h1>CSS : OL LI d&eacute;roulant</h1>
<div id="menu">
<ol>
  <li><a href="#">Item 2</a>
    <ol>
      <li><a href="#">Sous-item 1</a></li>
      <li><a href="#">Sous-item 2</a></li>
      <li><a href="#">Sous-item 3</a></li>
    </ol>
  </li>
</ol>
</div>
</body>
</html>

apt · 28/01/2011, 18h49

Merci Bivino, NoSmoking et orniyho13.

22/01/2011, 18h44	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	Bonjour, je commencerais par déplacer Code : Sélectionner tout - Visualiser dans une fenêtre à part border: 1px solid #999; sur les éléments #navMenu li et non sur les éléments #navMenu ul li a
	00

22/01/2011, 19h12	#3
apt Membre du Club Inscription : mai 2002 Messages : 526 Détails du profil Informations forums : Inscription : mai 2002 Messages : 526 Points : 42 Points : 42	Ça ne change rien ! ICI
	00

22/01/2011, 19h56	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	sous IExplorer elle n'y est même pas, quel est ton besoin, avec ou sans ?
	00

23/01/2011, 18h57	#8
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, le css que j'avais donné fonctionne sous IE8, teste le.
	00

28/01/2011, 18h49	#14
apt Membre du Club Inscription : mai 2002 Messages : 526 Détails du profil Informations forums : Inscription : mai 2002 Messages : 526 Points : 42 Points : 42	Merci Bivino, NoSmoking et orniyho13.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email