problems with aligning menu into table cell

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

problems with aligning menu into table cell

Poster: jaq
Dated: Monday December 10 2007 - 20:49:47 GMT

hi everyone, my name is Jack. i just downloaded a melonic menu and i am trying to incorporate it in a design i did. i just want to make sure i get it right before buying a license to the menu.

this is how i want my website to look.
http://evanescencemedspa.com/design.html

this is how it looks right now on safari and firefox.
safari: http://evanescencemedspa.com/e_menu.html

firefox: http://evanescencemedspa.com/e_menu.html

someone please please help me. it is the first time im doing this. and by the way im using dreamweaver cs3 to build it and im working on Mac OS X. thank you.

Re: problems with aligning menu into table cell

Poster: John
Dated: Monday December 10 2007 - 21:04:01 GMT

You have the Main Menu defined twice - once in the HTML, and once in the _data.js file. So - you get it twice!

Since your code indicates, at this point anyway, you are not putting it in a table cell, simply remove the script that contains the Main Menu code from your HTML.

Re: problems with aligning menu into table cell

Poster: jaq
Dated: Monday December 10 2007 - 21:18:37 GMT

did i fix it?

http://evanescencemedspa.com/e_menu.html

sorry im really bad at this.

Re: problems with aligning menu into table cell

Poster: John
Dated: Monday December 10 2007 - 21:30:47 GMT

