Forum-webmaster
Technique - programmation => HTML / CSS / XHTML => Message commencé par: S-FACTORY le le 19-08-2004 a 22:58:57

Titre: Probleme placement calque / resolution
Posté par: S-FACTORY le le 19-08-2004 a 22:58:57

Bonjour,

J'ai réalisé un menu en html. Il est constitué avec des boutons et des calques qui s'affichent au passage sur le bouton.
Mais j'ai un probleme de placement de mes calques selon la resolution.
En effet, selon les resolutions, le placement des calques diffères et mes calques ne se retrouvent plus devant mes boutons.
Y aurai-t-il une soluce a mon pb car c vraiment tres embetant et aussi tres urgent.

Merci d'avance.

Titre: Re:Probleme placement calque / resolution
Posté par: TinMar le le 20-08-2004 a 01:56:32

Il faut que tu nous donnes ton code ou ta page pour qu'on puisse aller voir. Pour placer les calques et que se soit independant de la resolution il faut que tu fasses un positionnement absolue a mon avis.

Titre: Re:Probleme placement calque / resolution
Posté par: S-FACTORY le le 25-08-2004 a 11:34:46

désolé j'ai pas encore les bons réflexes!! voici le code

<head>
<title>Menu Essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; ]
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) {
v=args[i+2];
if (obj.style) { obj=obj.style;
v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;]
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++)
x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

onClick="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"
onLoad="MM_preloadImages('images/COUPCMENU2.jpg','images/DECOMENU2.jpg')">

onMouseOver="MM_showHideLayers('cdc','','show','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"><img
src="images/COUPCMENU.jpg" width="150" height="25" border="0" name="icdc"
onMouseOver="MM_swapImage('icdc','','images/COUPCMENU2.jpg',1)">

onMouseOver="MM_showHideLayers('vetement','','hide','cdc','','hide','decocad','','show','piercing','','hide','smoke','','hide')"><img
src="images/DECOMENU1.jpg" width="150" height="25" border="0" name="ideco"
onMouseOver="MM_swapImgRestore();MM_swapImage('ideco','','images/DECOMENU2.jpg',1)">

onMouseOver="MM_showHideLayers('vetement','','hide','cdc','','hide','decocad','','hide','piercing','','show','smoke','','hide')"><img
src="images/PIERCINGMENU.jpg" width="150" height="25" border="0" name="ipier"
onMouseOver="MM_swapImgRestore();MM_swapImgRestore()">

onMouseOver="MM_showHideLayers('vetement','','hide','cdc','','hide','decocad','','hide','piercing','','hide','smoke','','show')"><img
src="images/SMOKEMENU.jpg" width="150" height="25" name="ismoke" border="0"
onMouseOver="MM_swapImgRestore();MM_swapImgRestore()">

onMouseOver="MM_showHideLayers('vetement','','show','cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide')"><img
src="images/VETEMENTMENU.jpg" width="150" height="25" border="0" name="ivet"
onMouseOver="MM_swapImgRestore();MM_swapImgRestore()">

<div id="cdc" style="position:absolute; width:200px; height:115px; z-index:1;
left: 160px; top: 16px; visibility: hidden; background-color: #000000;
layer-background-color: #000000; border: 1px none #000000"
onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide');MM_swapImgRestore()"></div>
<div id="decocad" style="position:absolute; width:200px; height:115px;
z-index:2; left: 160px; top: 40px; visibility: hidden; background-color:
#000000; layer-background-color: #000000; border: 1px none #000000"
onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>
<div id="piercing" style="position:absolute; width:200px; height:115px;
z-index:3; left: 160px; top: 65px; visibility: hidden; background-color:
#000000; layer-background-color: #000000; border: 1px none #000000"
onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>
<div id="smoke" style="position:absolute; width:200px; height:115px; z-index:4;
left: 160px; top: 90px; visibility: hidden; background-color: #000000;
layer-background-color: #000000; border: 1px none #000000"
onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>
<div id="vetement" style="position:absolute; width:200px; height:115px;
z-index:5; left: 160px; top: 115px; visibility: hidden; background-color:
#000000; layer-background-color: #000000; border: 1px none #000000"
onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>



Titre: Re:Probleme placement calque / resolution
Posté par: TinMar le le 26-08-2004 a 09:08:54

peux tu nous donner ton code en entier parce qu'il manque la fin et le debut de ton body.... sinon a vu d'oeil tu as trouve ce code avec dreamweaver ou un truc comme ca. Le positionnement des calques est en absolut dc je comprend pas trop ce qui peut merder avec la resolution.

