hey everybody,

I have a problem I can't seem to figure out.

I am trying to create a vertical menu that i am putting over some images.

How do i control the space between the links?

i don't have the files online yet, but there are arrows that i'm trying to line up with the links.

The top one does, but the rest don't line up.

any help would be greatly appreciated.

thanks !!!

Can you give some code or a screen shot? It would depend on how your menu is coded. Are you using an unordered list? More info would be helpful.

How are you creating the menu ? Are you using an unordered list ?? If not, that is the usual method for creating that type of menu. You can then control spacing between the menu items using margin and padding. You can put the graphic in as a background on the <li> elements, or on the <a> if you want a roll-over effect.

here's the code in my css...

#sidenav { height:175px; width: 100px; top:228px; left:60px; }
#sidenav a { text-decoration: none; color: #133463; font-size: 11px; font-weight: bold; }
#sidenav a:hover { color:silver;}
#sidenav span { color: white; margin: 0 0; }

i have the main background image as a big file, which has the arrows in it.

i'll try to put a screenshot up as well.

here's what i have. I know, i can probably do it differently, but here's what I can do.

www.insiteci.com/sample/windsor

thanks!!!

Well, the first thing I would suggest is to ditch the absolute positioning for everything, that is not necessary and will cause you other problems.

2nd suggestion - don't make the background one big image as you have done. I would make the header 1 image, then create the sidebar area using a tileable image that tiles vertically only.

For your menu, using paragraphs as you have is not a good solution. Try this instead:
#sidenav {
height: 175px;
width: 100px;
top: 225px;
left: 40px;
padding: 0px;
margin: 0;
list-style: none;

}
#sidenav li{
margin: 0;
padding: 0px 0;
margin: 0 0 14px 0;
}

#sidenav a {
text-decoration: none;
color: #133463;
font-size: 11px;
font-weight: bold;
}

<ul id="sidenav">
<li><a href="http://www.insiteci.com/sample/windsor/league.php" target="_blank">League</a></li>
<li><a href="http://www.insiteci.com/sample/windsor/schedules.php" target="_blank">Schedules</a></li>
<li><a href="http://www.insiteci.com/sample/windsor/sponsors.php">Sponsors</a></li>
<li><a href="http://www.insiteci.com/sample/windsor/canadians.php">2007 Canadians</a></li>
<li><a href="http://www.insiteci.com/sample/windsor/contact.php">Contact Us</a></li>
<li><a href="#">Links</a></li>
</ul>

You're going to have some problems getting the list to line up exactly because your background image is not consistent in spacing and since its purely a background graphic, it's not flexible. By making the arrow a background image on the <a> in the list itself, and using borders for the separating lines, you would make the whole thing more flexible.

ok, now i just need to figure out what it is your saying here!

I get the concept, i just need to figure out how it works in my head!

thanks Lady!!

thanks, i figured it out!

Woooo!

Woo Hoo !! Glad you got it !