how to keep javascript menu centered when window is re-sized

**caipirinha** · 02-24-2007, 02:14 PM

I've been using a javascript drop down menu with my pages aligned left and the absolut positioning set in custom.cs. Now I'm trying to center align my pages so that they allways have equal space left and right when users re-size their browser window. So far I havent had good results getting the menu to stay centered when the window is re-sized. Is there a way to do this?

Thank you very much,
Bob

**mburt** · 02-24-2007, 02:46 PM

The problem with position:absolute, is that it position relative to the page, and not it's contents. So if there is a block-level element under it, it will simply be placed over it. I'm not even sure if there is a way to accurately center a div positioned like you've stated.

**jscheuer1** · 02-24-2007, 02:58 PM

Well, if an absolutely positioned element is inside of a relatively positioned element, it will position itself relative to the relatively positioned element. So, you can do something like so (requires at least a loose transitional DOCTYPE):

HTML Code:

<body>
<div id="container" style="position:relative;width:780px;margin:0 auto;">
<div id="menu" style="position:absoute;left:50%;width:600px;margin-left:-300px;>
</div>
The rest of your page here
</div>
</body>

I've put the style inline just for illustration purposes. The container will be 780px wide and centered, the menu, if it actually has content making it appear 600px wide will appear centered.

**mburt** · 02-24-2007, 03:15 PM

So even though the menu is position:absolute it will stay inside it's parent element?

**jscheuer1** · 02-24-2007, 03:41 PM

Originally Posted by mburt

So even though the menu is position:absolute it will stay inside it's parent element?

Why not start your own thread for questions like this? Or, make up a demo of it to see what happens.

Anyways, what I said:

if an absolutely positioned element is inside of a relatively positioned element, it will position itself relative to the relatively positioned element

doesn't mean that it will always stay inside the relatively positioned element. It only means that it will position itself relative to it. In a case like so:

HTML Code:

<body>
<div id="container" style="position:relative;width:5px;margin:0 auto;">
<div id="menu" style="position:absoute;left:50%;width:600px;margin-left:-300px;>
</div>
</div>
</body>

The container is too small to contain the menu but, the menu should still be centered if its apparent (layout) width matches its style set width. And, no matter how it appears, it will appear the same in different sized windows. If the window gets too narrow, parts of the menu will be outside of the viewable area and (depending upon the browser) may be impossible to scroll into view.

If, everything matches up width wise (as in my first example), this will not be a problem.

**caipirinha** · 02-25-2007, 05:04 AM

Thanks for your suggestions. I'm not very experienced but i should be able to make it work, with your help.

I really appreciate this board and the people who take the time to help strangers.

Bob

**jscheuer1** · 02-25-2007, 03:58 PM

Bob, you're welcome. If you need more help, please post a link to your page.

Thread: how to keep javascript menu centered when window is re-sized

Thread Tools

Search Thread

how to keep javascript menu centered when window is re-sized

Bookmarks

Bookmarks

Posting Permissions