Agrandir un div en fonction de l'agrandissement de la fenetre

Voila mon pb est réel, gérant la résolution des utilisateurs, j'ai un menu avec une page centrale qui sont centrées via la technique des marges négatives vues sur vos tutoriaux, ca s est nickel.
Par contre j'utilise un menu javascript qui lui marche avec des pixels et non des pourcentages pour se placer.
J ai donc une fonction qui en fonction de la taille de la fenetre, calcul la position où doit se trouver le menu.

Le probleme est qu'il faut que je fasse f5 pour recharger la page, ce qui ne me convient guere voir pas.

donc j aimerai que mon div (et seulement le div si possible) se recharge au moment du "resizage" de la page.

du style :
<div onResize="reload">
menu etc...... avec calcul....
</div>

Le probleme est que ca ne marche pas, je ne sais pas comment recharger juste un div.
Merci de votre aide

pourquoi "recharger" ? il faut juste changer sa position non ? ça peut se faire en javascript.

mais c'est quand même un peu barbare et pas du tout recommandé, tu ne devrais pas avoir besoin de ça, essaie plutôt de ne pas positionner ton menu en absolu, ou alors fait-le par rapport au bloc qui reste centré, et non pas au body.

Ben en haut j ai un bloc centré qui est à la banniere, et juste dessous j ai deux blocs. Un pour le menu, un pour la page centrale.
Le truc c'est que je veux qu'ils soient centrés en toute résolution.
Donc j'ai utilisé les marges négatives avec un div qui englobe menu + centre qui font une taille de 780.
Dans ce div j ai un div où il y a le menu.
Et dans ce menu j'ai le tableau du menu qui se présente comme ca, tu verras au début du script je fais le calcul de la position en x et y, ce que j aimerai c est que ca se refasse automatiquement au resizage de la page

<div id="wrap">
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#f7efde">
<tr><td><b><a href="" class="mainlevel-trans" id="menu1">Association</a></td></tr>
<tr><td><b><a href="" class="mainlevel-trans" id="menu2">Actualités</b></a></td></tr>
<tr><td><a href="" class="mainlevel-trans" id="menu3"><b>Contacts utiles</b></a></td></tr>
<tr><td><a href="" class="mainlevel-trans" id="menu4"><b>Liens</b></a></td></tr>
<tr><td><a href="" class="mainlevel-trans" id="menu5"><b>La boutique</b></a></td></tr>
<tr><td><a href="" class="mainlevel-trans" id="menu6"><b>Accès membres</b></a></td></tr></table></div>
changer();
			<script type="text/javascript" language="javascript">
			if (TransMenu.isSupported()) {
				TransMenu.updateImgPath('menu/');
				x=(-document.body.clientWidth+780)/2+20;
				
				var ms = new TransMenuSet(TransMenu.direction.right,x, y, TransMenu.reference.topRight);				
			

			
				var tmenu1=ms.addMenu(document.getElementById("menu1"));
				tmenu1.addItem("Accueil","url du lien ou aller",0,0);
				tmenu1.addItem("Notre Association","",0,0);
				tmenu1.addItem("Bureau et conseil","",0,0);
				tmenu1.addItem("Membres d'honneur","",0,0);
				tmenu1.addItem("Adhérer","",0,0);


				var tmenu2=ms.addMenu(document.getElementById("menu2"));
				tmenu2.addItem("Les évènements","",0,0);
				tmenu2.addItem("Les nouvelles","",0,0);
				tmenu2.addItem("Missions et ESR","",0,0);
				tmenu2.addItem("Activités des autres associations","",0,0);
				tmenu2.addItem("Brèves","",0,0);
				tmenu2.addItem("Textes en langues étrangères","",0,0);



				var tmenu3=ms.addMenu(document.getElementById("menu3"));
				tmenu3.addItem("Bureaux réserves","",0,0);
				tmenu3.addItem("Conseillers réserves","",0,0);

				var tmenu4=ms.addMenu(document.getElementById("menu4"));
				tmenu4.addItem("France","",0,0);
				tmenu4.addItem("Autres Pays","",0,0);
				tmenu4.addItem("Organisations internationales","",0,0);

				
				document.getElementById("menu4").onmouseover = function() {
					ms.hideCurrent();
				}
				
				document.getElementById("menu5").onmouseover = function() {
					ms.hideCurrent();
				}
				
				document.getElementById("menu6").onmouseover = function() {
					ms.hideCurrent();
				}
				
				TransMenu.renderAll();
			}
			init1=function(){TransMenu.initialize();}
			if (window.attachEvent) {
				window.attachEvent("onload", init1);
			}else{
				TransMenu.initialize();			
			}
			</script>
		<!-- End menu -->

