spaces between menu items

Poster: cjones
Dated: Tuesday December 16 2003 - 21:00:06 GMT

I am creating a vertical menu and I would like to put spaces between each menu item so they are individual bars. How do I do that?

Poster: Maz
Dated: Tuesday December 16 2003 - 21:17:58 GMT

Normally you use the styles separator, size, color and padding.

But I'm not sure if you made a mistake asking for vertical separators in a vertical menu, maybe you meant to say horizontal in vertical or vertical in horizontal, that would make more sense.

Regards
maz

Poster: cjones
Dated: Tuesday December 16 2003 - 21:49:55 GMT

Apparently my request is confusing. I will show you what I mean. Go to
http://www.ursacomponents.com/Demos/Web ... t=1&Task=2. See how they have red bars (Basic Design, Advance Design, XML, etc.). I want to do something similar to that. How do I get my "home" button to be a bar, then below that my "contact us" button to be a bar. I don't want the bars to touch. Am I making sense?

Poster: Hergio
Dated: Wednesday December 17 2003 - 2:16:35 GMT

I cant view the page...I get an unhandled exception error. Take care of that and let us know.

Poster: cjones
Dated: Wednesday December 17 2003 - 19:39:04 GMT

Try http://www.ursacomponents.com/Demos/WebMenudemos/ (this is not my site, I am trying to create a verticle menu similar to this).

Thanks for your help!

Poster: kevin3442
Dated: Thursday December 18 2003 - 1:16:49 GMT

Hello again Jonsie,

I know you're waiting for Dave to reply, but I also know he's a little swamped right now. I'm willing to help if you'd like. But I need to know if you want to do this in v3 or v5?

Cheers,

Kevin

Poster: cjones
Dated: Thursday December 18 2003 - 15:53:19 GMT

Howdy!
v3 for now.
Thanks, Kevin.

Poster: kevin3442
Dated: Thursday December 18 2003 - 22:04:39 GMT

Hi Jonsie,

In v3, you essentially either need to (1) increase the height of each menu item or (2) add a blank "dummy" item between real menu items as a spacer, and control its height. The sticking point is that there is no direct way in v3 to control the height of a menu item. You can programatically alter the height of the entire menu, but that is mostly effective in horizontal menus. I'm assuming yours is vertical. You can, however, indirectly control the height of a menu item using the old 1-pixel transparent gif trick.

First, use whatever graphics application you prefer to create a 1-pixel traqnsparent gif; let's call it 1px.gif.

Modify existing menu items. Using an <img> tag, you can place this image in the first field of an existing menu item (either at the beginning or at the end or, sometimes, both). Then use the height attribute in the <img> tag to adjust the menu item's height. If your menu's bacground color is already transparent, this would be an easy way to make the second through the last item in the menu higher, effectively icreasing the perceived space between items. Like so

(Note: putting 1px.gif on either side of the first field and then adjusting the width attribute is also an effective way to more finely control spacing between items in a horizontal menu, without using non-breaking spaces or increasing overall padding)

Add blank spacer items. Alternatively, you could use an <img> tag to insert 1px.gif into a dummy menu item placed between two others. Like so:

This dummy item serves as a spacer between the two real menu items. Adjust the <img> tag's height attribute to adjust the space between items. if the menu's background is not already transparent, you could make the spacer item transparent like so:

although you might also want to remove the menu's border or make the border color transparent.

Hope that helps,

Kevin