Discussion :

[miya]

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 :

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

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.

[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

[miya]

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 :

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

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 javascript :

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
 
	// 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.

[Nesmontou]

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 :

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

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 :

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

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

[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.

[Nesmontou]

Salut, j'ai testé ça

Code :

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

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

CSS

Code :

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

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