[CSS] : un espace apres un UL, j'arrive pas à le supprimer.
Bonjour,
Alors voilà j'ai un probleme : c'est un espace qui me fait tout décaler.
avant tout, voici une URL pour que vous puissiez voir de quoi je parle :
http://fbh2.free.fr/testmenu/3.html
passez la souris dessus "d'autres tests" (un menu apparait) descendez la souris dans ce menu (par exemple sur le mot "avec") et un sous menu apparait (un UL avec des LI A à l'interieur) mais ce nouveau sous menu ajoute un espace dans le menu précedant.
Ce probleme n'est PAS present sous Firefox, mais sous IE.
donc quand la solution sera donnée, il suffira de faire un petit "* html" pour corriger ce probleme sous IE.
Parlons maintenant un peu de cette page :
il s'agit d'un menu à deux niveaux qui à les propriétés suivantes :
- pas besoin de JAVASCRIPT pour firefox. (javascript assez léger sous IE)
- pas de bug avec les SELECT sous IE.
voilà, donc une fois ce bug corrigé ca donnerait un truc bien sympas.
pour info, je me suis basé sur : http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/Select-tag-overlap-in-IE mais il n'a pas le bug puisque qu'il n'est pas multi-niveau, lui. (bouh...)
La structure du document html est tres simple, schematiquement :
UL LI A [UL LI A [UL LI A]]]
que des balises UL pour les menus, du LI pour les items et du A pour le lien.
le 1er menu est de classe "menu" (pas tres original)
par exemple :
Code:
1
2
3
4
5
6
7
8
9
10
|
<ul class="menu">
<li><a href="#">Test</a>
<ul>
<li><a href="#">de</a></li>
<li><a href="#">differents</a></li>
<li><a href="#">menu</a></li>
</ul>
</li>
<li>.... etc... |
tout se passe dans le CSS, que voici :
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
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
ul.menu {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
background-color: #b3bfce;
height: 22px;
/*-fab-*/
position:absolute;
top:10px;
left:36px;
display:block;
z-index:2000;
}
ul.menu li {
margin-top: 3px; /* un centrage à la marge */
margin-bottom:-3px; /* IE :reduit de 3 px */
text-indent : 5px;
/* This allows each li to line up next to each other on a single line */
display: inline;
/* This allows each item to be horizontal. */
float: left;
/* This will be used later for dropdowns */
position: relative;
}
ul.menu li a {
/* change each anchor item to a block so that it takes up space */
display:block;
width:138px;
text-decoration: none;
/* WIN IE5 hack */
height: 19px; /*---*/
}
.menu li a:hover {
color: #333;
}
/* dropdown list styles */
.menu li ul {
display: none;
position: absolute;
margin: 0;
padding: 0; /*0 0 2px 0;*/
top: 19px;/*22-3px*/
/* IE 5 browsers will use the next two lines to display a faux drop shadow */
border: 0 solid #474747;
/* Mozilla */
-moz-opacity: .9;
/* Safari 1.1 */
-khtml-opacity: .9;
/* Safari 1.2 */
opacity: .9;
}
.menu li > ul {
top: auto;
left: auto;
/*-fab : deplacé de .menu li ul -*/
padding: 0 0 2px 0; /*est-ce que ca marche ? */
}
* html .menu li ul {
border-width: 0 2px 2px 0;
display: block;
left: -10000px; /* pourquoi ?, parceque..*/
}
.menu li:hover ul, .menu li.over ul, .menu li.sfhover ul { /* lists nested under hovered list items */
display: block;
left: 0px;
}
/*-fab : on cache les menus de 2eme niveaux-*/
.menu li:hover ul ul, .menu li.over ul ul, .menu li.sfhover ul ul {
display: none;
}
.menu li ul li {
background-color: #b8cbe5;
margin: 0;
padding: 0;
/* for IE 5.x */
margin-left: -1px;
display: block;
float: none;
/* This allows Mozilla based and Safari browsers to display the faux drop shadow on the right. */
border-right: 2px solid #474747;
/* Set the border to 0 for IE */
border-right-width: expression("0");
voice-family: "\"}\"";
voice-family:inherit;
margin-left: 0;
}
/* This allows Mozilla based and Safari browsers to display the faux drop shadow on the bottom. */
.menu li ul li:last-child {
border-bottom: 2px solid #474747;
}
/* IE 5.01 Hack, because IE 5.01 does not recognize the first style. This is thrown away then
the other styles are applied. */
.menu li ul a {
}
.menu li ul a {
color: #666;
padding: 2px 4px;
height: auto;
width: 140px;/*151*/
voice-family: "\"}\"";
voice-family:inherit;
width: 140px;/*143*/
}
.menu li ul a:hover {
}
.menu li ul a:hover {
background-color: white;
color: #333;
}
/*-fab-*/
.menu li li:hover ul, .menu li li.over ul, .menu li li.sfhover ul {
/* lists nested under hovered list items */
display: block;
position:absolute;
left: 150px;
top:0px;
}
* html .menu li li.over ul, * html .menu li li.sfhover ul /* special pour IE */
{left: 140px;
float:left;
position:absolute;
} |
Bon, c'est un peu lourds (il ya des trucs de tests...), mais c'est j'espere comprehensible.
D'avance merci.
à l'aide....
PS : si vous êtes interrésés,
le CSS : http://fbh2.free.fr/testmenu/div/3.css,
le JS (IE) http://fbh2.free.fr/testmenu/div/3iefx.js
