formatting problems for menu in table cell

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:36

formatting problems for menu in table cell - (SOLVED)

Poster: dlpirl
Dated: Thursday April 26 2007 - 6:28:49 BST

My menu is appearing the the middle of the page instead of at the top. See
http://www.s2pmarketsignal.com/.

I followed the instructions in 'Embedding the DHTML JavaScript Web Menu inside a Table Cell'
(http://www.milonic.com/tablemenu.php) and split the menu into two parts.
Pages are built with FrontPage 2003 which uses top.htm at the top of every page.
Here is the BODY section of html code in top.htm...

Code:

</head><body>
<SCRIPT type="text/javascript" src="milonic_src.js"></SCRIPT> 
<noscript><a href="http://www.milonic.com/">
DHTML Menu JavaScript Menu Powered by Milonic</a></noscript> 
<script type="text/javascript">
<!-- 
if(ns4)_d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=mmenuns4.js><\/SCR"+"IPT>"); 
else _d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=mmenudom.js><\/SCR"+"IPT>"); 
-->
</SCRIPT>
<SCRIPT type="text/javascript" src="menu_data.js"></SCRIPT> 

<h1 style="text-align: center"> <img border="0" src="../images/3PhaseLogo1.jpg" width="48" height="54">Sand2Pirls 
Market Signal
<img border="0" src="../images/3PhaseLogo1.jpg" width="48" height="54"></h1>
<p style="text-align: center">
<!--webbot bot="Navigation" s-orientation="horizontal" s-rendering="graphics" s-type="top" 
b-include-home="TRUE" b-include-up="FALSE" --></p>
   
<div align="center">
   <table border="0" id="table1">
      <tr>
         <td>
            <SCRIPT type="text/javascript" src="menu_data_mainonly.js"></SCRIPT>
         </td>
      </tr>
   </table>
</div>

</body></html>

Here is my menu_data_mainonly.js...

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but 
causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=0;


with(background=new mm_style()){
bgimage="gradientbutton_30.gif";
menubgimage="gradientbutton_30.gif";
borderstyle="solid";
bordercolor="#000000";
borderwidth=1;
fontfamily="trebuchet ms,arial,helvetica";
fontsize="75%";
fontstyle="normal";
fontweight="bold";
image="http://www.milonic.com/menuimages/transparent.gif";
imagepadding=4;
itemheight=25;
separatorcolor="#000000";
separatorsize="1";
offcolor="#333300";
oncolor="#3333FF";
overbgimage="gradientbutton_30.gif";
}


with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
itemheight=25;
itemwidth=160;
menuwidth="100%";
menualign="top";
orientation="horizontal";
style=background;
aI("align=center;text=Home;url=http://www.s2pmarketsignal.com/;");
aI("align=center;bgimage=gradientbutton_30.gif;overbgimage=grey.gif;
showmenu=Risk Management;text=Risk Management;");
aI("align=center;text=Videos & FAQ;url=http://www.s2pmarketsignal.com/FAQ.htm;");
aI("align=center;text=Psychology;
url=http://www.s2pmarketsignal.com/Investing_Psychology.htm;");
aI("align=center;bgimage=gradientbutton_30.gif;overbgimage=grey.gif;
showmenu=Signals;
text=Signals;");
aI("align=center;bgimage=gradientbutton_30.gif;overbgimage=grey.gif;
showmenu=Membership;
text=Membership;");
aI("align=center;text=About Us;url=http://www.s2pmarketsignal.com/AboutUs.htm;");
}


drawMenus();

Here is menu_data.js...

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but 
causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=0;



with(submenuStyle=new mm_style()){
bordercolor="black";
itemwidth=130;
borderstyle="solid";
borderwidth=1;
fontfamily="trebuchet ms,arial,helvetica";
fontsize="75%";
fontstyle="normal";
offbgcolor="#CCCCFF";
offcolor="#515151";
onbgcolor="#3333FF";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, 
Strength=5)";
padding=5;
pagebgcolor="white";
pagecolor="black";
separatorcolor="#335033";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}

with(milonic=new menuname("Risk Management")){
style=submenuStyle;
aI("text=Concepts;
url=http://www.s2pmarketsignal.com/RiskManagement.htm;");
aI("text=Game;target=_blank;
url=http://www.s2pmarketsignal.com/s2pRiskManagementGame.xls;");
aI("text=Comparison;
url=http://www.s2pmarketsignal.com/Comparison.htm;");
}

with(milonic=new menuname("Signals")){
style=submenuStyle;
aI("text=For Excel Users;url=http://www.s2pmarketsignal.com/S2PHistoricalSignals.htm;");
aI("text=Periods;url=http://www.s2pmarketsignal.com/
S2PHistoricalSignals_Trends.htm;");
aI("text=Weekly Data;url=http://www.s2pmarketsignal.com/
S2PHistoricalSignals_Weekly.htm;");
}

with(milonic=new menuname("Membership")){
style=submenuStyle;
aI("text=Sign-up;url=http://www.s2pmarketsignal.com/signup.htm;");
aI("text=Members Entrance;url=http://www.s2pmarketsignal.com/member.htm;");
}

drawMenus();

Thanks for any help in resolving this.

a few more questions

Poster: dlpirl
Dated: Thursday April 26 2007 - 16:53:32 BST

I've been able to resolve most of the issues. It turns out that some of the
properties of the menu are actually controlled by the table cell definition. I
wanted 100% width, but I couldn't get it until I set the cell width to 100%.

You can see what I have now at http://www.s2pmarketsignal.com/.

A couple questions...

1) Is there a way to remove a menu background item if the loaded page is
a menu or submenu item? I would like something like pagebgimage to
work the way overbgimage does.

2) Is there a way to make submenu width at least as wide as the horizontal
menu item above it when this width is different for each item in the main
menu? I do want to let the submenu increase in width if it needs to be
longer than the main menu item above.

3) I don't suppose there is a way to initially position a menu in a cell with
position="relative", but then to use 'followscroll=1' to keep it at the top of
the page as the user scrolls down the page?

Poster: Ruth
Dated: Thursday April 26 2007 - 17:22:30 BST

Hi,

Are you asking if there is a overpagebgimage? That property is not
available, however, if you use pageimages then there is an overpageimage.

You can make the menus as wide as the parent item if you know the
parent item's width by setting the menuwidth or probably since the
submenus are vertical you could set itemwidth in the submenus.

No, you can't get it to followscroll if you have it set in a table cell, since the
purpose of that is to set it relative, which means it stays in the table cell.
But, one thing you could do was create an alwaysvisible menu that is just a
button which would take the person back to the top where the menu is. A
lot of people do that. Some use an up arrow as the menu image for that
menu and set that to followscroll.

Ruth

a few more questions (OK, done)

Poster: dlpirl
Dated: Thursday April 26 2007 - 17:47:14 BST

Thanks, Ruth.

WRT 1)... overbgimage sets the background image for the mouseover
event. What I am after is a way to set the bg image when if the menu (or
submenu) item points to the loaded page. I would call this pagebgimage,
but that doesn't exist, so I am expecting the property doesn't exist.

WRT 2)... you seem to have confirmed my suspicion that if the width of the
parent menu item is not defined then there is no way to set the minimum
value of its submenu.

WRT 3)... That's pretty much what I thought. Thanks for the suggestion.

Poster: Ruth
Dated: Thursday April 26 2007 - 23:41:10 BST

Hi,

There is a pagebgimage. It works just like all the other 'page' properties,
like pagecolor, pagebgcolor, pageimage, overpageimage and so on. Some
people that use bgimage and overbgimage, set pagebgimage to be the
same image as used by overbgimage. You might take a look at the
style properties page which lists the varios properties the menu has. The
properties are alphabetized, but remember that most of the over
properties begin with over, so overpageimage, if you decide to use
images, also there's a pagesubimage. There is a link to it below my name.

Ruth

Poster: dlpirl
Dated: Friday April 27 2007 - 0:50:03 BST

yes, as a test, I have been trying to set pagebgimage the same as
overbgimage, but it doesn't work, so I assumed the property didn't exit.
But I do now see that the propery is listed in the Styles Properties
Reference. Both are currently in my subs_data.js file.

Code:

overbgimage="http://www.s2pmarketsignal.com/gradientbutton_30.gif";

works.
But

Code:

pagebgimage="http://www.s2pmarketsignal.com/gradientbutton_30.gif";

does not. Not sure why. I tried it both with and without full pathing.

Hopefully you can help me get it to work. Here is my whole main menu
styles definition from my subs_data.js file. You can see the result at
http://www.s2pmarketsignal.com/

Code:

with(background=new mm_style()){
align="center";
bgimage="gradientbutton_30.gif";
menubgimage="gradientbutton_30.gif";
pagebgcolor="white";
pagecolor="black";
borderstyle="solid";
bordercolor="#000000";
borderwidth=1;
padding=5;
fontfamily="trebuchet ms,arial,helvetica";
fontsize="85%";
fontstyle="normal";
fontweight="bold";
image="transparent.gif";
imagepadding=4;
itemheight=25;
offcolor="#333300";
oncolor="#0000FF";
pagecolor="#0000FF";
overbgimage="http://www.s2pmarketsignal.com/gradientbutton_30.gif";
pagebgimage="http://www.s2pmarketsignal.com/gradientbutton_30.gif";
}

Poster: Ruth
Dated: Friday April 27 2007 - 7:09:12 BST

Hi,

I'm sorry, but I don't understand. The bgimage, menubgimage,
overbgimage and pagebgimage are all gradientbutton_30.gif so no matter
what the state of the menu, that is the only image that will show. Now
when I click on the 1st item in Risk Management submenu and go to that
RiskManagement page the font color changes to match the pagecolor so it
is working. If you want it to be different you have to get a different image.
If you are thinking that the pagebgcolor will take effect,
it won't in the main menu because the main menu has bg images.

Ruth

oops!

Poster: dlpirl
Dated: Friday April 27 2007 - 14:55:22 BST

Thanks, Ruth! I didn't see the problem because it was staring me right in
the face. I actually had the overbgimage I wanted in my sub_data,js
menu item calls. That was working because it was overriding the higher
level style properties in the same file. I now have both overbgimage and
pagebgimage in my main menu style definition as shown below, and all is
ALMOST as I want it.

Code:

overbgimage="http://www.s2pmarketsignal.com/grey.gif";
pagebgimage="http://www.s2pmarketsignal.com/transparent.gif";

The only thing now amiss is that the main menu text is right justified. This
menu text alignment issue shows up more now that I have the menu item
background transparent for the current page menu item.

I have

Code:

align="center";

in both menu items and style definitions, and I have text alignment
centered in the HTML code of the cell where the menu is placed. I've place
a '.' before and after the main menu script call in the HTML code. If you
now load http://www.s2pmarketsignal.com/ you can see that the first '.' is
centered, but the second one is left justified. Any ideas what could be
happening here?

Thanks for your patience!

Poster: Ruth
Dated: Friday April 27 2007 - 19:20:16 BST

Hi,

The text is aligned in the center, and the items in the menu are aligned in
the center, that's from the menualign="center"; The problem is you have
not specified that you want the items to spread out the full width of the
menu container. To do that, add itemwidth="100%"; this will spread the
items out across the menu.

Ruth

Poster: dlpirl
Dated: Friday April 27 2007 - 20:07:01 BST

OK, that helps. However, I want at least 200 pixels of bgimage on each
end (left and right) of the main menu. My style code is now

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
menuwidth="100%";
orientation="horizontal";
style=background;
aI("itemwidth=200;image=http://www.s2pmarketsignal.com/
gradientbutton_30.gif";);
aI("text=Home;url=http://www.s2pmarketsignal.com/;");
aI("showmenu=Risk Management;text=Risk Management;");
aI("text=Videos & FAQ;url=http://www.s2pmarketsignal.com/FAQ.htm;");
aI("text=Psychology;url=http://www.s2pmarketsignal.com/Investing_Psychology.htm;");
aI("showmenu=Signals;text=Signals;");
aI("showmenu=Membership;text=Membership;");
aI("text=About Us;url=http://www.s2pmarketsignal.com/AboutUs.htm;");
aI("itemwidth=200;image=http://www.s2pmarketsignal.com/
gradientbutton_30.gif;");
}

and I don't know why I am not getting the extra bar length on each end.
I've also tried using

Code:

aI("leftimage="http://www.s2pmarketsignal.com/gradientbutton_30.gif";
text=Home;url=http://www.s2pmarketsignal.com/;");
...
aI("rightimage="http://www.s2pmarketsignal.com/gradientbutton_30.gif";
text=About Us;url=http://www.s2pmarketsignal.com/AboutUs.htm;");

and that doesn't seem to work either.

Poster: Ruth
Dated: Saturday April 28 2007 - 7:20:08 BST

Hi,

I'd suggest not using that button as the image. Use the transparent.gif
instead. You have the menubgimage set as that gradientbutton_30.gif so
that will be in that space you create with the transparent image and
itemwidth, and with type=header; then the item will not change if a mouse
is placed over it.

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=background;
menualign="center";
position="relative";
menuwidth="100%";
aI("itemwidth=200;image=http://www.s2pmarketsignal.com/transparent.gif;
type=header;"); 
aI("align=center;text=Home;url=http://www.s2pmarketsignal.com/;");
aI("align=center;bgimage=gradientbutton_30.gif;overbgimage=grey.gif;
showmenu=Risk Management;text=Risk Management;");
aI("align=center;text=Videos & FAQ;url=http://www.s2pmarketsignal.com/FAQ.htm;");
aI("align=center;text=Psychology;url=http://www.s2pmarketsignal.com/
Investing_Psychology.htm;");
aI("align=center;bgimage=gradientbutton_30.gif;overbgimage=grey.gif;
showmenu=Signals;text=Signals;");
aI("align=center;bgimage=gradientbutton_30.gif;overbgimage=grey.gif;
showmenu=Membership;text=Membership;");
aI("align=center;text=About Us;url=http://www.s2pmarketsignal.com/AboutUs.htm;");
aI("itemwidth=200;image=http://www.s2pmarketsignal.com/transparent.gif;
type=header;"); 
}
drawMenus();

If that isn't working, I'll need to see it up, I just went to the site and the
main menu doesn't have that extra item in the file, it's still the original one
from before.

What exactly are you trying to do, since the way it was before you set
itemwidth='100%'; was actually giving you what you are now asking to do
with the use of images at the right and left of the menu. The items were all
aligned in the center of the menu with space on the right and left. The
advantage to doing it that way is that for anyone who has resolution
800x600 the menu still fits in the space and for anyone who needs to
increase the font size to be able to see still has space for the menu to
expand due to font size increase

Ruth

Poster: dlpirl
Dated: Saturday April 28 2007 - 14:27:23 BST

I did like the way it was before except that menu items were not centered
within each menu item space. I have removed itemwidth="100%";
and placed separators so you can see the right justified effect. If I
remove imagepadding=10; the right justification problem goes away,
but the menu items are too close together.

I've removed the separators again, and have a resonably good
workaround by using a separator image. If you catch me online, I'll
remove the separator image and put back the separators so you can more
clearly see the issue.

Poster: Ruth
Dated: Sunday April 29 2007 - 1:25:54 BST

Hi,

Actually there is no center align problem. The text is aligning in the center
starting at the + 10px for the image padding since you have
image="transparent.gif"; as part of that background style. So, since you
have the padding set for that as 10px you get -starting from the left side-
10px transparent.gif 10px text aligned center from that last 10px.

I don't know why you have that image in there, I can't see a reason for it,
nor for the 10px image padding. If it's to somehow make the item wider
you should use just padding which will pad the text.

Try this as your style

Code:

with(background=new mm_style()){
align="center";
fontfamily="trebuchet ms,arial,helvetica";
fontsize="85%";
fontstyle="normal";
fontweight="bold";
itemheight=30;
offcolor="#333300";
oncolor="#0000FF";
pagebgcolor="white";
pagecolor="#0000FF";
padding="0px 10px 0px 10px";
bgimage="gradientbutton_30.gif";
overbgimage="grey.gif";
pagebgimage="transparent.gif";
menubgimage="gradientbutton_30.gif";
}

And this as your main menu

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=background;
menuwidth="100%";
menualign="center";
position="relative";
aI("text=Home;url=http://www.s2pmarketsignal.com/;");
aI("showmenu=Risk Management;text=Risk Management;");
aI("text=Videos & FAQ;url=http://www.s2pmarketsignal.com/FAQ.htm;");
aI("text=Psychology;url=http://www.s2pmarketsignal.com/
Investing_Psychology.htm;");
aI("showmenu=Signals;text=Signals;");
aI("showmenu=Membership;text=Membership;");
aI("text=About Us;url=http://www.s2pmarketsignal.com/
AboutUs.htm;");
}
drawMenus();

I removed all the extra stuff that you didn't need in these sections.

Try that and see if it does what you want. It should put 10px to the right
and left of the text, so the items will be wider than just the text, but it will
align the text in the center including that 10px on right and left. It should
also align the menu, that is the text items in the center of the menu 100%
span which should leave you blank space with just background on the right
and left of all items.

Ruth

Poster: dlpirl
Dated: Sunday April 29 2007 - 5:13:58 BST

Yes that's it. Thanks, Ruth! The key thing I did not know was that padding
required all 4 dimensions. When I tried padding=10; it was padding only
one side. I didn't read the help on 'padding' carefully enough.

Now only one thing remains... on 'Signals/2-Phase Periods' and 'Signals/3-
Phase Periods', the text is not centered vertically. I think the problem
must lie in the page code, but if you know of is a menu setting that can
correct it, I would really appreciate it.

Poster: Ruth
Dated: Sunday April 29 2007 - 7:54:42 BST

Hi,

I think you'll find it's in your css coding. Probably something you have set
as a general code for table, tr, or td that is doing something with the table cells.
Either shifting the text of the cell down, or putting some kind of top padding
in each cell.

As to the padding. You can code it as only 1 number if you want the same
padding on top, right, bottom, left. However, since I figured you didn't want
a lot of padding on top and bottom, given the type of bg you're using, I
used the 4 numbers to set all sides. Just so you know, the real problem for
the text alignment was to do with the image you had coded in all the items,
since it was coded in the style. That forced the item to 'center' based on
the text and the image and the image padding of 10.

Ruth

Poster: Ruth
Dated: Sunday April 29 2007 - 8:02:25 BST

:oops:

I forgot to tell you something I have been meaning to post.

You should move the calls for the milonic_src.js, mmenudom.js,
mmenuns4.js, and subs data file out of the table. They should be right
after the body tag, then the table.

Code:

<body style="text-align: right"><!--msnavigation-->
<script type="text/javascript" src="http://www.s2pmarketsignal.com/milonic_src.js">
</script>
<script type="text/javascript">
 if(ns4)_d.write("<scr"+"ipt type=text/javascript src=http://www.s2pmarketsignal.com/mmenuns4.js><\/scr"+"ipt>"); 
   else _d.write("<scr"+"ipt type=text/javascript src=http://www.s2pmarketsignal.com/mmenudom.js><\/scr"+"ipt>"); 
</script>
<script type="text/javascript" src="http://www.s2pmarketsignal.com/subs_data.js">
</script><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>
<h1 style="text-align: center"> 
<img border="0" src="3PhaseLogo1.jpg" width="48" height="54">Sand2Pirls 
Market Signal
<img border="0" src="3PhaseLogo1.jpg" width="48" height="54"></h1>
<div align="center">

The only call in the table should be the main data file that you want in that
one cell.

Ruth

Poster: Ruth
Dated: Sunday April 29 2007 - 23:31:00 BST

Hi,

After some testing, it is the td code with vertical-align:bottom. The easiest
way to fix it for the pages like that is to create a .menutd{vertical-
align:middle} Then in the td cell where the main menu is set it to

Code:

<TD class="menudtd" align=middle>
            <P align=center><FONT face="Trebuchet MS">
            <SCRIPT src="embedded_main_menu.js" 
            type=text/javascript></SCRIPT>
            </FONT></P></TD>

That fixes it. One thing you need to keep in mind is that some generic css
codes such as table, tr, td, margin, and padding [in some cases] can affect
the menu because it is made up of divs, tables, spans etc.

Ruth

Poster: dlpirl
Dated: Monday April 30 2007 - 0:29:07 BST

In my HTML code, I actually do have only the call to the main menu in the table. What you seeing with view source is what happens after FrontPage 2003 does its thing integrating top.htm into all pages. Unless there is some downside I don't see, I prefer to maintain my code in only one place, top.htm. You can see below my HTML from top.htm.

Code:

</head><body>
<script type="text/javascript" src="http://www.s2pmarketsignal.com/milonic_src.js">
</script>
<script type="text/javascript">
 if(ns4)_d.write("<scr"+"ipt type=text/javascript src=http://www.s2pmarketsignal.com/mmenuns4.js><\/scr"+"ipt>"); 
   else _d.write("<scr"+"ipt type=text/javascript src=http://www.s2pmarketsignal.com/mmenudom.js><\/scr"+"ipt>"); 
</script>
<script type="text/javascript" src="http://www.s2pmarketsignal.com/subs_data.js">
</script>
<h1 style="text-align: center"> <img border="0" src="../images/3PhaseLogo1.jpg" width="48" height="54">Sand2Pirls 
Market Signal
<img border="0" src="../images/3PhaseLogo1.jpg" width="48" height="54"></h1>
<div align="center">
   <table border="0" id="table1" width="100%">
      <tr>
         <td align="center">
         <p align="center"><font face="Trebuchet MS"> <script type="text/javascript" src="http://www.s2pmarketsignal.com/embedded_main_menu.js"></script></font></td>
      </tr>
   </table>
</div>

</body></html>

Poster: dlpirl
Dated: Monday April 30 2007 - 0:36:22 BST

Quote:

I think you'll find it's in your css coding.

Yep. Found and corrected it. Thanks.

Industrial Strength JavaScript and DHTML Menus

formatting problems for menu in table cell - (SOLVED)

a few more questions

a few more questions (OK, done)

oops!