Well, yes and no. The menu is now displayed only once, which, of course, is what you want. However, unless I missed it in the code earlier, you now have everything in a table. This calls for a different layout. See this page for instructions on how to do this (it's not as hard as it looks - just take your time!).

Also, change your oncolor="#ffffff"; in the Main Menu to something darker. The white text on that very light background is unreadable.

Not to worry - you're well on your way!

Re: problems with aligning menu into table cell

Poster: jaq
Dated: Tuesday December 11 2007 - 0:15:21 GMT

k see i have no idea what this means. i get the rest but not this part.

<HTML>
<HEAD>
<TITLE>Table Based Menu</title>
</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">

</SCRIPT>
<SCRIPT type="text/javascript" src="menu_data.js"></SCRIPT>

can someone explain to me what that means. thanks so much.

Re: problems with aligning menu into table cell

Poster: jaq
Dated: Tuesday December 11 2007 - 1:00:37 GMT

hi John. i think i figured it out. would you mind looking at this.

http://evanescencemedspa.com/menu_3.html

for some reason on firefox the bg color behind the menu shows white. it looks good on safari and firefox. but still not sure if i did it right. any tips would be awsome. thanks so much.

Re: problems with aligning menu into table cell

Poster: Ruth
Dated: Tuesday December 11 2007 - 2:52:21 GMT

Hi,

Which FF. I'm not seeing anything different, IE, FF or Safari.

As to your question about what looks like that strange code you didn't understand. That is the way to code only if you have to support NN4. So you don't need it unless you must support that browser, just use the one in the download

Code:

<script type="text/javascript" src="milonic_src.js"></script>   
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="menu_data.js"></script>

As to getting the menu to span the table cell. Since you have your table set at 820px, try setting itemwidth=117; in the main menu up by the position="relative"; Then in the last item you need to make it 122.

Code:

text=Contact Us;itemwidth=122;");

would be the end of that aI string.

It looks good to me. You could put the main menu into its own file and call the file in the cell instead of the putting the actual menu there. It makes it much easier for editing if you only have to edit a file instead of every page where the menu resides. Also, there is a new method available which we tend to forget since we did it the way you now have it for so long

This page gives a kind of tutorial showing both methods. http://support.milonic.com/beginners/ta ... /index.htm

Hope this helps, let us know which FF for the bg, and if you could do a screen shot that would be great

Ruth

Re: problems with aligning menu into table cell

Poster: jaq
Dated: Tuesday December 11 2007 - 5:21:21 GMT

k so everything was going good until i created the file embedded_main_menu.js after that nothing showed up. here are the files

http://evanescencemedspa.com/subs_data.js

http://evanescencemedspa.com/embedded_main_menu.js

and here is the file i tried to put my menu on.

http://evanescencemedspa.com/menu.html

please let me know what i'm doing wrong. thank you

Re: problems with aligning menu into table cell

Poster: Ruth
Dated: Tuesday December 11 2007 - 8:16:18 GMT

Hi,

You have an error in the script calls the ones with the if / else statement in them. It looks like they are wrapping to another line and that's causing the error. The if line must be one line, and the else line one line. If you are supporting Netscape 4, then use this one

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="subs_data.js" type=text/javascript>
</SCRIPT>

If you don't need to support that browser, and it's pretty out of date over 10 years I believe, then use this one

Code:

<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT src="mmenudom.js" type=text/javascript></SCRIPT>
<SCRIPT src="subs_data.js" type=text/javascript></SCRIPT>

I notice the table is now 100%, if you want the menu to go that wide, then set it to menuwidth='100%'; Then you can set menualign='center'; which will shift the items to the center evenly.

Below my name are links to style, menu and item properties that can be used in the menu. You'd want the menu properties to see about widths for menu and items

Ruth

Re: problems with aligning menu into table cell

Poster: John
Dated: Tuesday December 11 2007 - 14:23:44 GMT

Here is the correct HTML for making your menu work...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="http://www.milonic.com/">JavaScript DHTML Menu Powered by Milonic</a></noscript>
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="subs_data.js"></script>

<table width="100%" border="0">
<tr>
<td bgcolor="#993333">
<script type="text/javascript">
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
position="relative"
style=menuStyle;
aI("image=http://www.evanescencemedspa.com/images/leaf.gif;overimage=http://www.evanescencemedspa.com/images/leaf_on.gif;showmenu=Milonic;text=Home;");
aI("image=http://www.evanescencemedspa.com/images/leaf.gif;overimage=http://www.evanescencemedspa.com/images/leaf_on.gif;showmenu=Milonic;text=Laser Aesthetics;");
aI("image=http://www.evanescencemedspa.com/images/leaf.gif;overimage=http://www.evanescencemedspa.com/images/leaf_on.gif;showmenu=Partners;text=Skin Rejuvination;");
aI("image=http://www.evanescencemedspa.com/images/leaf.gif;overimage=http://www.evanescencemedspa.com/images/leaf_on.gif;showmenu=Links;text=Anti-Aging;");
aI("image=http://www.evanescencemedspa.com/images/leaf.gif;overimage=http://www.evanescencemedspa.com/images/leaf_on.gif;text=Skin Care;");
aI("image=http://www.evanescencemedspa.com/images/leaf.gif;overimage=http://www.evanescencemedspa.com/images/leaf_on.gif;text=Meet The Team;");
aI("image=http://www.evanescencemedspa.com/images/leaf.gif;overimage=http://www.evanescencemedspa.com/images/leaf_on.gif;text=Contact Us;itemwidth=122;");
}
drawMenus();
</script>
</td>
</tr>
<tr>
<td bgcolor="#993333">&nbsp;</td>
</tr>
</table>
</body>
</html>

You can see this working on one of my servers at http://www.west.asu.edu/sa/testsite/index.htm (it will be deleted tomorrow).

Follow Ruth's suggestions for correcting the width setting in your code to 100%.

The way you had it set up was essentially backwards to the instructions I sent you to, which is why nothing showed up. In addition, you were again trying to call the Main Menu twice, which we discussed yesterday.

With all due respect, more careful reading is necessary. You were jumping in with both feet before understanding what was required. Patience...

Re: problems with aligning menu into table cell

Poster: jaq
Dated: Tuesday December 11 2007 - 21:05:53 GMT

you guys are awsome. thank you for all your help. I really appreciate it. You're right John I should be more patient.