Problems centering menu

[paulbeaney]

I have a menu at http://www.soundonsound.com?dhtml which refuses to center itself, no matter what I try (on any browser). I have attempted to implement all the suggestions from past posts in this forum, but to no avail.

I know I 'm probably missing something simple - it's just a question of "what?""

Thanks,

- Paul


Extract from menu data (menus generated from a database):

with(menuStyle=new mm_style()){
align="center";
onbgcolor="#cc0000";
oncolor="#ffffff";
offbgcolor="#000000";
offcolor="#ffffff";
separatorcolor="#888888";
separatorsize=1;
padding=1;
fontsize="90%";
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="#ffffff";
pagebgcolor="#000000";
headercolor="#000000";
headerbgcolor="#ffffff";
overfilter="Fade(duration=0.2);Alpha(opacity=100);";
outfilter="randomdissolve(duration=0.3)";
itemposition="center";
}

with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
menuwidth="100%";
screenposition="center";
align="center";
aI("text=    Home    ;url=http://www.soundonsound.com/;status=Back To Home Page;");
etc...
}

[kevin3442]

Hi Paul,

We'll need more to go on. It's hard to tell from your description and the code you posted exactly what your goal is. For example, I see menuwidth="100%", so you'll end up with a menu bar that spans 100% of the available width. But I also see screenposition="center" which will essentially have no effect with menuwidth="100%". I also don't see any top position defined, and I see position="relative" which makes me think that maybe you're putting the main menu in a table. But if you were, then centering would not be as much of an issue; you didn't mention either way whether the menu is in a table. I see align="center" so I'm wondering if you're talking about centering the text within menu items, or centering the entire menu on the page, or both.

Do you want a menubar that spans the width of the page, with the menu items centered withim thath bar? Should each item take up the same amount of space, or should the allocated space be determined by the length of the item? Should all of the available space within the bar be used?

Try this: Describe as best you can what your goal is, include a mockup image if you can. Post a url to a test page if you can. If you can't then post your entire menu_data code, as well as the html code (from the client side if you're using php, etc) from a page that uses the menu. Please put the posted code from each file inside of [code][/code] BBCode tags

Cheers,

Kevin

[Maz]

Kevin the links at the top.

I'm looking in Safari and it looks fine to me, or did you fix it?
maz

[kevin3442]

Kevin the links at the top....

Well... right you are Maz. No how did I miss that? Oh... I know... I was being stooopid! (Sorry 'bout that Paul).

I'm still not completely sure what the centering goal is, but since the menu bar spans 100%, I'll assume that the goal is to center the menu items within the menu bar. I think the key here will be the menualign property. Before we get to that, I'd recommend taht you:

(1) Remove the call to drawMenus() from the div where you currently have it and put it at the end of menu_data.js.php

(2) don't use position="relative". That's normally used for placing the menu in a table (it has other uses, but not needed here).

And now the centering part:

(3) In your "Main Menu", in the following code:

Code: Select all

style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
menuwidth="100%";
screenposition="center";
align="center";

with this:

Code: Select all

style=menuStyle;
top=10;
alwaysvisible=1;
orientation="horizontal";
menuwidth="100%";
menualign="center";
screenposition="center";
align="center";

Note, I've removed position="relative" and added top=10 and menualign="center". Change the value of top to position the menu where you want it vertically.

Hope that helps,

Kevin

[paulbeaney]

Thanks for the assistance. You guessed my requirement correctly and I now have it working perfectly!

I did a slight variation on what you suggested - I kept the "relative" position property, and the DrawMenus() in the same place, but put a table round it. This gets me nicely round the problem where different browsers render the very top part of the page at slightly different heights.

Of course, my client has now decided that they prefer the menus left aligned...

Thanks,

- Paul