Positioning Relative to window

[Mike]

I have a graphic along the bottom of my page, It acts as the base line to my
page. I want this to always rest on the bottom, regardless of the
resolution of the screen. I beleive this is possible with absolute
positioning and percentages. However, whether I type 0% 50% or 100% to
define the "top" property it ends up at the top of the page rather than
resting on the bottom. Any advice or a differnet way to get the same result
would be greatly appreciated,
Thanks!

-MIKE-

 

[Murray]

I beleive this is possible with absolute

positioning and percentages.

It's not.

 

[Mike]

Well I appreciate your answer, but that is also why I posted this
">>Any advice or a differnet way to get the same

 

[Kevin Spencer]

You can use JavaScript to get the dimensions of the window and go from
there:

var win = document.getElementsByTagName("body")[0]; // body element
var horizontalCenter = win.parentNode.offsetWidth / 2; // Horizontal center
of page
var verticalHeight = win.parentNode.offsetHeight; // Height (bottom) of
page

From there, you just subtract the height of the object you want to position
from verticalHeight to get your absolute Y position, and subtract half the
width of the object from the horizontalCenter to get the absolute X
position. Example:

html:

<div style="width:300px;height:100px" id="bottomDiv">Center of Page at the
Bottom</div>

script:

<script type="text/javascript">
<!--
var win = document.getElementsByTagName("body")[0];
var horizontalCenter = win.parentNode.offsetWidth / 2; // Horizontal center
of page
var verticalHeight = win.parentNode.offsetHeight; // Height (bottom) of
page
var bottomDiv = document.getElementById("bottomDiv");
bottomDiv.style.left = (horizontalCenter - (bottomDiv.offsetWidth / 2)) +
"px";
bottomDiv.style.top = (verticalHeight - bottomDiv.offsetHeight) + "px";
// -></script>
--
HTH,

Kevin Spencer
Microsoft MVP
Chicken Salad Surgery

Accept the Unexpected.

 

[Kevin Spencer]

Oh, sorry, I forgot to add the absolute positioning to the div (won't work
without it). The HTML would be something like:

<div style="width:300px;height:100px; text-align:center; position: absolute"
id="bottomDiv">In the Center</div>

--
HTH,

Kevin Spencer
Microsoft MVP
Chicken Salad Surgery

Accept the Unexpected.

 

[Mike]

Thanks a lot kevin!

Oh, sorry, I forgot to add the absolute positioning to the div (won't work
without it). The HTML would be something like:

<div style="width:300px;height:100px; text-align:center; position: absolute"
id="bottomDiv">In the Center</div>

--
HTH,

Kevin Spencer
Microsoft MVP
Chicken Salad Surgery

Accept the Unexpected.