kellevs said:<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Eagle Nests</title>
<script language="JavaScript">
<!--
function FP_changeProp() {//v1.0
var
args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1];
s="o";
ao=args.split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j];
if(null==eval(s)) {
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById)
el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return
el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes;
if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return
el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return
el; } }
return null;
}
// -->
</script>
</head>
<body bgcolor="#FCF843" link="#FF0000" text="#944949">
<p align="center"><font face="Abadi MT Condensed Extra Bold"
size="7">Eagle
Nests Along the Yampa River</font></p>
<p align="center">
<img border="0" src="Nest%20Map2.JPG" width="341" height="580"></p>
<p align="center">
<font face="Abadi MT Condensed Extra Bold" size="4">Click an eagle to see
a
close-up map and pictures</font></p>
<div style="position: absolute; width: 26px; height: 35px; z-index: 1;
left:
590px; top: 429px" id="layer2">
<a href="catamountnest.htm">
<img border="0" src="eagle.jpg" width="29" height="37"
onclick="FP_changeProp(/*id*/'layer2',0,'style.position','absolute')"></a></div>
<p align="center">
</p>
<p align="center"> </p>
<p align="center">
</p>
<div style="position: absolute; width: 28px; height: 38px; z-index: 1;
left:
523px; top: 364px" id="layer1">
<a href="milnernest.htm">
<img border="0" src="eagle.jpg" width="30" height="39"
onclick="FP_changeProp(/*id*/'layer1',0,'style.position','relative')"></a></div>
</body>
</html>
Murray said:Not enough context. I need to see where the 'layer is in the rest of the
code.
Murray said:The problem you are having is that the layer is NOT moving. It's the <p>
tags that are - note their center alignment. But the layers (being
absolutely positioned) are nailed to the browser viewport at those exact
coordinates you specified.
One of the problems most often experienced by new users of absolute
positioning is exactly this. Page content moves away from absolutely
positioned content, and they spend hours looking for why the absolutely
positioned stuff is moving.
Now - what is it you WANT?
--
Murray
kellevs said:<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Eagle Nests</title>
<script language="JavaScript">
<!--
function FP_changeProp() {//v1.0
var
args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1];
s="o";
ao=args.split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j];
if(null==eval(s)) {
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById)
el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return
el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes;
if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return
el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return
el; } }
return null;
}
// -->
</script>
</head>
<body bgcolor="#FCF843" link="#FF0000" text="#944949">
<p align="center"><font face="Abadi MT Condensed Extra Bold"
size="7">Eagle
Nests Along the Yampa River</font></p>
<p align="center">
<img border="0" src="Nest%20Map2.JPG" width="341" height="580"></p>
<p align="center">
<font face="Abadi MT Condensed Extra Bold" size="4">Click an eagle to see
a
close-up map and pictures</font></p>
<div style="position: absolute; width: 26px; height: 35px; z-index: 1;
left:
590px; top: 429px" id="layer2">
<a href="catamountnest.htm">
<img border="0" src="eagle.jpg" width="29" height="37"
onclick="FP_changeProp(/*id*/'layer2',0,'style.position','absolute')"></a></div>
<p align="center">
</p>
<p align="center"> </p>
<p align="center">
</p>
<div style="position: absolute; width: 28px; height: 38px; z-index: 1;
left:
523px; top: 364px" id="layer1">
<a href="milnernest.htm">
<img border="0" src="eagle.jpg" width="30" height="39"
onclick="FP_changeProp(/*id*/'layer1',0,'style.position','relative')"></a></div>
</body>
</html>
Murray said:Not enough context. I need to see where the 'layer is in the rest of the
code.
--
Murray
<div style="position: absolute; width: 28px; height: 38px; z-index: 1;
left:
523px; top: 364px" id="layer1">
<a href="milnernest.htm">
<img border="0" src="eagle.jpg" width="30" height="39"
onclick="FP_changeProp(/*id*/'layer1',0,'style.position','relative')"></a></div>
:
Beware just dropping "Layers" on the page, you know not where they
have
fallen!
Show me your code please.
--
Murray
I've inserted two layers in my page but when I preview it, if the
window
isn't maximized the layers don't stay where I placed them in FP.
I've
tried
different settings with the behavoirs and placement but they don't
seem
to
make a difference.
Please help...
kellevs said:Well, I guess what I want is for the layers to move when the window is
being
resized like the image does. I hope that makes since but I understand
what
you mean that the layers aren't actually moving but somehow my image knows
to
move when the window is resized.
Murray said:The problem you are having is that the layer is NOT moving. It's the <p>
tags that are - note their center alignment. But the layers (being
absolutely positioned) are nailed to the browser viewport at those exact
coordinates you specified.
One of the problems most often experienced by new users of absolute
positioning is exactly this. Page content moves away from absolutely
positioned content, and they spend hours looking for why the absolutely
positioned stuff is moving.
Now - what is it you WANT?
--
Murray
kellevs said:<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Eagle Nests</title>
<script language="JavaScript">
<!--
function FP_changeProp() {//v1.0
var
args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1];
s="o";
ao=args.split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j];
if(null==eval(s)) {
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new
Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById)
el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el)
return
el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes;
if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return
el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el)
return
el; } }
return null;
}
// -->
</script>
</head>
<body bgcolor="#FCF843" link="#FF0000" text="#944949">
<p align="center"><font face="Abadi MT Condensed Extra Bold"
size="7">Eagle
Nests Along the Yampa River</font></p>
<p align="center">
<img border="0" src="Nest%20Map2.JPG" width="341" height="580"></p>
<p align="center">
<font face="Abadi MT Condensed Extra Bold" size="4">Click an eagle to
see
a
close-up map and pictures</font></p>
<div style="position: absolute; width: 26px; height: 35px; z-index: 1;
left:
590px; top: 429px" id="layer2">
<a href="catamountnest.htm">
<img border="0" src="eagle.jpg" width="29" height="37"
onclick="FP_changeProp(/*id*/'layer2',0,'style.position','absolute')"></a></div>
<p align="center">
</p>
<p align="center"> </p>
<p align="center">
</p>
<div style="position: absolute; width: 28px; height: 38px; z-index: 1;
left:
523px; top: 364px" id="layer1">
<a href="milnernest.htm">
<img border="0" src="eagle.jpg" width="30" height="39"
onclick="FP_changeProp(/*id*/'layer1',0,'style.position','relative')"></a></div>
</body>
</html>
:
Not enough context. I need to see where the 'layer is in the rest of
the
code.
--
Murray
<div style="position: absolute; width: 28px; height: 38px; z-index:
1;
left:
523px; top: 364px" id="layer1">
<a href="milnernest.htm">
<img border="0" src="eagle.jpg" width="30" height="39"
onclick="FP_changeProp(/*id*/'layer1',0,'style.position','relative')"></a></div>
:
Beware just dropping "Layers" on the page, you know not where they
have
fallen!
Show me your code please.
--
Murray
I've inserted two layers in my page but when I preview it, if the
window
isn't maximized the layers don't stay where I placed them in FP.
I've
tried
different settings with the behavoirs and placement but they
don't
seem
to
make a difference.
Please help...
Murray said:Here is an elegantly simple way to do this, and it's quite normal (inline
styles shown for simplicity....
<body bgcolor="#FCF843" link="#FF0000" text="#944949"
style="text-align:center">
<div id="wrapper" style="position:relative; width:760px; text-align:left;
margin:0 auto;">
<p align="center"><font face="Abadi MT Condensed Extra Bold" size="7">Eagle
Nests Along the Yampa River</font></p>
<p align="center">
<img border="0" src="Nest%20Map2.JPG" width="341" height="580"></p>
<p align="center">
<font face="Abadi MT Condensed Extra Bold" size="4">Click an eagle to see a
close-up map and pictures</font></p>
<div style="position: absolute; width: 26px; height: 35px; z-index: 1; left:
590px; top: 429px" id="layer2">
<a href="catamountnest.htm">
<img border="0" src="eagle.jpg" width="29" height="37"
onclick="FP_changeProp(/*id*/'layer2',0,'style.position','absolute')"></a></div>
<p align="center">
</p>
<p align="center"> </p>
<p align="center">
</p>
<div style="position: absolute; width: 28px; height: 38px; z-index: 1; left:
523px; top: 364px" id="layer1">
<a href="milnernest.htm">
<img border="0" src="eagle.jpg" width="30" height="39"
onclick="FP_changeProp(/*id*/'layer1',0,'style.position','relative')"></a></div>
</div>
</body>
You may need to reposition your positioned elements, but they will now track
the page as it centers.
Note that I only added 3 things: 1) the inline style to the body tag, 2) the
opening <div> immediately below <body>, and the closing <div> immediately
above </body>
--
Murray
kellevs said:Well, I guess what I want is for the layers to move when the window is
being
resized like the image does. I hope that makes since but I understand
what
you mean that the layers aren't actually moving but somehow my image knows
to
move when the window is resized.
Murray said:The problem you are having is that the layer is NOT moving. It's the <p>
tags that are - note their center alignment. But the layers (being
absolutely positioned) are nailed to the browser viewport at those exact
coordinates you specified.
One of the problems most often experienced by new users of absolute
positioning is exactly this. Page content moves away from absolutely
positioned content, and they spend hours looking for why the absolutely
positioned stuff is moving.
Now - what is it you WANT?
--
Murray
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Eagle Nests</title>
<script language="JavaScript">
<!--
function FP_changeProp() {//v1.0
var
args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1];
s="o";
ao=args.split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j];
if(null==eval(s)) {
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new
Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById)
el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el)
return
el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes;
if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return
el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el)
return
el; } }
return null;
}
// -->
</script>
</head>
<body bgcolor="#FCF843" link="#FF0000" text="#944949">
<p align="center"><font face="Abadi MT Condensed Extra Bold"
size="7">Eagle
Nests Along the Yampa River</font></p>
<p align="center">
<img border="0" src="Nest%20Map2.JPG" width="341" height="580"></p>
<p align="center">
<font face="Abadi MT Condensed Extra Bold" size="4">Click an eagle to
see
a
close-up map and pictures</font></p>
<div style="position: absolute; width: 26px; height: 35px; z-index: 1;
left:
590px; top: 429px" id="layer2">
<a href="catamountnest.htm">
<img border="0" src="eagle.jpg" width="29" height="37"
onclick="FP_changeProp(/*id*/'layer2',0,'style.position','absolute')"></a></div>
<p align="center">
</p>
<p align="center"> </p>
<p align="center">
</p>
<div style="position: absolute; width: 28px; height: 38px; z-index: 1;
left:
523px; top: 364px" id="layer1">
<a href="milnernest.htm">
<img border="0" src="eagle.jpg" width="30" height="39"
onclick="FP_changeProp(/*id*/'layer1',0,'style.position','relative')"></a></div>
</body>
</html>
:
Not enough context. I need to see where the 'layer is in the rest of
the
code.
--
Murray
<div style="position: absolute; width: 28px; height: 38px; z-index:
1;
left:
523px; top: 364px" id="layer1">
<a href="milnernest.htm">
<img border="0" src="eagle.jpg" width="30" height="39"
onclick="FP_changeProp(/*id*/'layer1',0,'style.position','relative')"></a></div>
:
Beware just dropping "Layers" on the page, you know not where they
have
fallen!
Show me your code please.
--
Murray
I've inserted two layers in my page but when I preview it, if the
window
isn't maximized the layers don't stay where I placed them in FP.
I've
tried
different settings with the behavoirs and placement but they
don't
seem
to
make a difference.
Please help...