b/g image tiling when menu text wraps

Poster: kevinl
Dated: Wednesday October 12 2011 - 16:38:58 BST

Hi,

I have a site where the client will have control of page names, so in some cases the page name/menu text will need to wrap to fit into the width allocated for the menu. I'd like to use background images with rounded corners - problem is on the menu items that wrap, the background image tiles:



Now in the example shown all four corners are rounded, but I could live with just the top ones and the bottom being squared off. So if I could prevent tiling and also set a background colour to the same orange, that should work perhaps. Can this be done, or are there other solutions?

Thanks,
Kevin

Re: b/g image tiling when menu text wraps

Poster: Ruth
Dated: Thursday October 13 2011 - 1:17:02 BST

Hi,

Yes but with either 'look' you would have to use css and a menu property called divides. However, if your client will be adding items to a menu, I wouldn't suggest this since it is time consuming and especially if the client adds an item in the wrong place. This is an explanation page, when you get there, change your font size, watch the menu at the top expand but keep its shape. Lower down is a screenshot of two menu items with different text but the same 'shape' just one bigger than the other. This is a horizontal menu, but with a vertical the process is similar, again css and menu divides.

http://support.milonic.com/ruth/css_rou ... menubg.htm

If you want to use css I'd be glad to help you on that. It takes so much longer to explain it than it really takes doing it once you get the drift but I could set up one item using your images and post the code back here for you to see. I have all the time in the world so I mess with stuff like this a lot.

Ruth

Re: b/g image tiling when menu text wraps

Poster: kevinl
Dated: Thursday October 13 2011 - 17:02:59 BST

Hi Ruth,

Many thanks for your helpful (as always) reply and if you don't mind I will take up your kind offer of help.

I think I understand how your example works, but I'm stuck on the very first step - the 'divides' property, I see how it works with a horz menu (played with values other than 2) but I cannot get it to do anything to my vertical menu (with and without orientation="vertical"; in). The entry for 'divides' seems to be blank in the docs.

I've put my files here http://solomon.ie/ruth.zip - I just need this for the main menu, not the subs and do not need page matching, and your blue rounded images will be fine, I'll make up my own later.

I should have been clearer about the client adding pages - this is done via my CMS which will generate the menus using a PHP script, so the client will never need to look at the JS.

Many thanks,
Kevin

PS just saw the file upload so attached zip file, will leave on server also, just in case

Re: b/g image tiling when menu text wraps

Poster: Ruth
Dated: Friday October 14 2011 - 7:49:47 BST

Yes, I was doing the divides explanation and sort of got lazy I finished the horizontal but never did the vertical which requires that you eliminate the separator. No matter what you do, if you have a separator divides won't work. I'll get back to you when I get something, probably later tomorrow.

Ruth

Re: b/g image tiling when menu text wraps

Poster: kevinl
Dated: Friday October 14 2011 - 10:30:00 BST

Hi Ruth,

Thanks for that.

I think I did try removing the separator and saw no difference. By separator I assume you mean this menu item:

aI("text=;itemheight=7;separatorsize=1;type=disabled;separatorcolor=#000000")

If I do need it (and I may) perhaps I'd need a dummy menu item of some sorts?

Thanks,
Kevin

Re: b/g image tiling when menu text wraps

Poster: Ruth
Dated: Friday October 14 2011 - 12:56:36 BST

Yes, but you have to make sure that you have removed that separator coding from the style section for the main menu also.

I've put up two zip files, one for item rounded corners and the other for a menu rounded corner. Hopefully my explanation on the pages is easy to understand. If you need more help just post back here.

http://support.milonic.com/ruth/kevinl/ ... orners.zip

http://support.milonic.com/ruth/kevinl/ ... orners.zip

You will have to put your own menu program files with the pages or the menu won't show

Sorry the color isn't right, I already had finished the images and the color is a bit lighter than your colors.

PS: I never even noticed the file upload, duh.

Ruth

Re: b/g image tiling when menu text wraps

Poster: kevinl
Dated: Friday October 14 2011 - 18:26:48 BST

Hi Ruth,

Many thanks for your help, I've gone through your files and have it working now.

One little change I made to simplify things was to use the same top row (the one with the whitespace separator added) in all cases including the very first item - that would need a space anyway, but I cans see that some may need it right against something.

Attached is a screen grab using my images .

Thanks again for your help Ruth - more than got my value from the license fee in just that!

Re: b/g image tiling when menu text wraps

Poster: Ruth
Dated: Friday October 14 2011 - 22:08:13 BST

You're very welcome. It looks nice!

Ruth