problems center menu

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

problems center menu

Poster: cubefree
Dated: Friday July 9 2004 - 19:40:02 BST

ok, trying to center menu and I've read several great posts about it, but... something's off.

I want to center my menu within an area I've defined as 770 x 110. The area (770x110) itself will be left-aligned. That should be clear enough. Here's the code. I've tried many variants and can't seem to affect it. I've taken off the CSS to eliminate that.

Test URL: http://www.cubefree.com/clients/star/dev/spktrn/test.php

CODE:

Code:

// banner and logo
with(bannerStyle=new mm_style()){
align="center";
}

with(milonic=new menuname("banner")){
style=bannerStyle;
top=0;
left=0;
menuwidth=770;
menuheight=110;
menualign="center";
alwaysvisible=1;
orientation="vertical";
aI("image="+DOM+"images/color/ADB8E6.gif;imageheight=3;imagewidth=770;");
aI("image="+DOM+"images/logo/banner_ylw.gif;offbgcolor=#FEFED9;itemheight=99;url="+DOM+"index.php;align='center';");
aI("image="+DOM+"images/color/ADB8E6.gif;imageheight=8;imagewidth=770;");
}

Using Version 5.31a - Built: Friday July 2 2004 - 10:43 / IE6 / Win2000

Poster: Maz
Dated: Friday July 9 2004 - 19:55:53 BST

Have you tried screenposition="center";

maz

Poster: cubefree
Dated: Friday July 9 2004 - 20:14:40 BST

Yes, but I don't want to center the menu on the screen.

I want to center the whole collection of elements within the area defined by the menu.

Poster: Ruth
Dated: Friday July 9 2004 - 20:44:26 BST

I downloaded your page and looked at the menu. You have it defined at 770x110. To test it I put a red border around to see where the menu is, well it spans that width and height. So, do you mean you want the image of the stars, people and text centered? If that's what you want is to align the images to the center, then in this code insert

Code:

// banner and logo 
with(bannerStyle=new mm_style()){ 
align="center"; 
imagealign="center";
} 
 

I tested it in Netscape 7 and IE 5.5

Ruth

Poster: cubefree
Dated: Friday July 9 2004 - 22:45:38 BST

Thanks, I tried that. And it worked for the top part of the banner.

But the real challenge is the top horiz menu, please see http://www.cubefree.com/clients/star/dev/spktrn/

I applied your code comments that style,

Quote:

Code:

// banner and logo 
with(bannerStyle=new mm_style()){ 
align="center"; 
imagealign="center"; 
}

http://www.cubefree.com/clients/star/dev/menu/top_data.js, but don't seem to be getting the whole collection of menu elements centered together in the blue strip. They are center separately and distributed over the width 770.

I could of course simply add spacers left and right of the cluster, but thought the menu already covered that option in an property. Is there a better way?

Poster: kevin3442
Dated: Saturday July 10 2004 - 0:38:09 BST

Hi cubefree,

Do you want the red border, or is that just for testing as Ruth had done? If you don't want it, remove

Code:

bordercolor="#F51121";
borderstyle="solid";
borderwidth=1;

from topStyle, or else the border will add to the overall width.

Then, try removing align="center;" from topStyle (it only affects text as far as I know, so it's not doing anything for you).

Leave imagealign="center;" in topStyle to center the item images, just as you have it.

Add menualign="center"; to your "topMenu" properties. menualign is meant to align the entire collection of images within the overall menu container.

Does that help?

Kevin

Poster: cubefree
Dated: Saturday July 10 2004 - 7:05:39 BST

Hmmm.... none seemed to work Kevin, but

Code:

aI("image="+DOM+"images/spacer.gif;imagewidth=100;imageheight=1");

does...

Can't spend too much more time on it. But thank you both for trying.

The descriptions for the properties are a little unclear in the properties lists. Not sure if this version had altered that, but several combos still didn't do it.

Poster: kevin3442
Dated: Saturday July 10 2004 - 8:00:25 BST

Odd... it worked for me using your example page's code and your menu code, in IE6/win2k. Also worked in NS7.1. What browser are you seeing the problem in? Then again, maybe I don't understand the problem???

If you found a solution, then more's the good.

Cheers,

Kevin

Poster: Ruth
Dated: Saturday July 10 2004 - 8:15:09 BST

If you don't want to use an image, you can just code

Code:

aI("text= ;itemwidth=whateversize;type=header");

I only suggest it because I noticed you had headers commented out. That way there's no pointer showing if someone mouses over that blank area. Put one at the beginning and one at the end. I've got IE5.5 and I couldn't get the menualign to work. Actually, I think you have a little more control this way as to exact positioning being able to widen or lessen either one of the aI fill strings.

Ruth

Poster: cubefree
Dated: Sunday July 11 2004 - 4:52:53 BST

I'm using IE6, win2k.

Ruth, I'm a bit leary of putting " " in the middle of an aI() item.

Popups have failed due to the extra semi-colon in the middle. So I'll stay away from that one lest it fail in some browsers.

Thanks again for your posts!

Poster: Ruth
Dated: Sunday July 11 2004 - 13:49:18 BST

You might still want to use the type=header to keep the pointer from acting as if that's a clickable item. If you are using the header with a specified color, you can put a header code into the item itself with a different color specified i.e. headerbgcolor=bgcolor of the menu here.

I didn't know about that problem with the non breaking line space. Thanks for the info, I'll use an image now instead.

Ruth

Industrial Strength JavaScript and DHTML Menus

problems center menu