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

problem with relative position


Poster: zvrtus
Dated: Friday January 20 2006 - 15:12:57 GMT

Hi,

I use my menu with position="relative" attribute. Sometimes (I am not able to specify exactly on which occasion) in IE the submenu "jumps" into the upper left corner (like if postition=absolute) were set ...

thanks for help
zvrt


Poster: Ruth
Dated: Friday January 20 2006 - 18:06:10 GMT

Hi,

Without seeing the page it's going to be hard to be specific. If the menu is not in the table correctly, given the position="relative"; I'm assuming it's in a table, there can be a problem with submenu position in particular in IE for the Mac. If that's not the issue, we'll need to see the page or a test page set up the same.

Ruth

Is there any way to do a relative positioning?


Poster: rogerpoole
Dated: Friday January 20 2006 - 21:33:02 GMT

Ruth,

I'm having a similar problem with the horizonal menu. I'm not using tables, using css.

I've tried putting the nav in a div that was absolutely positioned in a larger nav that was relatively positioned. It worked in Firefox but nothing else. The submenus dropped down and right the same pixel distance as the div containing it was from the page top. (Ok, everyone is saying "What the ?")

If the div containing the main bar is top:20 pixels / left:200 pixels, then the main menu will be in the right place. BUT then sub menu drops down 20 pixels and goes to the right 200 pixels.

Is there any way to do a relative positioning? Can I do negative numbers for positioning the submenu?

Thanks
Rog


Poster: Ruth
Dated: Friday January 20 2006 - 21:51:48 GMT

Hi,

It is not recommended that you put the menu in a div, though I know some do and since I use IE there doesn't seem to be a problem, but I can't swear to how that works on other things like the older Opera, Netscape, Firebird and such. Also, you are using divs on a page, so you've got a div with divs in it and then in that inside div the menu which also has and is made up of divs, tables, spans ects. The various browsers seem to treat divs and in particular their placement and relation to each other differently.

To address this kind of issue we really do need to see the page, we need to see if the conflict is something to do with a stylesheet, with incorrect placement with regard a table, or a div though as I said it's not recommended. I suggest if it's going to be in a div, reiterating that I'm not recommending this, you use the same requirement as for placing it using position="relative"; in a table.

That's all I can give you without the page to see what's up.


Poster: zvrtus
Dated: Monday January 23 2006 - 8:59:06 GMT

I have the menu i a table cell:

Code:
        <tr>
          <td colspan="2">

<script language="JavaScript" type="text/javascript" src="js/milonic_src.js"></script>   
<script   type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=js/mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=js/mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="js/data.php"></script>
<script type="text/javascript" src="js/treemenu.js"></script>
<script type="text/javascript" src="js/openmenusbyurl.js"></script>       

          </td>
        </tr>


and there is the code of data.php

Code:
require "../inc/!_var.php";

echo
"

_scrollAmount=5;      // Used for Netscape 4 scrolling
_scrollDelay=10;        // Used for Netscape 4 scrolling

_menuCloseDelay=500;  // The delay for menus to remain visible on mouse off
_menuOpenDelay=150;   // The delay for opening menus on mouse over
_subOffsetTop=0;     // Sub menu offset Top position
_subOffsetLeft=0;  // Sub menu offset Left position

Goverfilter=\"Alpha(style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=100,finishY=0);Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)\";
Goverfilter=\"Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)\";
Goutfilter=\"randomdissolve(duration=0.3)\";
Goutfilter=\"\";
Goverfilter=\"\";


AllMargin=0;

treeOffset=0;  // Used to set the offset of sub menus
singleMasterMenu=false; // Informs the system to on;y have one menu open at a time


with(tstyle1=new mm_style()){
ondecoration=\"underline\";
borderstyle = \"solid\";
subimage=\"js/white_arrow.gif\";
onsubimage=\"js/white_arrow_down.gif\";
bordercolor=\"black\";
borderwidth=0;
padding = \"0 0 0 6\";
fontfamily=\"Verdana, Tahoma, Arial\";
fontsize=\"11px\";
fontstyle=\"normal\";
fontweight=\"bold\";
subimageposition=\"middle right\" ;
separatorcolor=\"#ffffff\";
separatorsize=1;
subimagepadding=0;
imagepadding=0;
itemheight=23;
itemwidth=193;
offbgcolor=\"#cc0000\";
offcolor=\"#ffffff\";
//onbgcolor=\"#ddffdd\";
onbgcolor=\"#dad8e8\";
//oncolor=\"#000099\";
oncolor=\"#333399\";
clicksubimage=\"js/white_arrow_down.gif\";
pagebgcolor=\"#333399\";

}


sub1Style=new copyOf(tstyle1);
sub1Style.offcolor = \"#ffffff\";
sub1Style.offbgcolor=\"#8EA2BB\";
sub1Style.separatorcolor=\"#556E8C\";
sub1Style.padding = \"0 0 0 16\";
sub1Style.fontsize=\"11px\";
sub1Style.fontweight=\"normal\";
sub1Style.pagebgcolor=\"#8EA2BB\";
sub1Style.pagecolor=\"#000000\";

sub2Style=new copyOf(tstyle1);
sub2Style.offcolor = \"#000000\";
sub2Style.offbgcolor=\"#D6DDE6\";
sub2Style.separatorcolor=\"#8EA2BB\";
sub2Style.padding = \"0 0 0 26\";
sub2Style.fontsize=\"10px\";
sub2Style.fontweight=\"normal\";
sub2Style.pagebgcolor=\"#D6DDE6\";
sub2Style.pagecolor=\"#cc0000\";


tstyle1.clickcolor=\"#ffffff\";
tstyle1.clickbgcolor=\"#D70B0B\";
//tstyle1.clickimage=\"js/red_blip.gif\";
//tstyle1.clicksubimage=\"js/white_arrow_down.gif\";


with(new menuname(\"main Tree Menu\")){
orientation='vertical';
top=130;
left=0;
style = tstyle1;
alwaysvisible = 1;
itemwidth=193;
//margin=AllMargin;
position=\"relative\";
aI(\"text={$popisky['hlavni_strana']};url={$root_dir}?sekce=hlavni;\");
aI(\"text={$popisky['novinky']};url={$root_dir}?sekce=novinky\");
aI(\"text={$popisky['produkty']};showmenu=produkty;type=tree;\");
aI(\"text={$popisky['terminaly']};showmenu=terminaly;type=tree;\");
aI(\"text={$popisky['partneri']};url={$root_dir}?sekce=partneri\");
aI(\"text={$popisky['cenova_poptavka']};url={$root_dir}?sekce=cenova_poptavka\");
}



   with(new menuname(\"produkty\")){
   style = sub1Style;
   margin=AllMargin;
   aI(\"text={$popisky['_uvod']};url={$root_dir}?sekce=_uvod\");
   aI(\"text={$popisky['_primy_vlak']};showmenu=primy_vlak;type=tree;\");
   aI(\"text={$popisky['_jednotlive_zasilky']};url={$root_dir}?sekce=_jednotlive_zasilky\");
   aI(\"text={$popisky['_podminky_prepravy']};url={$root_dir}?sekce=_podminky_prepravy\");
   }
      with(new menuname(\"primy_vlak\")){
      style = sub2Style;
      margin=AllMargin;
    aI(\"text={$popisky['__o_produktu']};url={$root_dir}?sekce=__o_produktu\");
      aI(\"text={$popisky['__navazna_spojeni']};url={$root_dir}?sekce=__navazna_spojeni\");
      aI(\"text={$popisky['__jizdni_rad']};url={$root_dir}?sekce=__jizdni_rad\");
      aI(\"text={$popisky['__objednavky_rezervace']};url={$root_dir}?sekce=__objednavky_rezervace\");
      }

   with(new menuname(\"terminaly\")){
   style = sub1Style;
   margin=AllMargin;
   aI(\"text={$popisky['_terminaly_crsr']};url={$root_dir}?sekce=_terminaly_crsr\");
   aI(\"text={$popisky['_terminaly_evropa']};url={$root_dir}?sekce=_terminaly_evropa\");
   }


      
drawMenus();

";


Poster: Ruth
Dated: Monday January 23 2006 - 12:04:47 GMT

You have placed the menu in the table incorrectly based on what you posted here. The calls for the files other than the actual main menu that goes in the table are not placed in the table cell, they go after the body tag.


http://www.milonic.com/tablemenu.php

Ruth

Relative positioning


Poster: rogerpoole
Dated: Monday January 23 2006 - 14:57:28 GMT

Ruth wrote:
Hi,

It is not recommended that you put the menu in a div, though I know some do and since I use IE there doesn't seem to be a problem, but I can't swear to how that works on other things like the older Opera, Netscape, Firebird and such. Also, you are using divs on a page, so you've got a div with divs in it and then in that inside div the menu which also has and is made up of divs, tables, spans ects. The various browsers seem to treat divs and in particular their placement and relation to each other differently.

To address this kind of issue we really do need to see the page, we need to see if the conflict is something to do with a stylesheet, with incorrect placement with regard a table, or a div though as I said it's not recommended. I suggest if it's going to be in a div, reiterating that I'm not recommending this, you use the same requirement as for placing it using position="relative"; in a table.

That's all I can give you without the page to see what's up.



Ruth, here's a sample page.
Note, it is important for the bulk of the page to center in the browser.

http://www.wh2pdirect.com/tsp/interiorNAVjs.html

Thank you!
Roger


Poster: Ruth
Dated: Monday January 23 2006 - 16:02:00 GMT

Hi Roger,

I'm not really sure what you want. I can't see anyplace that you are using position="relative"; It looks like you have just put all the calls for the menu files in a div and want it there.

Where exactly do you want the menu? It looks centered, 20px from the top and offset to the right some pixels.

If that's the case, have you tried just setting it as
top=20;
screenposition="center";
left="offset=x";

where x is how far toward the right you want to shift it from center. So, if you want it 80px more toward the right you'd make it left="offset=80"; that will center the menu and then shift it 80 more pixels toward the right side of the page.

If that will work, then just move the calls for the menu to the first thing after the body tag.

I don't work with divs much so, I'm still playing trying to figure out what exactly that layout will be at various resolutions. I'll post back if I come up with anything else.

Ruth


Poster: rogerpoole
Dated: Wednesday January 25 2006 - 18:43:29 GMT

Ruth wrote:

Where exactly do you want the menu? It looks centered, 20px from the top and offset to the right some pixels.



A picture's gotta be worth a million words.
Here's a couple of Jpgs that show the problem.

On a tight screen
<http://www.wh2pdirect.com/tsp/menuprob/tightpage.jpg>

On a wide screen
<http://www.wh2pdirect.com/tsp/menuprob/loosepage.jpg>

It's the submenu that's killing me ;)
I can't get it to float right.

Thanks again Ruth.
Rog


Poster: Ruth
Dated: Wednesday January 25 2006 - 21:30:24 GMT

Hi,

As I said, I don't work with divs so I don't know about your divs and how the page layout becomes centered, but as to the menu here is a solution that seems to work fine.

1. cut the main menu from the menu_data.js file and put it into its own file. Code the menu properties like this:
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;


add a drawMenus(); to the end of the file, and save it as embedded_main.js.

2. Save the menu_data.js file without the main menu in it.

3. put the call for the program files and the menu_data.js file immediately after the body tag:
Code:
<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
   if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
     else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
   </SCRIPT>
<SCRIPT src="menu_data.js" type=text/javascript></SCRIPT>


4. change your #pg div coding to top:40px;

5. right after the call for the menu files and before the div id=pg put this
Code:
<table align="right" border=0 cellpadding=0 cellspacing=0 WIDTH="760">
<tr><td height="20">&nbsp;</td><td></td></tr>
<tr>
    <td width=20%>&nbsp;</td><td><SCRIPT src="embedded_main.js" type=text/javascript></SCRIPT></td>
</tr>
</table>



The table aligns right so the menu is now just where it was and the submenus open correctly. This gets around any problem with the menu being in a div, which is most likely what is causing the subs to open incorrectly. Placing it in the table like this, which is how it's supposed to be placed means that it will not have problems in some of the odd browsers like Mac IE.

Ruth