subimage placement after menu text

[alexs]

I have a horizontal menu with items of fixed width, left aligned text, subimages and no seperators.

I would like to place the subimage directly after the menu text but appear unable to do this. subimageposition aligns the subimage realtive to the width of the menu item, which is undesirable because 'subimageposition="right"' will align the subimage to the right of the menu item box, leaving a large gap between the text and subimage and making the subimage appear associated with the following menu item.

Short of creating an image for every menu item to replace the text and subimage, is there any way I can simply have the subimage immediately follow the text rather than be left/right aligned to the menu item box?

[Ruth]

You could try placing the code subimagepadding=2px 10px 2px 2px;"); in the aI string, changing the pixel value to what you need. It seems to work in IE5.5, Netscape 7.1, Opera 7.11, Firebird .07. You will need to place that in each aI string that would have a subimage, and remove the subimagepadding= from the style definition. But, you need to be aware that if the people change their font size, your item may shift to wrap making it a two line item and that can change the look as to position of the subimage. The other option, which is what I would choose, is to position the subimage to the left, subimageposition="left"; It will sit right next to the text. -> Resources something like that.

Ruth

[alexs]

Thanks

Unsurprisingly, after a bit a messing around following my post I came to a similar solution. Since most of my items have subimages, I set the default in the style definition and set the RHS padding of items with no subimages to be the pixel width (+ padding) of the subimage. I also removed the fixed width menu items restriction since that always resulted in different gaps between the text and the following subimages - I wanted them to be consistent.

I did not go for your preferred solution as it does not fit well into our layout and design.

It is a pity that there is not a

Code: Select all

subimageposition="flow"

option to allow subimages to be placed directly after the text, rather than forcing their alignment to the border of the menu item.

[Andy]

Try adding noSubImageSpacing=true; to the top of your menu_data.js file

Should give you the desired effect.

Cheers
Andy

[alexs]

Thanks.

The behaviour of noSubImageSpacing=true; is not quite as expected - it could be a bug: If align="center" then items without subimages are centered, but items with are always left aligned

Removing the fixed width aspect obviously "fixes" this, but then the menu items are all bunched together. I can get round this by setting the separator color to the corresponding bgcolor and set a large separator size for the padding, although the highlighting of the menu items will obviously be smaller when mouseover occurs. I also need a dummy first/header item so the first menu item is not cramped up against the LHS.

So two solutions, both not perfect and each with their own problems :-/

[Ruth]

A test page with your menu would be helpful.

Ruth