Discussion :

[laurentSc]

Bonjour,

j'ai une feuille de style unique pour toutes les pages (<link href="../css/style-menu2.css" rel="stylesheet"/>) ; et pourtant, quand je passe d'une page quelconque à cette page , le menu se décale. Cela provient probablement du CSS lié au menu, mais je n'arrive pas à trouver...

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
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
body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;font-size:2;background: #ebebeb;width: 900px;margin: 100px auto;color: #666;}
a {color: #333;}
 
#nav {margin: 0;padding: 7px 6px 0;background: #7d7d7d url(../images/gradient.png) repeat-x 0 -110px;line-height: 100%;
	border-radius: 2em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
}
#nav li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none;}
 
/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding:  8px 20px;margin: 0;
	-webkit-border-radius: 1.6em;
	-moz-border-radius: 1.6em;
}
#nav a:hover {background: #000;color: #fff;}
 
/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(../images/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 0px #f8f8f8;
}
 
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: non;border: none;color: #666;
}
#nav ul a:hover {background: #0078ff url(../images/gradient.png) repeat-x 0 -100px !important;
	color: #fff !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}
 
/* dropdown */
#nav li:hover > ul {display: block;}
 
/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 35px;left: 0;
	background: #ddd url(../images/gradient.png) repeat-x 0 0;
	border: solid 1px #b4b4b4;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#nav ul li {float: none;margin: 0;padding: 0;}
 
/*#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}*/
 
/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}
 
/* rounded corners of first and last link */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
 
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
 
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}
 
/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;} 
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}

[JefReb]

Avec un petit bout de code html ce serait mieux non?
ou dans codepen aussi pour voir

[Bovino]

le menu se décale

Je ne constate pas ce que tu décris... enfin, à moins que ce dont tu parles est le décalage dû à la présence de l’ascenseur...

[laurentSc]

Surpris de ta remarque, j'ai d'abord regardé avec un autre navigateur (IE8 puis FIREFOX) et comme même comportement, j'ai regardé sur un autre PC, et là plus de problème...Et pourtant, sur les 2, il y a Seven ; d'où ça peut venir ?

[Bovino]

Du cache probablement...

[laurentSc]

Pourtant, un redémarrage du PC devrait l'effacer, non ?

[NoSmoking]

Bonjour,
je ne constate aucun décalage avec mon écran suffisamment grand pour qu'il n'y ait pas de scrollBar verticale.

à moins que ce dont tu parles est le décalage dû à la présence de l’ascenseur...

[laurentSc]

J'ai fini par trouver l'explication : effectivement sur certaines des pages, il finissait par s'apercevoir de la nécessité d'un ascenseur vertical d'où le décalage quand il le rajoutait ; j'ai supprimé ce décalage en ajoutant la propriété CSS

Code :

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

overflow-y: scroll;