Position du menu

Version imprimable

Position du menu

bonjour aux forums,

Je vais peut etre etre flou ou mal m'exprimer, je ferais du mieux.
J'utilise un menu que j'ai téléchargé sur internet (tigra menu si c'est dit a quelques uns), il utilise du javascript et css. Pour le placer, il utilise les propriétés top et left.

Voici un bout de code:
Code:

1 2 3 4 5 6 7 8 9 10 11 var MENU_POS= [{ // item sizes 'height': 24, 'width': 148, // menu block offset from the origin: // for root level origin is upper left corner of the page // for other levels origin is upper left corner of parent item 'top': 10, 'left': 220, ...
Mon design est extensible, mais le menu est fixe, et mon client me demande qu'il soit absolument extensible, donc qu'il se centre en redimensionnant la page, un screenshoot pour voir ce qu'il se passe.

N hésitez pas a dire ce que vous en pensez!

Cordialement.

21/05/2007, 16h32
Nesmontou

Salut, tu peux ruser en mettant ton menu dans un div qui aura les mêmes dimensions que ton menu, et tu centre ce div.

Bon développement ;)

cool merci pour ta réponse si rapide!

Je viens d'essayer ce que tu m'as dit mais ca ne centre uniquement les titres.

Mais j'ai essayé deux solutions, j'ai rajouté un div, comme ceci:

ca aligne seulement les titres :

Code:

1
2
3
4
5
6
 
<div align="center">
        <script language="JavaScript">
		new menu (MENU_ITEMS, MENU_POS);
	</script>
</div>

Ca c'est le code qu'il génére, j'ai donc rajouter align="center" dans le bloc div, et il a centré seulement les titres (car il utilise deja des div!)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
	// generate item s HMTL
	document.write (
		'<a id="e' + o_root.n_id + '_'
			+ this.n_id +'o" class="' + this.getstyle(0, 0) + '" href="' + this.a_config[1] + '"'
			+ (this.a_config[2] && this.a_config[2]['tw'] ? ' target="'
			+ this.a_config[2]['tw'] + '"' : '')
			+ (this.a_config[2] && this.a_config[2]['tt'] ? ' title="'
			+ this.a_config[2]['tt'] + '"' : '') + ' style="position: absolute; top: '
			+ this.n_y + 'px; left: ' + this.n_x + 'px; width: '
			+ this.getprop('width') + 'px; height: '
			+ this.getprop('height') + 'px; visibility: hidden;'
			+' z-index: ' + this.n_depth + ';" '
			+ 'onclick="return A_MENUS[' + o_root.n_id + '].onclick('
			+ this.n_id + ');" onmouseout="A_MENUS[' + o_root.n_id + '].onmouseout('
			+ this.n_id + ');" onmouseover="A_MENUS[' + o_root.n_id + '].onmouseover('
			+ this.n_id + ');" onmousedown="A_MENUS[' + o_root.n_id + '].onmousedown('
			+ this.n_id + ');"><div  align=center id="e' + o_root.n_id + '_'
			+ this.n_id +'i" class="' + this.getstyle(1, 0) + '">'
			+ this.a_config[0] + "</div></a>\n"
		);

Je me dit qu'il n'y a pas de solution !? parce que les propriété top et left sont utilisés donc on lui donne des points précis ou s'afficher !? ...

Je suis a votre ecoute de vos propositions.

Cordialement.

Re, j'ai dû mal m'exprimer, en fait, il faut centrer le div et non son contenu comme tu l'as fait. Quelque chose comme ça
Code:

1 2 3 4 5 6 7 8 9 <div id="global"> <div id="menu_global"> <script language="JavaScript"> new menu (MENU_ITEMS, MENU_POS); </script> </div> ... </div>
CSS
Code:

1 2 3 4 5 6 7 8 9 10 #global { text-align: center; // Alignement au centre pour IE } #menu_global { height: 24px; // Le même que ton menu margin: 0 auto; // Alignement au centre text-align: left; width: 148px; // Le même que ton menu }
Pour les top et left de ton menu javascript tu mets 0

Je n'ai pas testé, mais l'idée est là

Bon développement ;)

22/05/2007, 16h10
miya

Merci de preter tant d'attention au post.

J'ai bien essayé ta méthode mais sans succés.

Peut etre si tu as 10 minutes pour tester chez toi, je t'ai mis une archive avec le minimun dedans, une version ou j'ai apporté tes modifications (dossier : Nesmontou) et la version initiale.

Salut, j'ai testé ça

Code:

1
2
3
4
5
<div id="menu_global">
  <script language="JavaScript">
    new menu (MENU_ITEMS, MENU_POS);
  </script>
</div>

CSS

Code:

1
2
3
4
5
6
7
8
#menu_global {
  background-color: red;
  display: block;
  left: 50%; // Centre de l'écran
  margin: 0 auto;
  position: relative;
  margin-left: -261px; // Largeur du menu divisée par 2
}

Bon développement ;)

23/05/2007, 12h10
miya

Ah c'est magique!

Si tu avais 2min de plus a m'accordé, j'aimerais bien que tu m'expliques!
Sinon c'est pas grave

Merci beaucoup :D
23/05/2007, 12h14
Nesmontou

Pas de souci, en fait le principe est de positionner ton menu dans un bloc qui a la même taille et que l'on va pouvoir positionner où on veut (je n'ai pas regardé s'il y avait une classe CSS directement pour le menu)

Pour le positionner, c'est simple, on le place à 50% de ta page (la moitié) mais cette position correspond au bord gauche qui sera donc à 50% du bord gauche de ta page.

Pour positionner correctement ton menu, il faut donc décaler un peu le bloc vers la gauche ; ce décalage correspond à la moitié de la taille du bloc. D'où le -261px.

Voilà, j'espère avoir été assez clair

Bon développement ;)

PS : n'oublie pas de cliquer sur :resolu: si cette solution te convient ;)
23/05/2007, 14h32
miya

C parfaitement clair :)

Merci