Problème de fixage de menu

Statut
N'est pas ouverte pour d'autres réponses.
nexty

nexty

I
Bonjour,
j'ai fait un nouveau site avec un pote,
on a insérer un menu en javascript dessus,
le truc c'est qu'il foire selon la résolution :=/ en gros il est pas aligné. dès qu on passe au dessus de 1024, ...
je cherche depuis un petit temps et je trouve pas la soluce :s

Voilà l'url:
http://ftempels.free.fr/

et voici le code de mon index:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Fab's Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="javascript" src="Scripts/dhtmllib_lite.js"></SCRIPT>
<SCRIPT language = "JavaScript" src = "Scripts/XPFileMenu.js"></SCRIPT>
</head>

<body background="./home/kubrickbgcolor.jpg" link="#6699CC" vlink="#6699CC">

<table  width="760" height="562" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td height="199" background="./home/fablogo.jpg"><a href="http://ftempels.free.fr"></a></td>
  </tr>
  <tr> 
    <td height="10" background="./home/kubrickbg.jpg"> <table width="75%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr> 
          <td>  </td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="286" background="./home/kubrickbg.jpg"> <table width="90%" height="258"  border="0" align="center" cellpadding="0" cellspacing="0">
        <tr> 
          <td width="32%"> <p> <SCRIPT language = "JavaScript">
			
			/*Script téléchargé sur EasyScript ([url]www.easy-script.com)*/[/url]
			
			/* Création d'un menu
				MenuObject( Id, ImagePath, IdImg, Libellé )
				
			   Création d'une option
			    MenuObject.CreateOption( Id, ibellé, LienPage, Passage de paramètre dans le lien, CibleLien, ImagePath )
				
			   Initialisation du menu général
			   	InitMenu( PosX, PosY, séparation entre les différents 'MenuObjects', Est-ce que le fader doit se déclencher)
				/!\: Cette fonction doit-être inscrite avant tout. Si vous ne a mettez pas des valeurs, il y a des valeurs par défauts.
			   
			   StartMenu()
			   	Ecriture du menu
			*/
			
                        /*Script trouvé sur http://www.javascriptfr.com*/			

			
			InitMenu(145,225,1,false);
			
			var mnuHome = new MenuObject("mnuHome", "Images/Img.bmp", "ImgAdmin", "Home");
			mnuHome.CreateOption("lnkAddFile", "Accueil", "http://ftempels.free.fr", "", "_self", "Images/blanc.gif");
			mnuHome.CreateOption("lnkSearchFile", "Contact", "mailto:webmaster@easy-script.com", "?subject=Menu Xp", "_self", "Images/blanc.gif");
			/*mnuHome.CreateOption("lnkPrec", "Page Précédente", "javascript:history.back()", "", "_self", "Images/prec.gif");
			mnuHome.CreateOption("lnkSuiv", "Page Suivante", "javascript:history.forward()", "", "_self", "Images/suiv.gif");*/
			
			var mnusc = new MenuObject("mnusc", "Images/Img.bmp", "ImgNav", "EPHEC");
			mnusc.CreateOption("lnkphp", "Forum Marketing", "http://ftempels.free.fr/phpBB2/", "", "_blank", "Images/blanc.gif");
			mnusc.CreateOption("lnkjs", "File-Manager", "http://ftempels.free.fr/FM/", "", "_blank", "Images/blanc.gif");
			/*mnusc.CreateOption("lnkcjs", "Cours JavaScript", "http://www.easy-script.com/go.php?id=1", "", "_blank", "Images/ass.gif");			
			mnusc.CreateOption("lnkdh", "DHTML", "http://www.easy-script.com/dhtmlscript.php", "", "_blank", "Images/ass.gif");*/

			var mnuRess = new MenuObject("mnuRess", "Images/Img.bmp", "ImgRess", "Photos");
			mnuRess.CreateOption("lnkRess1", "Avertissement", "http://ftempels.free.fr/photos.php", "", "_self", "Images/blanc.gif");
			mnuRess.CreateOption("lnkRess2", "Albums Photos", "http://ftempels.free.fr/coppermind/", "", "_blank", "Images/blanc.gif");
			/*mnuRess.CreateOption("lnkRess2", "Téléchargement", "http://www.easy-script.com/download.php", "", "_blank", "Images/blanc.gif");
			mnuRess.CreateOption("lnkRess3", "Forums", "http://www.easy-script.com/phpBB/", "", "_blank", "Images/blanc.gif");*/
			
			var mnuDiv = new MenuObject("mnuDiv", "Images/Img.bmp", "ImgDiv", "Liens");
			mnuDiv.CreateOption("lnkDiv1", "Mackiller", "http://mackiller.be/forum/", "", "_blank", "Images/blanc.gif");
			mnuDiv.CreateOption("lnkDiv2", "CHE2", "http://www.ephec.be/che2/", "", "_blank", "Images/blanc.gif");
			/*mnuDiv.CreateOption("lnkDiv3", "Faire un lien", "http://www.easy-script.com/fl_ban.php", "", "_blank", "Images/blanc.gif");*/
			
			StartMenu();

		</SCRIPT></p>
            <p> </p>
            </td>
          <td width="68%"><table width="100%" height="287" border="0" cellpadding="0" cellspacing="0">
              <tr> 
                <td height="23"><div align="left"><font color="#333333" size="3" face="Verdana, Arial, Helvetica, sans-serif">.: 
                    News :. Mise à jour du site (22/04/05)</font></div></td>
              </tr>
              <tr> 
                <td height="190"><p> </p><hr><p><font color="#666666" size="2" face="Verdana, Arial, Helvetica, sans-serif">Bienvenue 
                    sur mon nouveau site.<br>
                    Un nouveau background et un nouveau menu ont été 
                    ajoutés. J'espère que ceux-ci vous plairont.<br>
                    Merci à Judas et à Vercau pour leur aide.<br>
                    <br>
                    Bon surf ...</font></p><hr>
                  <p> </p>
                  <p><font color="#666666" size="2" face="Verdana, Arial, Helvetica, sans-serif"><br>
                    </font></p>
                  </td>
              </tr>
              <tr> 
                <td> </td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="63" background="./home/kubrickfooter.jpg"> </td>
  </tr>
