spaces between menu items

Please note that official support for this menu version has now ceased. There are still plenty of users, though, and the forum is still running. Some of our long-time users may be able to help you out.
Post Reply
cjones
Beginner
Beginner
Posts: 7
Joined: Tue Dec 16, 2003 9:55 pm
Contact:

spaces between menu items

Post by cjones » Tue Dec 16, 2003 10:00 pm

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?
Jonsie

User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz » Tue Dec 16, 2003 10:17 pm

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

cjones
Beginner
Beginner
Posts: 7
Joined: Tue Dec 16, 2003 9:55 pm
Contact:

Post by cjones » Tue Dec 16, 2003 10:49 pm

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?
Jonsie

User avatar
Hergio
Milonic God
Milonic God
Posts: 1123
Joined: Wed Jun 12, 2002 7:46 pm
Location: Rochester, NY

Post by Hergio » Wed Dec 17, 2003 3:16 am

I cant view the page...I get an unhandled exception error. Take care of that and let us know.
Dave Hergert
Software Engineer
"Helping to make the menu better, one :?: at a time."

cjones
Beginner
Beginner
Posts: 7
Joined: Tue Dec 16, 2003 9:55 pm
Contact:

Post by cjones » Wed Dec 17, 2003 8:39 pm

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!
Jonsie

User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 » Thu Dec 18, 2003 2:16 am

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

cjones
Beginner
Beginner
Posts: 7
Joined: Tue Dec 16, 2003 9:55 pm
Contact:

Post by cjones » Thu Dec 18, 2003 4:53 pm

Howdy!
v3 for now.
Thanks, Kevin.
Jonsie

User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 » Thu Dec 18, 2003 11:04 pm

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

Code: Select all

,"<img src=menu_button01.gif border=0><img src=1px.gif border=0 height=10>","url01.html",,,1
,"<img src=menu_button02.gif border=0><img src=1px.gif border=0 height=10>","url02.html",,,1
(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:

Code: Select all

,"<img src=1px.gif border=0 height=10>","",,,1
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:

Code: Select all

"<img src=1px.gif border=0 height=10>","# onbackcolor=transparent",,,1
although you might also want to remove the menu's border or make the border color transparent.

Hope that helps,

Kevin

Post Reply