En faisant ça le problème reste toujours le même car si j'agrandis ma fenêtre, la barre de menu passe par dessus le logo IRD (c'est à cause de #menu {position:absolute;...})
Donc on retourne au point de départ.
Version imprimable
En faisant ça le problème reste toujours le même car si j'agrandis ma fenêtre, la barre de menu passe par dessus le logo IRD (c'est à cause de #menu {position:absolute;...})
Donc on retourne au point de départ.
:marteau:
Bon, je vais regarder ça plus en détail et je te tiens au courant.
Je te remercie, j'attends avec impatience le jugement :D
essaye voir comme ça :
-j'ai remis position:absolute pour #menu ainsi que right et top.
-j'ai également remis #menu ul li float: right
-j'ai supprimé position:absolute pour #menu ul li ul
Bref, si tu ne veux pas comparer ta CSS avec la mienne fais un copier coller. D'ailleurs je crois que j'ai oublié de préciser certaines modifications.:oops: Mais une chose est sûre c'est cette CSS qu'il faut utiiser pour le menu.
par contre tu verras le right de 20px de #menu ne va pas (mais laisse le quand même). Du coup, je pense qu'un script fixant de manière dynamique cette valeur est ce qu'il y a de mieux :Code:
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
66ul, li { border:none; margin: 0px; padding: 0px; list-style-type: none; } #menu { position: absolute;/*:absolute;*/ /*left: 23%;*/ right: 20px; top: 55px; width: 100%; /* précision pour Opera */ border:none; margin: 0px; padding: 0px; list-style-type: none; } #menu ul { border: none; padding: 0px; margin: 0px; } #menu ul li { float:right; width: 110px; cursor: pointer; text-align: center; font-weight: bold; display: block; margin: 1px 0px; } #menu ul li ul { display: none; clear: left; /*position: absolute;*/ width: 110px; } #menu ul li ul li { text-align: center; background-color: #ffffff; color:#000000; /*rendre les menus opaques => opacity:0.8; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; Attention non conforme !!!*/ } #menu ul li ul li a { color: #0083d7; background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; text-decoration: none; display: block; height: 100%; border: 1px solid #000000; } #menu ul li ul li a:hover { color: #fff; background-color:#0083d7; }
et le code HTMLCode:
2
3
4
5
6
7
8
9
10function margeDroiteMenu() { var page = document.getElementById("centrer"); var lgPage = page.offsetWidth; var margeDte = (document.body.offsetWidth - lgPage)/2; if (margeDte<0) margeDte = 0; document.getElementById("menu").style.right = margeDte+"px"; }
Testé avec IE et FF sous 800x600 et 1024x768Code:
2<body onload="margeDroiteMenu()" onresize="margeDroiteMenu()">
je viens de le tester et c'est bon ça marche à partir de 800*600. Merci beauuuuucoup.
Maintenant j'aimerais arriver à le régler pour tout type de résolution (car quand on passe en dessous de 800*600, ça fait n'importe quoi donc j'essaie de travailler sur le javascript mais on dirait qu'il me prend un coup les valeur à partir du div center et un couup à partir du bord de ma fenêtre.
De plus j'ai l'impression que IE n'aime pas les valeur négative pour left et right non?
En fait ça n'est pas bon, si tu rapetit vraiment ta page et que tu la ré-agrandit, le javascript ne fonctionne plus (ne me demande pas pourquoi :( )
Il faudrait en fait pouvoir dire au menu d'être en absolue par rapport à ma div centrer et non par rapport à l'écran.
sans doute à cause du testCitation:
(...)quand on passe en dessous de 800*600, ça fait n'importe quoi (...)
De plus j'ai l'impression que IE n'aime pas les valeur négative pour left et right non?
Code:
2
3if (margeDte<0) margeDte = 0;
Tu ne travailles pas en sur un écran de 200px de largeur sur 1000px de haut quand même ? La résolution 800x600 est quand même un minimum. Bon maintenant la page web n'est pas forcément maximisée.Citation:
Envoyé par trotters213
Par ailleurs l'événement onresize que j'ai défini dans le body se réalise quand tu laches la souris.
Quand tu définis en absolue c'est par rapport au document. En relatif c'est par rapport à l'élément parent. L'écran n'a rien à voir là-dedans.Citation:
le javascript ne fonctionne plus (ne me demande pas pourquoi :( )
Il faudrait en fait pouvoir dire au menu d'être en absolue par rapport à ma div centrer et non par rapport à l'écran.
La position droite (!=marge droite) du menu est définie à partir des dimensions du document (document.body.offsetWidth) et du div "centrer".
[edit]je continue de regarder comment améliorer le script et la présentation du menu ;)[/edit]
j'ai fait de nouvelles modifcations :
-CSS du menu ;
-script : j'ai supprimé la fonction de cacul de la marge; En contre-partie j'ai modifié ta fonction montre() : j'ai simplement ajouté un code qui calcule la position des menus. Plus de problème sous IE et FF en grande ou en petite résolution, lors du redimensionnement etc... ;
-j'ai supprimé également le terme javascript qui se trouvait dans les onmouseover et onmouseout : cela fait planter FF.
Tout est dans le zip :
Je me prosterne :hola: :ave:
Tu seras canonisé je pense.
Tout fonctionne parfaitement.
J'avais juste un léger souci de compatibilité avec Opera car il considère d.parentNode.offsetLeft différemment que IE et FF : il prend la distance entre le bord de la fenêtre et l'élément d tandis que IE et FF prènent la distance entre le bord du conteneur et l'élément j'ai donc corrigé en faisantVraiment merci, merci, merci, merci et encore merci beaucoup à toi Auteur.Code:
2
3
4
5
6
7
8
9
10var agt=navigator.userAgent.toLowerCase(); var is_opera = (agt.indexOf("opera") != -1); if (d) { d.style.top = "30px"; d.style.display='block'; if (is_opera) d.style.left = parseInt(d.parentNode.offsetLeft-document.getElementById('liens').offsetLeft)+"px"; else d.style.left = parseInt(d.parentNode.offsetLeft)+"px"; }
Merci beaucoup également à BisounoursJos qui a été là dès le début.
See you soon.
Ouais, désolé j'ai lâché l'affaire, ne sachant plus quoi faire pour résoudre ton problème. ^^Citation:
Envoyé par trotters213
Chapeau bas à Auteur, vraiment du bon boulot !
J'aurais fait pareil:mrgreen:Citation:
Envoyé par BisounoursJos
j'ai toujours su qu'au fond de moi un grand artiste était en sommeil :lun: La classe quoi.
De rien ;)Citation:
Envoyé par trotters213
Il faut parfois prendre un peu de recul sur certains points et ne pas hésiter à reprendre les choses dès le début (ce qui n'est pas toujours évident) ;)Citation:
Ouais, désolé j'ai lâché l'affaire, ne sachant plus quoi faire pour résoudre ton problème.
Ici, je suis parti avec cette fonction de calcul des marges qui ne donnait pas satisfaction. Du coup je l'ai mise de côté, et je suis revenu au code d'origine pour proposer une autre possibilité.