</table>
<br><center>
<?

include("./home/cpt/compteur.php");

?>
</center>

</body>
</html>
merci d'avance à ceux qui pourront m'aider :s
 
MbK_

MbK_

Etudjant
pour les modules de ce genre, si tu maitrise pas a fond le JS, c'est assez dangereux de l'utiliser.

Le JS est TRES complexe (programmation pure) et si un script ne fonctionne pas, il vaut mieux laisser tomber car tu ne sauras pas le modifier

Teste avec un autre ou met le dans un tableau avec des valeurs fixes
 
PiaFlalCoOl

PiaFlalCoOl

NiuAge
Je peux pas t'aider mais te donner un conseil : demande là ou tu l'as trouvé : http://www.javascriptfr.com

en tout cas le site va nickel chez moi, normal je suis en 1024x768. Et je le trouve simple mais sympa.
 
1er
OP
nexty

nexty

I
Arf chiant chiant, pas envie d'abandonner ce que j ai fait, bon ben je vais aller demander là mais si qqu a une idée d'ici là, oui les codeurs c'est à vous que je fais appel :)
 
BelZe

BelZe

*
Chez moi ca foire partout.

Le menu est fixé a plusieurs pixels du bord gauche et le suis quoi qu il arrive.

Ce qui fait que ton site foire beaucoup ^^

Par contre, jserais pas t aider j y connais rien en JS
 
1er
OP
nexty

nexty

I
bizarre t'es le 1er qui me dit ca,
pourtant je pensais avoir travaillé proprement, y a juste cette apel du menu qui me tanne.
 
null

null

ose();
D'après ce que j'ai compris, tente de modifier la déclaration de position avec la fonction "InitMenu();"

Dans ton script : InitMenu(145,225,1,false);
Tente de changer en fonction des résolutions pour voir :)
 
1er
OP
nexty

nexty

I
ouep mais en fait je sais très bine, que c est avec ca que j ai trouvé la position pour le placer, les 2 eres valeur correspondent a à la hauteur ne partant du haut et à la marge. le truc est : cmt faire pour que ca s adapte auto à chaque résolution?
 
