Increasing spacing in CSS drop-down menu bar

notarypublic · 03-14-2011, 03:44 PM

Some of the feedback for my current site is that there could be more spacing between the links in the navigation bar. It's constructed as an unordered list and uses CSS to hide and hover the drop-down menu items when the mouse moves over them.

I can change the width of the top link using a class, like

Code:

.navBarTitle {
width: 5 em;
}

------

<li class = "navBarTitle"><a href = "#">Link</a></li>

But by using a class this way they all end up the same length. I could use id's for each link, but that seems inefficient. Is there a way to append a set length of pixels at the end of the <li> before closing the </li> tag and starting the next one? I've tried setting different margins, using padding, spans.. No luck.

DHDdirect · 03-14-2011, 07:49 PM

I think the navigation looks good. but if you want you can cheat by putting just a couple spaces at the end using " " of course it's not best practice.

notarypublic · 03-14-2011, 08:03 PM

Quote:

Originally Posted by DHDdirect

I think the navigation looks good. but if you want you can cheat by putting just a couple spaces at the end using " " of course it's not best practice.

I just uploaded a new version of the site (tiled background, different font color, some other minor fixes) and fixed the spacing issue by changing the padding value for the links inside of the <li> tags.

HTML Code:

#nav ul li a {
padding-right: 2em;
}

-------------

<ul>
  <li><a href = "#">A link</a></li>
</ul>

This causes a slight bump on the right hand side of the links to increase the word spacing. As an added plus, this makes the boxes for the drop-down menu slightly larger as well.

03-14-2011, 03:44 PM	#1
notarypublic Silver Member Join Date: Feb 2011 Posts: 191	Increasing spacing in CSS drop-down menu bar Some of the feedback for my current site is that there could be more spacing between the links in the navigation bar. It's constructed as an unordered list and uses CSS to hide and hover the drop-down menu items when the mouse moves over them. I can change the width of the top link using a class, like Code: .navBarTitle { width: 5 em; } ------ <li class = "navBarTitle"><a href = "#">Link</a></li> But by using a class this way they all end up the same length. I could use id's for each link, but that seems inefficient. Is there a way to append a set length of pixels at the end of the <li> before closing the </li> tag and starting the next one? I've tried setting different margins, using padding, spans.. No luck. __________________ http://www.joshualoves.com/

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

03-14-2011, 07:49 PM	#2
DHDdirect Gold Member Join Date: Feb 2011 Location: Australia Posts: 369	I think the navigation looks good. but if you want you can cheat by putting just a couple spaces at the end using " " of course it's not best practice.