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:44

Yet another Position question


Poster: marco027
Dated: Saturday May 14 2005 - 17:56:42 BST

I'm trying to build a template page for my website and am experience difficulties positioning the menu at the right place in all browsers. I've read all I could find on the Position / Positioning topic but I can't figure it out. Here's what I've tried so far:

1- First was a plain integration of the menu in my page, without positioning it anywhere special. It worked great.

2- Then I tried replacing my existing menu with the milonic I've downloaded. So I tried using the top= and left= properties. By fidgeting until I got it right on IE (PC), I got it to show right where I wanted it. But in other browsers, on other PCs or Macs, with different screen resolutions, the menu bar floats about everywhere except where it should be (in Safari, Opera, Netscape (all Mac), and on IE on another PC at a diff. screen resolution.

3- I read the FAQs on position and tried screenposition="center"; ...
Then I used offsets to place the menu at my desired position. I thought this would do it, since center is center, regardless of screen size or resolution, and the offset would now be the same in pixels for all browsers. I was wrong. Most browsers still show the menu in the wrong place.

4- I've played with the position="relative"; command. This one isn't what I'm looking for either...

So, I dare asking. How should I proceed to have my menu bar show up precisely at the same place on all screen, across platforms, browsers and screen resolutions ? I love what I've seen of Milonic so far. But I can't imagine there is no way to have the menus properly positioned on all browsers.

Please help me. Thanks in advance.

Re: Yet another Position Question


Poster: marco027
Dated: Saturday May 14 2005 - 18:02:54 BST

It will certainly help if I give you links to the pages I'm trying to create. The site as it exists today, made with DW's popup menu js is here:

http://www.affluence.tv/fr/video/

You can navigate around, you'll see it's pretty seemless.

The page as I'm trying to set it up using Milonic is here:

http://www.affluence.tv/fr/video/index02.htm

I want the menu bar to appear at the same place at all times, across browsers and platforms, resolutions, etc. But I've said that before ;-)

Any help / strategies / techniques will be much appreciated.

Marco


Poster: Ruth
Dated: Saturday May 14 2005 - 20:15:51 BST

Hi Marco,

The only solution I found was to put the main menu in a table, I replaced this section
Code:
<DIV align=center><IMG id=image1 src="navig_fr.jpg"
useMap=#Map border=0 name=image1>
<OBJECT
codeBase=http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=6,0,29,0
classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
width=725 height=181><PARAM NAME="movie" VALUE="../../swf/video_corpo.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="wmode" VALUE="transparent">
<embed src="../../swf/video_corpo.swf" width="725"
height="181" quality=high
pluginspage="http://www.macromedia.com/
shockwave/download/index.cgi?P1_Prod_Version=
ShockwaveFlash" type="application/x-shockwave-flash"
wmode="transparent"></embed> 
</OBJECT><BR><IMG height=25 src="titbar_corpo.gif"
width=725><BR></DIV>


with this:

Code:
<table width="725" height="81" align="center" cellpadding="0"
cellspacing="0" border="1">
<tr><td background="navig_fr.jpg" valign="top">
<table align="right" cellpadding="0" cellspacing="0" border="1">
<tr><td height="37">&nbsp;</td></tr>
<tr><td><script>with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";
aI("align=left;showmenu=Vidéo;text=Vidéo;");
aI("align=left;showmenu=Multimedia;text=Marketing;");
aI("align=left;showmenu=Galerie;text=Galerie;");
aI("align=left;showmenu=Affluence;text=Affluence.tv;");
}
drawMenus();
</script>
</td>
</tr>
<tr>
       <td height="6"></td>
</tr>
</table></td>
</tr>
</table><div align="center">
<OBJECT
codeBase=http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=6,0,29,0
classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
width=725 height=181><PARAM NAME="movie" VALUE="../../swf/video_corpo.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="wmode" VALUE="transparent">
<embed src="video_corpo.swf" width="725"
height="181" quality=high
pluginspage="http://www.macromedia.com/shockwave/
download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" wmode="transparent">
</embed></OBJECT>