Modifié par steph21 (09 Jan 2007 - 16:33)

J'ai un peu des doutes sur cettes techniques des marges négatives... Si tu réduit ta fenêtre à un dimension inferieure que celle de ton div principal, un partie de ce div disparait à gauche, pas super accessible! (surtout qu'il y de plus en plus de petits appareils avec de petit écran. Un tecnique beaucoup plus simple c'est de mettre ton body en text-align center(pour IE) et ton div principal avec auto (pour les autres navigateur), ensuite tu mets ton menu en float left avec ta taille definie, puis l'autre div avec une marge de cette même dimention. Sinon je te conseil cet article http://www.alistapart.com/articles/switchymclayout, ça ce complique mais c'est super interressant.

Je suis ok avec ca mais je veux le regler un peu plus tard mais merci tu as raison.
Mais la j'aimerai vraiment regler mon probleme de menu qui me semble vraiment simple mais dont je ne trouve pas la solution. Dans le code je calcule exactement où le placer (la commande x=.......) en fonction de la taille de la fenetre. Mais ce placement ne se fait qu'apres un f5, et j aimerai juste que soit cette partie de code se rejoue au moment du resizage, soit au pire faire un reload du div complet, (c est bourrin j'admets mais mieux que rien).
Que ce soit l'une où l autre solution, je n'y arrive pas du tout...

et bien tu te fais une fonction qui positionne ton menu, et tu l'exécute dans le gestionnaire onresize :

positionneMenu(){
  // positionnement du menu...
}

window.addEvent("resize",positionneMenu);

Quoi qu'il en soit, positionner des éléments uniquement avec Javascript, ça me semble un peu bancal comme méthode. Que Javascript puisse venir apporter des modifications pour une meilleure adaptation de l'interface, je veux bien, mais que le positionnement dépende de JS...

Quel est le rendu de ce menu sans Javascript ?

C'est un menu déroulant transparent. Quand je pointe sur la case de mon tableau, ca déroule un sous-menu transparent à la position x et y que je sais calculer.

Bon rien ne marche, que je recalcule x et y c est cool mais ca recharge en aucun cas mon menu qui n'est pas dans une fonction.

Personne ne sait vraiment comment recharger un div seul? C'est pas possible?
J'ai pas des masses envie de recharger la page entiere bourrée d'anims flash...

avec onresize, ça marche trés bien, tu mets par exemple;

<body onresize="RecalculToutBien()">

Et là tu ne recharge pas le contenu, mais tu recalcul la position de ton div celon les nouvelles dimension de ta fenêtre, je l'ai déja fait et sa marche.
Modifié par matmat (09 Jan 2007 - 19:40)

Mouais mais en recalculant ca marche pas du tout.
Personne ne sait comment recharger un div en entier? Ou juste une partie de page?

comment que en recalculant ça marche pas dutout?, bien sur il faut que ta fonction soit AUSSI initilisée avec window.onload = function(){Init();} (ou body onload ou loadEvent et addEventListener... etc).
Sinon pour recharger le CONTENU de ton div (et non pas ces dimensions) il faut utiliser Ajax.

Mouais je galere vraiment....
En voyant le code du dessus, tu peux me dire ce que je dois mettre exactement dans le body stp?
Ce serait vraiment super sympa
Modifié par steph21 (09 Jan 2007 - 23:37)

matmat a écrit :
J'ai un peu des doutes sur cettes techniques des marges négatives...

Personne ne devrait en avoir... ... De doutes, c'est la technique la plus stupide qui ait jamais été inventée.

Du genre à être cassée de A à Z dès la première évocation tellement c'est dangeureux pour les débutants.

a écrit :

pas super accessible!

Non !!! Super inaccessible... Battre le fer... etc...


Bon en fait c'était pas pour te contredire. Simplement l'occasion était trop belle de rebondir sur les termes eux mêmes

J'ai jamais reelment compris l'interet de cette technique, vraiment plus j'y reflechit moins je comprend à quoi ça peu bien servir. Pour quoi mettre des marges négative pour centrer horizontalement? C'est completement absurde. Surtout que c'est vraiment simple de faire differement. Du coup c'est pour ça que steph21 en est là à galérer pour positionner son menu avec js parcequ'à la base c'est foireux. D'ailleur ce menu est foireux aussi. C'est pour ça que steph21 je te conseil de repartir sur des bases plus saines plutot que de t'acharner avec ce bazard.

Ben alors connais-tu un menu transparant plus simple d'utilisation et quelle méthode exactement pour remplacer les marges négatives sans perdre le centrage?