Problème de fixage de menu

Discussion dans 'Web, design' créé par nexty, 23 Avril 2005.

Statut de la discussion:
Fermée.
  1. Offline
    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
    nexty, 23 Avril 2005
    #1
  2. Offline
    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
    MbK_, 23 Avril 2005
    #2
  3. Offline
    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.
    PiaFlalCoOl, 23 Avril 2005
    #3
  4. Offline
    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 :)
    nexty, 23 Avril 2005
    #4
  5. Offline
    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 :p

    Par contre, jserais pas t aider j y connais rien en JS
    BelZe, 23 Avril 2005
    #5
  6. Offline
    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.
    nexty, 23 Avril 2005
    #6
  7. Offline
    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 :)
    null, 23 Avril 2005
    #7
  8. Offline
    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?
    nexty, 23 Avril 2005
    #8
  9. Offline
    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
    null, 23 Avril 2005
    #9
  10. Offline
    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.
    nexty, 23 Avril 2005
    #10
  11. Offline
    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;
    }
    nexty, 23 Avril 2005
    #11
  12. Offline
    Chris_ ex membre
    hum
    Chris_, 23 Avril 2005
    #12
  13. Offline
    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);}}
    nexty, 24 Avril 2005
    #13
Statut de la discussion:
Fermée.