Of course I also removed the main menu from the menu_data.js file.
That will keep it always in that position no matter what the resolution,
because you had the div center so I centered the table and it will always
be centered. I left the border on it so you can see what it does when you
try it. Other than that, I don't know any other solution. Don't put the table
in a div, the menu does not like being in a div and will usually cause
submenu position problems, especially in IE on a Mac, and Mozilla, also,
I believe.

Ruth


Poster: marco027
Dated: Saturday May 14 2005 - 21:15:08 BST

Thank you very much Ruth,

I tried what you described and it didn't work (so far), but I'll keep trying even if it mean having to restart from scratch. My question though is about the code you inserted in the page. You mentioned you put the main menu in the page... This means it would have to be done this way for all my pages, right ? Then if I add/remove/change a main menu item, I'll have to go through all my pages and edit them again. Is that right ?

I bought Milonic to avoid exactly this. I've been trying to setup the basic layout of a page template for months, in a way that would allow me to easily edit/change the navigation in a single file for the entire site without having to change it in my individual pages...

How would the MOST basic Milonic integration work and keep things in place across browsers ? I'm willing to not use a DIV, I'm even willing to not use tables. But I want my page 1-Centered... and 2-with the menu bar at the same place in all browsers, and 3-to be able to change my navigation bar and sub-menus in a single place. I can't imagine I'm the only person in the world with these requirements. What am I not getting, or doing wrong ?

If anyone has a method of building my page from scratch with simpler code, I'll gladly do that if it solves my problem and meets my two requirements above.

Thanks again!

Marco


Poster: Ruth
Dated: Sunday May 15 2005 - 4:27:18 BST

I'm not sure what you mean by didn't work. I tested this in IE5.5, Netscape 7.1, Firefox 1.0.2 and the menu is in always in the same place. At the right side down where you now see the other words.

As to having to edit all the pages, no that isn't necessary. It's not necessary to actually put the main menu in the table. I did that so you could see the whole structure. You can make a separate data file with only the main menu in it with a drawmenu at the end of it, and then call the file in the table.

Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";
aI("align=left;showmenu=Vidéo;text=Vidéo;");
aI("align=left;showmenu=Multimedia;text=Marketing;");
aI("align=left;showmenu=Galerie;text=Galerie;");
aI("align=left;showmenu=Affluence;text=Affluence.tv;");
}
drawMenus();


This would be the main menu data file. Name it whatever you want ie. main_menu_data.js Then in the table structure you'd have this

Code:
<table width="725" height="81" align="center" cellpadding="0" cellspacing="0" border="1">
<tr>
    <td background="navig_fr.jpg" valign="top">
<table align="right" cellpadding="0" cellspacing="0" border="1">
<tr>
       <td height="37">&nbsp;</td>
</tr>
<tr>
    <td><SCRIPT language=JavaScript src="main_menu_data.js"
type=text/javascript></SCRIPT></td>
</tr>
<tr>
       <td height="6"></td>
</tr>
</table></td>
</tr>
</table><div align="center">
<OBJECT
codeBase=http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=6,0,29,0
classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
width=725 height=181><PARAM NAME="movie" VALUE="../../swf/video_corpo.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="wmode" VALUE="transparent">
<embed src="video_corpo.swf" width="725"
height="181" quality=high
pluginspage="http://www.macromedia.com/shockwave/download/
index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" wmode="transparent">
</embed>   
</OBJECT><BR>


The reason for this is that when placing the menu in a table, the main menu has to be separate, either in the table or in a file, and it has to be called after the submenus have been called and built.

I tested this as I said in IE 5.5, Netscape 71., Opera 7.54, Firefox and it works fine, always keeping the menu in the same place at both 800x600 and 1024x768. I didn't try other resolutions because it messes up my desktop when I change it other than those two.

You can check the page here, though I put an image for the flash.

Ruth