Centering Menu Text W/ Popup Arrow

Poster: fulmer
Dated: Friday May 28 2004 - 6:57:06 BST

Hello,

I've noticed that when you have a few items that link to pages mixed with a few items that have popups (right arrow), the items with the popups arn't completely centered. The arrow makes the align="center"; not quite centered.

Here's an example:

| Link 1 |
| Link 2 |
| Popup 1 |
| Link 3 |
| Link 4 |

The "popup 1" is pushed a few px to the left because of the arrow.
How do you globally compensate for this?

Poster: fulmer
Dated: Tuesday June 1 2004 - 6:52:40 BST

* bump *

Poster: Maz
Dated: Tuesday June 1 2004 - 7:10:26 BST

I was looking for a link to see what's happening, have you tried using itemwidth? and/or menuwidth?

maz

Poster: fulmer
Dated: Wednesday June 2 2004 - 1:23:14 BST

Thanks for the reply
I was getting worried no one would reply

Here's the link: http://fulmer.mine.nu/

If you look at the first few menu items (with out popup's) then look at the first item with a popup (4-legged) you'll see that the it's not quite centered. It's been bumped a little to the left because of the arrow showing that there is a popup menu.

You can also check out the Japanese menu (http://fulmer.mine.nu/index_j.asp). It might show the problem a little better.

Poster: Ruth
Dated: Wednesday June 2 2004 - 10:30:56 BST

Yes, the text won't be centered, but if you look at it, the full menu item is centered. That is, the menu item includes the text and the image so it's all centered. The only thing I can think to do if you want to shift some of the ones without images over is to put non breaking line spaces in those after the text to shift to match that one. Or maybe a transparent blank type image of some size.

Ruth

Poster: fulmer
Dated: Wednesday June 2 2004 - 15:50:23 BST

Thanks for the reply!

That's what I was thinking too... but I was hoping for some "global setting" that would offset the items. I guess I'll just put that on the "wish-list"

Poster: kevin3442
Dated: Wednesday June 2 2004 - 16:02:23 BST

Ruth's idea of using a transparent gif is a good one. the width of the image would need to be the same width as your subimage (the "arrow" that indicates the availablility of a submenu). You could take a couple of different approaches:

(1) You could bump the non-submenu-opening items over to the left, by placing the transparent gif on the right. You could do this using the menu's built-in image item property, along with setting the imageposition property to right. Like so:

Of course, this approach would mean that all of your main menu items are slightly off center, to the left.

(2) You could bump the submenu-opening items to the right by placing the trans gif on the left. Again, you could do this using the menu's image item property (imageposition is left by default, so no need to set that). Like so:


If you already use the image property to put menu item icons in each item, then you can still insert the spacer image using a plain old <img> tag in the text= property of each item. Like so:


Note that your spacer could also be a 1px transparent gif, then you could adjust the width of the space, using the imagewidth item property if you inserted the image with the image property, or the width attribute if you inserted the image in an <img> tag. I would think, however, that it would be easier to adjust the width of the image itself; that way you can fine tune the spacing of all of the items without having to recode.

(3) There is another, non-image-based approach. You could adjust the padding on the left side of submenu-opening items. You used to be able to do this directly with the padding item property, but that seems to have changed. You should still be able to do it with the relatively new rawcss item property. Like so:

The example above would add 5px of padding on the left of the item, effectively moving the item text to the right.

Hope that helps,

Kevin