Titre: Re:Probleme placement calque / resolution
Posté par: S-FACTORY le le 28-08-2004 a 15:10:50

<html>
<head>
<title>Menu Essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; ]
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;]
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body text="#FFFFFF" onClick="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')" onLoad="MM_preloadImages('images/COUPCMENU2.jpg','images/DECOMENU2.jpg')">
<p><a href="javascript:;" onMouseOver="MM_showHideLayers('cdc','','show','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"><img src="images/COUPCMENU.jpg" width="150" height="25" border="0" name="icdc" onMouseOver="MM_swapImage('icdc','','images/COUPCMENU2.jpg',1)"></a><br>
<a href="javascript:;" onMouseOver="MM_showHideLayers('vetement','','hide','cdc','','hide','decocad','','show','piercing','','hide','smoke','','hide')"><img src="images/DECOMENU1.jpg" width="150" height="25" border="0" name="ideco" onMouseOver="MM_swapImgRestore();MM_swapImage('ideco','','images/DECOMENU2.jpg',1)"></a><br>
<a href="javascript:;" onMouseOver="MM_showHideLayers('vetement','','hide','cdc','','hide','decocad','','hide','piercing','','show','smoke','','hide')"><img src="images/PIERCINGMENU.jpg" width="150" height="25" border="0" name="ipier" onMouseOver="MM_swapImgRestore();MM_swapImgRestore()"></a><br>
<a href="javascript:;" onMouseOver="MM_showHideLayers('vetement','','hide','cdc','','hide','decocad','','hide','piercing','','hide','smoke','','show')"><img src="images/SMOKEMENU.jpg" width="150" height="25" name="ismoke" border="0" onMouseOver="MM_swapImgRestore();MM_swapImgRestore()"></a><br>
<a href="javascript:;" onMouseOver="MM_showHideLayers('vetement','','show','cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide')"><img src="images/VETEMENTMENU.jpg" width="150" height="25" border="0" name="ivet" onMouseOver="MM_swapImgRestore();MM_swapImgRestore()"></a><br>
<div id="cdc" style="position:absolute; width:200px; height:115px; z-index:1; left: 160px; top: 16px; visibility: hidden; background-color: #000000; layer-background-color: #000000; border: 1px none #000000" onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide');MM_swapImgRestore()"></div>
<div id="decocad" style="position:absolute; width:200px; height:115px; z-index:2; left: 160px; top: 40px; visibility: hidden; background-color: #000000; layer-background-color: #000000; border: 1px none #000000" onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>
<div id="piercing" style="position:absolute; width:200px; height:115px; z-index:3; left: 160px; top: 65px; visibility: hidden; background-color: #000000; layer-background-color: #000000; border: 1px none #000000" onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>
<div id="smoke" style="position:absolute; width:200px; height:115px; z-index:4; left: 160px; top: 90px; visibility: hidden; background-color: #000000; layer-background-color: #000000; border: 1px none #000000" onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>
<div id="vetement" style="position:absolute; width:200px; height:115px; z-index:5; left: 160px; top: 115px; visibility: hidden; background-color: #000000; layer-background-color: #000000; border: 1px none #000000" onMouseOut="MM_showHideLayers('cdc','','hide','decocad','','hide','piercing','','hide','smoke','','hide','vetement','','hide')"></div>
</body>
</html>


Voila la il y a tout desolé pour l'organisation du code !

Titre: Re:Probleme placement calque / resolution
Posté par: TinMar le le 31-08-2004 a 01:49:54

Perso j'ai rien qui change selon la resolution !

Titre: Re:Probleme placement calque / resolution
Posté par: pixyle le le 04-09-2004 a 10:43:14

Idem ça marche bien.
Tu utilises quel navigateur ? Tu peux mettre l'exemple en ligne ?

Titre: Re:Probleme placement calque / resolution
Posté par: graph x le le 08-09-2004 a 08:17:38

Oui, moi aussi la solution m'intéresse... Met le en ligne...

Titre: Re:Probleme placement calque / resolution
Posté par: S-FACTORY le le 09-09-2004 a 15:42:45

J'ai trouvé une solution pour le placement des calques (j'ai callé mon site sur la gauche, de cette facon, les dimentions du bord au calque restent les memes selon la résolution.

Par contre, je viens de le tester sous dreamweaver et là nikel mais des que je le mets en ligne, les boutons disparaissent au passage de la souris, voyez vous meme :

http://www.sfactorynet.com/menu/


Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.