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:43
Background and Relative position problem
Poster: mrwhitehat __at__ hotmail.com
Dated: Friday May 27 2005 - 17:46:29 BST
http://www.cdowk.org/stewardship_development/
BASICALLY, I can't get this menu to shift down about 5 - 15 pixels
Here is my code:
with(milonic=new menuname("Main Menu")){
style=background;
top=15;
left=0;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("status=Click Here for news Briefs from the Office of Communications;text=NEWS BRIEFS;url=http://www.cdowk.org/news_briefs.html");
aI("status=Click Here for the Bishop's Message;text=BISHOP'S MESSAGE;url=http://www.cdowk.org/bishops_message.html");
aI("status=Click Here to find out about of Ministires in the Diocese;showmenu=other_ministries;text=OTHER MINISTRIES;");
aI("status=Click Here to find other links;showmenu=links;text=LINKS;");
aI("status=Resources;showmenu=resources;text=RESOURCES;");
}
Poster: Ruth
Dated: Friday May 27 2005 - 19:00:31 BST
Hi,
You're putting the menu in a table so you need to follow the setup for that use. Table Bound / Relative Positioned menu So, to fix your menu, it does take some positioning when you are trying to put it in the middle of a cell, you need to:
1) remove the main menu from the top_menu_data.js file [take it totally out of it.
2) put it in it's own file, just the main menu and an ending drawMenus(); and save it [I called it top_main_data.js]
3) take the call for that top_menu_data.js file you now have in that table cell and move it back up with the other menu files, it should be the last called after the 3 base files. You'll call the top_main_data.js in the table cell. The reason for this is that the submenus have to be declared and read before the main menu is when you put it in a table.
4) Redo that table cell like this
Code:
<TD vAlign=middle align=center width=758 background=stewardship_development_02.jpg height=35 border=1><table align="center" border="0" cellpadding="0" cellspacing="0" height="25">
<tr>
<td valign="bottom"><SCRIPT language=JavaScript src="top_main_data.js"
type=text/javascript></SCRIPT></td>
</tr>
</table>
</TD>
<tr>
<td valign="bottom"><SCRIPT language=JavaScript src="top_main_data.js"
type=text/javascript></SCRIPT></td>
</tr>
</table>
</TD>
Right now you have it coded as valign=center, and align=middle, it's the other way. For anyone else who might search the forum on this, valign [vertical align] can be top middle or bottom, and align can be left, center, right, justify.
You'll note that I added a new table in the table cell and put the menu in it. What putting the extra table does is allow you to set a height for the menu table that is less than the height of that table cell [35px]. As you note I set the menu table at 25px height. This allows that menu table to be vAlign=middle. You code the menu table itself as valign=bottom, that puts the menu at the bottom of the table you just vertical aligned. I just tested it in IE, Netscape, Opera, and Firefox. It works OK in all of them.
I know it sounds confusing, I hope looking at the code makes it easier to understand. One other thing I suggest you do, which I did, is to put a style in the head setting all the margins at 0. So that all of the browsers use the same margins. I know you have it in the body, but I'm never sure what the newer browsers still accept and read.
Code:
<style type="text/css">
body{margin:0px;}
</style>
body{margin:0px;}
</style>
Hope that helps.
Ruth