Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:38
centering menu
Poster: grace422
Dated: Saturday July 16 2005 - 0:58:13 BST
I have a page: http://home.comcast.net/~w.a.cotton/USFS/index2.htm
where I would like the menu to be centered with the rest of the page. It should line up above the highlights menu. Is there a way to do this?
Poster: Ruth
Dated: Saturday July 16 2005 - 2:37:19 BST
Hi Grace,
If you're saying you want the menu to be centered between the bottom of the header logo and the top of Highlights, that distance based on your css file is 325px. I guess you could 'measure' the menu, so if it were 200px you'd set it at about 180 or so, that would be 109px plus 1/2 the 325px of that space.
But, as you do that consider that even now, the menu will overlap and hide part of the Highlights div if someone changes their text size to maximum.
Ruth
centered menu
Poster: grace422
Dated: Saturday July 16 2005 - 4:59:43 BST
I can't use a fixed distance from the left margin for the menu because that changes as the browser width changes. I am looking for a way to float the menu between the header and the highlights box so it is always in the same place relative to the page content, not the browser window.
Thanks
Poster: Ruth
Dated: Saturday July 16 2005 - 15:08:16 BST
Hi,
I do not work with divs so I don't know how to figure out what to do with what you have to make this work. If you work with them, then you can perhaps figure it out.
The absolutely best way to make the menu 'shift' with content and always remain where you want it in the layout is to use a table.
Code:
<table cellpadding='0' cellspacing='0' border='0' width='132px'>
<tr><td height='109px'>THIS IS THE HEIGHT OF YOUR HEADER LOGO, THIS LEAVES THE BLANK SPACE AT THE TOP AND MAKES THE NEXT ROW BEGIN AT 109PX DOWN FROM THE TOP OF THE PAGE</td>
<tr><td valign="middle">
<center><table cellpadding='0' cellspacing='0' border='0'>
<tr><td>THIS IS WHERE YOU PLACE THE MAIN MENU ONLY. YOU CUT IT FROM THE MENU_DATA.JS FILE, REMOVE THE TOP AND LEFT POSITIONS, ADD POSITION="RELATIVE"; ADD A drawmenus(); AFTER THE CLOSING MAIN MENU BRACKET} AND ENCLOSE ALL OF THAT MAIN MENU AND THE drawmenus(); IN SCRIPT TAGS</td></tr></table></center>
</td></tr>
<tr><td>YOU PUT YOUR HIGHLIGHTS DIV HERE WITH ITS CONTENTS</td></tr><table>
<tr><td height='109px'>THIS IS THE HEIGHT OF YOUR HEADER LOGO, THIS LEAVES THE BLANK SPACE AT THE TOP AND MAKES THE NEXT ROW BEGIN AT 109PX DOWN FROM THE TOP OF THE PAGE</td>
<tr><td valign="middle">
<center><table cellpadding='0' cellspacing='0' border='0'>
<tr><td>THIS IS WHERE YOU PLACE THE MAIN MENU ONLY. YOU CUT IT FROM THE MENU_DATA.JS FILE, REMOVE THE TOP AND LEFT POSITIONS, ADD POSITION="RELATIVE"; ADD A drawmenus(); AFTER THE CLOSING MAIN MENU BRACKET} AND ENCLOSE ALL OF THAT MAIN MENU AND THE drawmenus(); IN SCRIPT TAGS</td></tr></table></center>
</td></tr>
<tr><td>YOU PUT YOUR HIGHLIGHTS DIV HERE WITH ITS CONTENTS</td></tr><table>
You'd have to figure out the rest of the divs and how to place them, as I said I haven't worked with them much.
The other option would be to use a complete table layout and put your divs in the table.
Other than that, there are some posts on positioning the menu using images to which you 'attached' the menu so it will always be in whatever place the image is when the page loads. Here's one topic to check.
There is also a methods and functions section on the site which talks about using functions to get and set menu positions.
center menu
Poster: grace422
Dated: Saturday July 16 2005 - 17:10:25 BST
Many Thanks!
The POSITION="RELATIVE"; clue worked. I was able to put the menu into my CSS style sheet and still call it as a .js file rather than including it in the page code.
http://home.comcast.net/~w.a.cotton/USFS/index.htm
A little minor format tweaking and the template will be done (with only 100 pages to go!).
Poster: Ruth
Dated: Saturday July 16 2005 - 18:07:23 BST
Hi,
The menu is not working, the submenus do not open. I don't think you're supposed to put the menu in a div.
Ruth
centered menu
Poster: grace422
Dated: Saturday July 16 2005 - 18:57:58 BST
Very odd. It works fine on my computer when I load it locally. When I upload it to the site, it ceases to work.
Any suggestions on the problem?
Poster: Ruth
Dated: Saturday July 16 2005 - 21:07:32 BST
Hi,
I believe the problem is that you are putting the menu_data.js file call into the div and setting the position="relative"; If you read the information on putting it in a table, i.e. relative positioned from the link I gave you, the main menu has to be outside the menu_data.js file and the call for the menu_data.js file and the three base program files has to be the first thing after the body tag so the submenus get built before any other html object and before the main menu is 'read'.
That may fix it, but I'm doing a disclaimer here. As far as I know, though I'm still checking on this, the menu isn't supposed to be positioned in a div. So, though that will probably work in IE, Netscape7+ and Firefox1.0+ for pc, that doesn't mean it will work in other browsers. It probably won't work on Mac IE, probably will throw off the submenu positions and some browsers may even break the menu.
Ruth