Align backgroundimage to bottom?

Poster: Richard iCREW
Dated: Monday April 25 2005 - 13:57:29 BST

See http://www.kobalt.nl/

I try to achieve rounded corners for the top and bottom of a submenu by giving the first and last menuitem a rounded background image. I made the bg images longer (100px) than actually needed. This to prevent them from visibly repeating themselves in a menu item that is higher due to long text (hope you understand what I mean).

This works fine for the top menuitem, but it doesn't work for the bottom menuitem. At the bottom it apears as a square corner because the image is 100px long and it aligns to the top of a menuitem. The obvious question, is it possible to align a background image to the bottom of a menuitem?

Thanks!

Poster: Ruth
Dated: Monday April 25 2005 - 15:10:15 BST

Hi Richard,

I don't think you can do that with a bgimage. However there is a way to do it.

1. change the bgimage for the last item you now have in a submenu to the m one, the one for the middle.

2. create another image using the bottom of the one you have now, make it about 5px high, I kept the same width you had.

3. create a new aI string at the bottom of the submenus where you want the rounded corners

And Voila! you have rounded corners. Actually both the right and left corners are rounded. If you decided you wanted to round the top on both sides, you could do the same thing, using the reverse of course with the corners up.

Just as a matter of opinion, I like the way it is. It grabs the eye because it's unusual having only the top left corner rounded like that. If I were doing it and putting an image at teh bottom for rounded corners, I think I'd make it so only the bottom left were rounded. Then again, I'm probably strange

Ruth

Poster: Richard iCREW
Dated: Tuesday April 26 2005 - 9:49:21 BST

Hi Ruth, thanks for your quick reply!

I tried your method before doing it the way I descriped in my post above. But it gave me a javascript error of some kind, can't remember the exact message, but something like it expected a text or url.

I didn't use the type=header property, could that be the problem? What does this property do anyway?

Poster: Ruth
Dated: Tuesday April 26 2005 - 14:46:59 BST

Hi Richard,

Well, you can use it in your design. Let's say you want your vertical drop down menus to be divided by categories, you could define the headerbgcolor and headercolor in the style section [you can also define that in the item itself- maybe if you're only using one in the menu, or maybe a particular one you want a different color than most of the headers.] So, you could have a menu with a black background and white text, and you could then have the headers as white with black text. So maybe you'd have something like:

~WebHelp~
item 1
item 2
item 3
~ Maps ~
item 1
item 2

and so on. You can also use them in a horizontal menu, maybe at the beginning and end with images to 'bracket' the menu items.

Ruth