Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

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>


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>


Hope that helps.

Ruth