Forum Moderators: open

Message Too Old, No Replies

static menu at bottom of page

I'd like to make a static menu at the bottom of the browser window

         

gilahacker

10:58 pm on Sep 23, 2004 (gmt 0)

10+ Year Member



okay, I'm looking to make a static menu at the bottom of the page that stays put like the newsticker at shortnews.com

best I can find out there are some javascript menus that kind of float at the bottom of the page (they fly around basically trying to keep up)

Is there a way to do this without resorting to frames? Their newsticker is quite obviously using frames (look at the scrollbar, it's shorter than it should be)

thanks,

-JL

hunkymonkey

11:36 pm on Sep 23, 2004 (gmt 0)

10+ Year Member



I've never programmed in layers before, but you might think of taking a look at it. It seems to me a way that might work would be to define a layer that sits on top of everything else and fills the entire browser area. Then you'd put your menu at the bottom of that area. I suppose you'd have to figure out how to make it so that layer wasn't scrollable. Then when the user scrolled down, your layered menu would stay put on its own, quite oblivious to anything else going on.

Good luck. It sounds hard to me.

gilahacker

11:52 pm on Sep 23, 2004 (gmt 0)

10+ Year Member



thanks, I'll check into that...

I know dreamweaver says something about converting tables into layers but not much beyond that.

I hand code all my html (just like how dreamweaver works) and I'm just figuring out how to transition from a tables based layout to a completely css based layout.

I'd like to be able to do this without frames (cause they suck) and preferrably without javascript (IIRC about 1/3 of my visitors don't have it enabled)

thanks again for the suggestion

-JL

Rambo Tribble

1:40 am on Sep 24, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A div with absolute positioning and a bottom value placed on a page with a body height of 100% might work for you. Something like:

body{height:100%;}
#botDiv{position:absolute;height:200px;bottom:0;}

You might also wish to check out this thread: [webmasterworld.com...]

gilahacker

9:53 am on Sep 24, 2004 (gmt 0)

10+ Year Member



@Rambo Tribble:

Thanks for the link, I think I can make that work

<style type="text/css">
#FixedImg /* Give this rule to the world */
{
POSITION: fixed; TOP: 100px; LEFT: 100px;
}
* html #FixedImg /* Override above rule for IE */
{
POSITION: absolute; TOP: expression(offsetParent.scrollTop + 100); LEFT: expression(offsetParent.scrollLeft + 100);
}
</style>

works in IE (6 at least, don't know about others) with a little jitter on scroll and is solid in firefox/mozilla

now I just need to make it stick to the bottom of the screen... too tired to play with it now but i think this is the solution.

Thanks again for your help

-JL