null

null

ose();
Tu as plusieurs possibilités :

:arrow: soit tu modifies le script JS (/Scripts/XPFileMenu.js) pour qu'il ne prenne plus compte de la distance depuis le haut et le bas

:arrow: soit tu mets ton design collé en haut à droite et ça sera la même distance pour chaque résolution (solution pourrie :roll:)

:arrow: soit tu prends la taille d'affichage de tes visiteurs et tu fais via un petit calcul pour savoir quelles distances tu dois mettre.

Exemple :

1024 --> 145
800 --> (145 / 800) * 1024

Un truk comme ça (j'ai pris 145 car c'est le première paramètre de la fonction mais je ne sais pas si c'est celui de la hauteur ou largeur).

PS: en 800x600 ça foire aussi
 
1er
OP
nexty

nexty

I
en gros alors faut que je tente la 1ère solution
pas envie de faire x le site pour x résolutions.

bon je vais tenter de bidouiller là dedans.
 
1er
OP
nexty

nexty

I
voici le code pour ceux qui pensent trouver,
en ts cas ils déclarent les variables PosXStart et PosYStart à 0, y a pas moyen de les déclarer en pourcent ?

Code: 
// -= Variables globales =-
//==========================
var Interval = 50;
var SumInt = 0;
var imgOButton = "Images/OButton.jpg";
var imgFButton = "Images/FButton.jpg";

var PosXStart = 0;
var PosYStart = 0;
var intSepar = 20;
var bFader = false;

var strFader = "filter: alpha(opacity=0);";

var arrListMenu = new Array();


// -= Fonctions =-
//=================
function DoNothing() {}

function StartMenu(){
	for( var i = 0; i < arrListMenu.length; i++ )  fctWrite(i);			
}

function InitMenu( StartX, StartY, Separ, Fader ){
	PosXStart = StartX;
	PosYStart = StartY;
	intSepar = Separ;
	bFader = Fader;
}

function getObject( id ){
	for( var Cpt = 0; Cpt < arrListMenu.length; Cpt++ ){
	 	if( id == arrListMenu[Cpt].Name ) return arrListMenu[Cpt];
		for( var Cpt2 = 0; Cpt2 < arrListMenu[Cpt].Option.length; Cpt2++ ){
	 		if( id == arrListMenu[Cpt].Option[Cpt2].Name ) return arrListMenu[Cpt].Option[Cpt2];
		}
	}
}

function fctMove( strObj, intTo, intVitesse ){
	// But:		Bouger le menu de sa position 'Y' actuelle vers la position 'Y' "intTo".
	// Event:	/
	// Param.:	- Index = Numéro du menu. 
	//			- intTo = Position 'Y' finale du menu ou de l'option.
	//			- intVitesse = Vitesse de mouvement.
	
	var Obj = getObject( strObj );
	
	if( parseInt(intTo) != Obj.PosY ){
		if( parseInt(intTo) < Obj.PosY ){
			Obj.PosY -= 5 * intVitesse;
			if( Obj.PosY <= parseInt(intTo) ) Obj.PosY = parseInt(intTo);
		}
		else {
			Obj.PosY += 5 * intVitesse;
			if( Obj.PosY >= parseInt(intTo) ) Obj.PosY = parseInt(intTo);
		}
		document.getElementById( Obj.Name ).style.top = Obj.PosY;
		setTimeout("fctMove('" + Obj.Name + "', " + intTo + ", " + intVitesse + ")", Interval);
	}
}

function fctAnim( Index ){
	// But:		Animation du menu
	// Event:	Qd on clique sur l'en-tête du menu.
	// Param.:	- Index = Numéro du menu.
	
	var Menu = arrListMenu[Index];
	
	var To = 0;
	var intCpt = 0;
	
	if( !Menu.isShowed ){
		document.getElementById( Menu.ImageName ).src = "Images/FButton.jpg";
		if( bFader ) fctSetOpacity(Index, "+");
		else document.getElementById( Menu.OptionName ).style.display = "";
		for( intCpt = 0; intCpt < Menu.Option.length; intCpt++){
			fctMove(Menu.Option[intCpt].Name, 0, intCpt);
			To += 20;
		}
		for( intCpt = Menu.Index + 1; intCpt < arrListMenu.length; intCpt++ ){
			fctMove(arrListMenu[intCpt].Name, To + arrListMenu[intCpt].PosY, Menu.Option.length + 1 );
		}
		Menu.isShowed = true;
	}
	else {
		document.getElementById( Menu.ImageName ).src = "Images/OButton.jpg";
		if( bFader ) fctSetOpacity(Index, "-");
		for( intCpt = 0; intCpt < Menu.Option.length; intCpt++){
			fctMove(Menu.Option[intCpt].Name,-30*(intCpt), intCpt + 1);
			To += 20;
			SumInt += Interval/2;
		}
		for( intCpt = Index + 1; intCpt < arrListMenu.length; intCpt++ ){
			fctMove(arrListMenu[intCpt].Name, arrListMenu[intCpt].PosY - To, Menu.Option.length + 1 );
			SumInt += Interval/2;
		}
		Menu.isShowed = false;
		if( !bFader ) setTimeout("document.getElementById('" + Menu.OptionName + "').style.display = 'none'", SumInt);
		SumInt = 0;
	}
}

function fctSetOpacity( Index, strOp ){
	// But:		Initialisé l'opacité du menu.
	// Event:	/
	// Param.:	- Index = Numéro du menu.
	//			- strOp = Opération à effectuer sur l'opcaté du menu
	
	var Menu = arrListMenu[Index];
	
	if( Menu.Opac <= 101 && Menu.Opac >= -1 ){
		if( strOp == "+" ){
			Menu.Opac = Menu.Opac + 20;	
		}
		else {
			Menu.Opac = Menu.Opac - 20;
		}
		for( var i = 0; i < Menu.Option.length; i++ ) document.getElementById( Menu.Option[i].Name).filters.alpha.opacity = Menu.Opac;
		document.getElementById( Menu.OptionName).style.display = "";
		setTimeout("fctSetOpacity(" + Index + ", '" + strOp + "')", Interval);
	}
	else {
		if( strOp == "+" ){
			Menu.Opac = 100;	
		}
		else {
			Menu.Opac = 0;
			document.getElementById( Menu.OptionName).style.display = "none";
		}
		for( var i = 0; i < Menu.Option.length; i++ ) document.getElementById( Menu.Option[i].Name ).filters.alpha.opacity = Menu.Opac;
	}
}

function fctWrite( Index ){
	// But:		Ecriture du menu dans le browser.
	// Event:	/
	var strRBorder = "solid";
	var strLBorder = "solid";
	var strBBorder = "none";
	var strReturn = "";
	
	var Menu = arrListMenu[Index];
	
strReturn += "<table border='0' width = '204' summary='' cellpadding = '0' cellspacing = '0' style='Position:absolute;top:" + Menu.PosY + ";left:" + Menu.PosX + ";' id = '" + Menu.Name + "'>"
strReturn += "<tr style='z-index:1'><td><table border='0' summary='' cellpadding = '0' cellspacing = '0' style=''><tr onClick = \"fctAnim(" + Index + ")\" style='cursor:hand;'>";
strReturn += "<td height = '25' width = '16'><img src='Images/LBorder.jpg' border='0' width='16' height='25' alt=''></td>";
//strReturn += "<td><img src='" + Menu.Image + "' border='0' width='52' height='52' align='right'></td>";
strReturn += "<td height = '25' width = '161' background='Images/bgHeader.jpg' style='color: #3399FF;font: bold  Tahoma;'>" + Menu.Caption + "</td>";
strReturn += "<td><img id='" + Menu.ImageName + "' src='Images/OButton.jpg' border='0' width='22' height='25' alt=''></td>";
strReturn += "<td height = '25' width = '5'><img src='Images/moi.jpg' border='0' width='5' height='25' alt=''></td>";
strReturn += "</tr></table></td></tr><tr style=''><td>";
strReturn += "<table border='0' width='100%' cellpadding='0' cellspacing='0'  id='" + Menu.OptionName + "' style=';z-index:0;display: none'>";

for( var intCpt = 0; intCpt < Menu.Option.length; intCpt++ ){
	if( Menu.Option.length-1 == intCpt ){
		strBBorder = "solid";
	}
	strReturn += "<tr id='" + Menu.Option[intCpt].Name + "' style='position: relative; top:" + Menu.Option[intCpt].PosY + "; left:" + Menu.Option[intCpt].PosX + ";z-index: 0;" + ((bFader)? strFader : "")  + "'>";
	strReturn += "<td height = '15' width = '1%' style = 'border-style: none none " + strBBorder + " " + strLBorder + "; border-color: #F9F9F9; border-width: 1; color: #F9F9F9; background: #F9F9F9;'> </td>";
	strReturn += "<td height = '15' width = '1%' style = 'border-style: none none " + strBBorder + " none; border-color: #F9F9F9; border-width: 1; color: #F9F9F9; background: #F9F9F9;'><img src='" + Menu.Option[intCpt].Image + "' border='0' width='16' height='16' align='left'></td>";
	strReturn += "<td height = '15' style = 'border-style: none none " + strBBorder + " none; border-color: #F9F9F9; border-width: 1; color: #F9F9F9; background: #F9F9F9;'><a href = '" + Menu.Option[intCpt].Links + Menu.Option[intCpt].Param + "' Target = '" + Menu.Option[intCpt].Target + "' style='color:#F9F9F9'> " + Menu.Option[intCpt].Caption + " </a></td>";
	strReturn += "<td height = '15' width = '1%' style = 'border-style: none " + strRBorder + " " + strBBorder + " none; border-color: #F9F9F9; border-width: 1; color: #F9F9F9; background: #F9F9F9;'> </td>";
}
strReturn += "</tr></Table></td></tr></table>";
document.write( strReturn );

}

function fctCreateOption( strName, strTitre, strHref, strParam, strTarget, strImage){
	this.Option[this.Option.length] = new OptionObject(strName, strTitre, strHref, strParam, strTarget, strImage, 0, -30*(this.Option.length));
}


// -= Objet "Menu" =-
//====================
function MenuObject( strMenuName, strImage, strImageName, strTitre, intPosX, intPosY ){
	this.Name = strMenuName;
	this.Image = strImage;
	this.ImageName = strImageName;
	this.Caption = "<font face=Tahoma color=#215DC6><b><span style='font-size: 8pt'>" + strTitre + "</span></b></font>";
	this.PosX = PosXStart;
	this.PosY = PosYStart + arrListMenu.length * (35 + intSepar);
	this.OptionName = strMenuName + "Option";
	this.isShowed = false;
	
	this.Opac = 0;
	this.Index = arrListMenu.length;
	arrListMenu[arrListMenu.length] = this;
	this.Option = new Array();
	
	this.CreateOption = fctCreateOption;
}


// -= Objet "Option " =-
//======================
function OptionObject( strName, strTitre, strHref, strParam, strTarget, strImage, intPosX, intPosY){
	this.PosX = intPosX;
	this.PosY = intPosY;
	this.Name = strName;
	this.Image = strImage;
	this.Caption = "<font face=tahoma color=#215DC6><span style='font-size: 8pt'>" + strTitre + "</span></font>";
	this.Param = strParam;
	this.Target = strTarget;
	this.Links = strHref;
}
 
C

Chris_

ex membre
hum
 
1er
OP
nexty

nexty

I
j'ai trouvé une solution,
le truc c'est que ma cg a un maximum de résolution 1280*1024
donc je ne sais pas optimiser pour plus haut.


Code: 
if((screen.width==800)&&(screen.height==600))
                        { {InitMenu(30,225,1,false);}}

                     	if((screen.width==1024)&&(screen.height==768))
                        { {InitMenu(145,225,1,false);}}

                        if((screen.width==1152)&&(screen.height==864))
                        {{InitMenu(210,235,1,false);}}
                        
                        if((screen.width==1280)&&(screen.height==960))
                        {{InitMenu(275,235,1,false);}}

                        if((screen.width==1280)&&(screen.height==1024))
                        {{InitMenu(280,225,1,false);}}
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut