problem with relative position
problem with relative position
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
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
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
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
-
- Beginner
- Posts: 5
- Joined: Fri Jan 20, 2006 10:13 pm
Is there any way to do a relative positioning?
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
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
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.
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.
I have the menu i a table cell:
and there is the code of data.php
Code: Select all
<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>
Code: Select all
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();
";
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://milonic.com/tablemenu.php
Ruth
http://milonic.com/tablemenu.php
Ruth
-
- Beginner
- Posts: 5
- Joined: Fri Jan 20, 2006 10:13 pm
Relative positioning
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
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
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
-
- Beginner
- Posts: 5
- Joined: Fri Jan 20, 2006 10:13 pm
A picture's gotta be worth a million words.Ruth wrote:
Where exactly do you want the menu? It looks centered, 20px from the top and offset to the right some pixels.
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
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:
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:
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
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
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: Select all
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;
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: Select all
<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>
5. right after the call for the menu files and before the div id=pg put this
Code: Select all
<table align="right" border=0 cellpadding=0 cellspacing=0 WIDTH="760">
<tr><td height="20"> </td><td></td></tr>
<tr>
<td width=20%> </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