spaces between menu items
spaces between menu items
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
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?
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
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!
Thanks for your help!
Jonsie
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
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
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
Code: Select all
"<img src=1px.gif border=0 height=10>","# onbackcolor=transparent",,,1
Hope that helps,
Kevin