Center Menu

[smee]

When using Milonic menu...How do I center my menu? It automatically flush left.

[Ruth]

Hello,

Try screenposition="center"; in the menu definition, up in the area you have the alwaysvisble=;style=; stuff in the main menu.

There are some links below my name to menu parameters available that you can set.

Ruth

[smee]

Hi Ruth -

Help!

I'm having problems with centering my menu on Firefox. I had added screenposition="center"; in the menu definition, up in the areaalwaysvisble=;style=; stuff in data_menu.js as you had sugguested. Still doesn't work properly on Firefox. IE works fine.

Here is the URL on what it looks like if you check it on Firefox.
http://depts.washington.edu/envdev/design/
It flush left which is what I don't want.

Is it because it is in a div?

Smee

[Ruth]

Hi,

OK, having seen the page, I can see that screenposition="center"; is not applicable since this is a relative positioned menu. You need to fix a couple of things to get the menu to go across the div and get the items to center.

1. since it's relatively positioned, remove top=10, left=10, and screenposition="center"; from that main menu.

2. add menuwidth="100%"; menualign="center"; It is the menualign="center"; which will center the items in the 100% span menu, the 100% should be the 'div' that it spans.

However, it still may be different in different browsers based on font settings. The best thing is to set a fixed font that gets it to be the closest in most of the browsers, using pixels.

You will need to experiment on this. I found that setting fontsize=10; seemed to make it the same in both browsers at my resolution of 800x600.

Ruth

[smee]

Hi Ruth -

Thanks for your suggestions, it works on the PC but later on I found out that MAC it doesn't. I also noticed when I played around on the MAC with fontsize that it's different on MAC and PC. Right now, it looks fine on my MAC but when testing it out on the PC, it extend outside the box. I played with a variety of size but it seems when I go 6.5pt it is too small but 7pt goes outside the box. It driving me crazy.

Do you have anymore suggestions?

smee

[Ruth]

Hi,

You are not going to get it the same on a Mac and PC. Mac screen resolution is based on the print media system and is 72dpi resolution, dots per inch, but Windows is based on computer [graphical I think, ppi pixels per inch] and is usually 96dpi. The same fonts will then be a different size, on the mac 1/6th of 72, on the PC 1/6th of 96. So, the windows font ends up bigger. Not sure on the math, but the explantion is why the fonts are different in Mac vs PC.

The closest so that they look pretty much the same is using px.

There are two solutions to make them look the same

1. use images with the text as part of the image, that would be the same on both OS, however that is a problem for people who need to be able to have large text.

2. create stylesheets specific to the system and get a detector script so you can 'pick' the correct stylesheet based on whether it's a Mac or PC.

Other than that, I can only suggest using pixels, they are the most uniform across the different systems, % is terrible, pts and ems are not much better.

Ruth

[smee]

Hi Ruth -

I added menuwidth="100%"; menualign="center"; but it doesn't center Firefox.

Did I do it right?

with(milonic=new menuname("Main Menu")){
menuwidth="100%";
menualign="center";
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";
aI("showmenu=pr;text=PUBLIC RESOURCES;");
aI("showmenu=wh;text=WORKPLACE HEALTH;");
aI("showmenu=research;text=RESEARCH;");
aI("showmenu=ps;text=PROSPECTIVE STUDENTS;");
aI("status=Alumni & Friends Page;text=ALUMNI & FRIENDS;url=http://depts.washington.edu/envhlth/alumni/;");
aI("showmenu=fss;text=FACULTY/STAFF/STUDENTS");
}

[Ruth]

Hi,

I just noticed that you are way downlevel on the menu, you have to update to the newest version. That is probably what is going on, since fixes and changes have been made since that version. That version is from back in 2004 and I would have no idea how to do a lot of things from back then.

Ruth

[smee]

How would I update to the newest version?

smee

[Ruth]

Hi,

You'd go to the main Milonic site and click on the download button. Please note that you are using an unlicensed version of the menu. You need to apply for a license. Please read the info here about how to do that.

http://milonic.com/freelicreq.php Given you are an educational institution you should be entitled to a free license.

To get rid of the forced Milonic you must have a visible link to Milonic. Someplace on the page where the menu is you'd put something like Javascript DHTML Menu provided by Milonic.com as a link back to Milonic and that Milonic item will disappear.

Check out this site to see what I mean. At the bottom is the link back to Milonic to see how the Univ of Ariz does it.

Ruth

[conquistador]

Ruth,

Just registered to say thanks... Your post helped me. However, it would be most wise not to put 10 left or right, as then the page is 100%+20px.

Thanks again.

-Conquistador

[Ruth]

Hi,

As far as I'm aware the menu spans the page minus whatever margins have been set on the page. That is, it won't go into the margin area.


Ruth