Bonjour à tous amis du zéro.
Je viens de (presque)terminer mon premier site que vous pouvez visionner
ici.
Mon soucis concerne la compatibilité de mon menu déroulant horizontal.
Et j'ai deux problèmes.
Je m'explique :
Problème 1
- sur certain ordinateur (windows xp) comme le mien, les sous menus apparaissent parfaitement à leur place cad à droite des menus. Et cela que ce soit sur Firefox ou IE.
- sur d'autres ordinateurs (sur windows xp ou vista), les sous menus apparaissent par dessus les menus (cas qu'on ne voit pas les menus).
Je tiens à préciser que le sous menu est entièrement réaliser en html/css (je sais que ça aurait été plus facile en java mais je ne m'y connais pas du tout

)
Problème 2
Sur n'importe quel navigateur lorsque je met une fenêtre au niveau inférieur (cas le cadre de la page en plus petit), mes sous menus se décalent.
Alors après avoir cherché j'ai trouvé que le problème venait d'une "position : absolute", que j'ai donc changé en "position : relative". Mais là surprise, ça donne
ça.
Je vous met la partie du code css en question : (si vous avez besoin de la partie html demandez moi).
Code : CSS 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 | /* Left sidebar and menu */
#leftside {
margin:-30px 10px;
padding:0;
width: 150px;
float:left;
}
#leftside ul {
list-style:none;
margin:0 0 18px;
padding:0;
width: 150px;
}
#leftside ul li {
/*position: relative; (si on le met, ne marche pas avec IE7)*/
padding:0;
clear:both;
}
#leftside ul li a {
background: repeat-x bottom left #f4f4f4 ;
border-bottom:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-top:1px solid #d8d8d8;
border-left:1px solid #d8d8d8;
color:#505050;
font-size:1em;
font-weight:700;
padding:5px 1px 5px 5px;
text-decoration:none;
width:138px;
float:left;
}
#leftside ul li.extend a {
background: url(img/fleche.gif) right no-repeat #f4f4f4 ;
}
#leftside .announce {
background: repeat-x bottom left #f4f4f4;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #ccc;
border-right:1px solid #d8d8d8;
border-top:1px solid #d8d8d8;
clear:left; color:#505050;
line-height:1.3em;
margin: 100px 0;
padding:5px 5px 5px;
width:134px;
}
#leftside p,.announce p {font-size:0.9em;}
#leftside ul ul li a {
margin-bottom:0px;
}
#leftside ul ul {
position: absolute;
font-size:0.9em;
margin:0 0 0 15px;
padding:0 0 5px 0;
width:150px;
left: 266px; /*décalage des sous menus vers la droite*/
display:none;
}
#leftside ul.niveau1 li.sousmenu:hover ul.niveau2 ,
#leftside ul.niveau1 li.extend:hover ul.niveau2 {
display:block;
}
#leftside ul li a:hover{
background:repeat-x bottom left #C9C9C9;
border-bottom:1px solid #b0b0b0;
border-right:1px solid #b0b0b0;
border-top:1px solid #b0b0b0;
}
#leftside ul li.extend a:hover {
background: url(img/fleche.gif) right no-repeat #C9C9C9 ;
}
#leftside ul li.extend:hover ul.niveau2 li a{
background: #f4f4f4;
background-image: none ;
}
#leftside ul li.extend:hover ul.niveau2 li a:hover{
background: #C9C9C9;
background-image: none ;
}
|
J'aimerai donc que vous disiez si, pour vous, dans le problème 1, les sous menu sont au dessus de vos menu (et dans ce cas preciser config et naviateur). Et dans le problème 2 résoudre ce prolème lié à la position : relative.
Merci beaucoup.
PS: si vous avez des critiques / remarques sur le site, n'hésitez pas
PS2: dsl je n'arrive pas à éditer le titre pour corriger les 2 fautes à incompatibilités.
Édité
le 12/05/2008 à 01:47:06
par
karlitot