P
Pheasant Plucker®
Hi there,
I know what I am trying to do but don't know if I can explain it properly so
please bear with me.
I want to display a moon phase calculator on a webpage;
http://www.calculatorcat.com/moon_phases/daily_moon_phases.phtml
The code for a standard horizontal moon display looks like this;
<!-- // Begin Current Moon Phase HTML (c) CalculatorCat.com // --><div
style="width:223px"><div style="padding:2px;background-color:#000000;border:
1px solid #000000"><div
style="padding:16px;padding-bottom:6px;padding-top:6px;border: 1px solid
#AFB2D8" align="center"><div
style="padding-bottom:7px;color:#FFFFFF;font-family:arial,helvetica,sans-serif;font-size:11px;letter-spacing:.3em;font-weight:bold">CURRENT
MOON</div><script language="JavaScript" type="text/javascript">var ccm_cfg =
{ pth:"http://www.moonmodule.com/cs/", fn:"ccm_h1.swf", lg:"en", hs:1,
tf:"12hr", scs:1, df:"std", dfd:0, tc:"FFFFFF", bgc:"000000", mc:"000000",
fw:184, fh:79, js:0, msp:0, u:"cc" }</script><script language="JavaScript"
type="text/javascript"
src="http://www.moonmodule.com/cs/ccm_fl.js"></script><div
style="padding-top:5px" align="center"><a
href="http://www.calculatorcat.com/moon_phases/moon_phases.phtml"
target="cc_moon_ph"
style="font-size:10px;font-family:arial,verdana,sans-serif;color:#7F7F7F;text-decoration:underline;background:#000000;border:none;"><span
style="color:#7F7F7F">moon phase</span></a></div></div></div></div><!-- //
end moon phase HTML // -->
I use Internet Explorer in 1280x 1024 resolution and have positioned the
resulting display as follows;
<div style="position:absolute; z-index:1000; top:302px; left:765px;">
ABOVE CODE
</div>
This displays exactly where I want it on my 1280 x 1024 display.
However on a 1024 x 768 or other size display for example the positioning
will be out.
How best to display this so that it is in the same relevant position all of
the time?
An example of something similar that displays perfectly in different browser
page sizes is this clock;
<td rowspan=3><table align="right"border="0"><tr><td
align="left"><script type="text/javascript"
src="http://www.worldtimeserver.com/clocks/embed.js"></script><script
type="text/javascript" language="JavaScript">objGB=new
Object;objGB.wtsclock="wtsclock001.swf";objGB.color="000000";objGB.wtsid="GB";objGB.width=100;objGB.height=100;objGB.wmode="transparent";showClock(objGB);</script></td></tr><tr><td
align="left"></td></tr></table>
I am guessing because it is in a table?
If I clone the clock display table parameters for the moon display it of
course positions the moon where the clock should be!
Is it possible to apply the same logic in positioning the moon display as in
the clock example please?
Excuse my ignorance...I am new to this alien language they call html...;^)
I know what I am trying to do but don't know if I can explain it properly so
please bear with me.
I want to display a moon phase calculator on a webpage;
http://www.calculatorcat.com/moon_phases/daily_moon_phases.phtml
The code for a standard horizontal moon display looks like this;
<!-- // Begin Current Moon Phase HTML (c) CalculatorCat.com // --><div
style="width:223px"><div style="padding:2px;background-color:#000000;border:
1px solid #000000"><div
style="padding:16px;padding-bottom:6px;padding-top:6px;border: 1px solid
#AFB2D8" align="center"><div
style="padding-bottom:7px;color:#FFFFFF;font-family:arial,helvetica,sans-serif;font-size:11px;letter-spacing:.3em;font-weight:bold">CURRENT
MOON</div><script language="JavaScript" type="text/javascript">var ccm_cfg =
{ pth:"http://www.moonmodule.com/cs/", fn:"ccm_h1.swf", lg:"en", hs:1,
tf:"12hr", scs:1, df:"std", dfd:0, tc:"FFFFFF", bgc:"000000", mc:"000000",
fw:184, fh:79, js:0, msp:0, u:"cc" }</script><script language="JavaScript"
type="text/javascript"
src="http://www.moonmodule.com/cs/ccm_fl.js"></script><div
style="padding-top:5px" align="center"><a
href="http://www.calculatorcat.com/moon_phases/moon_phases.phtml"
target="cc_moon_ph"
style="font-size:10px;font-family:arial,verdana,sans-serif;color:#7F7F7F;text-decoration:underline;background:#000000;border:none;"><span
style="color:#7F7F7F">moon phase</span></a></div></div></div></div><!-- //
end moon phase HTML // -->
I use Internet Explorer in 1280x 1024 resolution and have positioned the
resulting display as follows;
<div style="position:absolute; z-index:1000; top:302px; left:765px;">
ABOVE CODE
</div>
This displays exactly where I want it on my 1280 x 1024 display.
However on a 1024 x 768 or other size display for example the positioning
will be out.
How best to display this so that it is in the same relevant position all of
the time?
An example of something similar that displays perfectly in different browser
page sizes is this clock;
<td rowspan=3><table align="right"border="0"><tr><td
align="left"><script type="text/javascript"
src="http://www.worldtimeserver.com/clocks/embed.js"></script><script
type="text/javascript" language="JavaScript">objGB=new
Object;objGB.wtsclock="wtsclock001.swf";objGB.color="000000";objGB.wtsid="GB";objGB.width=100;objGB.height=100;objGB.wmode="transparent";showClock(objGB);</script></td></tr><tr><td
align="left"></td></tr></table>
I am guessing because it is in a table?
If I clone the clock display table parameters for the moon display it of
course positions the moon where the clock should be!
Is it possible to apply the same logic in positioning the moon display as in
the clock example please?
Excuse my ignorance...I am new to this alien language they call html...;^)