Discussion :

[ledisciple]

Bonjour

J'ai un petit menu en css sur mon site, grâce à developpez.

J'ai mis mon menu dans une div avec width: 106px . Dans mon menu la taille de mon #menu_gauche li est de 100px


Normalement, #menu_gauche li étant plus petit, il doit rentrer facilement dans ma div. Sauf que j'ai un maximum de débordement sur la droite, que j'ai crois être le retrait du aux listes à puce. J'ai essayé de placer "list-style-position:inside;" pour palier ce débordement, mais rien n'y fait...

pour plus de précision voici le code html :

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
 
<div class="contenant_colonne_gauche">
<!--menu gauche-->
<div id="menu_gauche">
<ul class="niveau1">
  <li>
    Seniors
    <ul class="niveau2">
      <li>equipe 1</li>
      <li>equipe 2</li>
      <li>equipe 3</li>
    </ul>
  </li>
</ul>
<ul class="niveau1">
  <li>
    18 ans
    <ul class="niveau2">
      <li>equipe 1</li>
      <li>equipe 2</li>
      <li>equipe 3</li>
    </ul>
  </li>
</ul>
<ul class="niveau1">
  <li>
    15 ans
    <ul class="niveau2">
      <li>equipe 1</li>
      <li>equipe 2</li>
      <li>equipe 3</li>
    </ul>
  </li>
</ul>
<ul class="niveau1">
  <li>
    13 ans
    <ul class="niveau2">
      <li>equipe 1</li>
      <li>equipe 2</li>
      <li>equipe 3</li>
    </ul>
  </li>
</ul>
<ul class="niveau1">
  <li>
    benjamins
    <ul class="niveau2">
      <li>equipe 1</li>
      <li>equipe 2</li>
      <li>equipe 3</li>
    </ul>
  </li>
</ul>
<ul class="niveau1">
  <li>
    poussins
    <ul class="niveau2">
      <li>equipe 1</li>
      <li>equipe 2</li>
      <li>equipe 3</li>
    </ul>
  </li>
</ul>
<ul class="niveau1">
  <li>
    Débutants
    <ul class="niveau2">
      <li>equipe 1</li>
      <li>equipe 2</li>
      <li>equipe 3</li>
    </ul>
  </li>
</ul>
<ul class="niveau1">
  <li>
    Arbitres
    <ul class="niveau2">
      <li>Arb 1</li>
      <li>Arb 2</li>
      <li>Arb 3</li>
    </ul>
  </li>
</ul>
<ul class="niveau1">
  <li>
    Fitness
    <ul class="niveau2">
      <li>equipe 1</li>
    </ul>
  </li>
</ul>
</div>

et le css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/*	menu_gauche	*/
#menu_gauche ul ul {display: none; left: 104px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid transparent;} 
#menu_gauche  li {
	list-style-type: none;
	position: relative;
	width: 100px;
	background-color:transparent;
	padding: 2px;
	margin: 0px;
	background-image: url(/essence/images/bg.png);
}
#menu_gauche li:hover {background-color: transparent;}
#menu_gauche li:hover ul.niveau2{display: block;}

merci pour vos précieuses précisions.

[desert]

Bonjour,
C'est sans doute dû au fait que tu as oublié de mettre le padding et le margin de ta balise ul principale à 0 vu que tu l'as fait pour les sous-menus.

Code css :

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

1
2
3
4
#menu_gauche ul {
    padding: 0;
    margin: 0;
}

[ledisciple]

Bonjour,
C'est sans doute dû au fait que tu as oublié de mettre le padding et le margin de ta balise ul principale à 0 vu que tu l'as fait pour les sous-menus.

Code css :

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

1
2
3
4
#menu_gauche ul {
    padding: 0;
    margin: 0;
}

trop fort !!! Enfin, celà me met la bonne claque de ma médiocrité en pleine figure ...

merci !!