Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Menu position

Menu position

Menu position


I have a menu bar along the top which looks like this:

I am trying to narrow slightly the gaps between each menu item while keeping it centered as in the screenshot.

The CSS looks like this:

CODE -->

ul#nav li a { 
    padding: 9px 0 15px 0;
  /*padding: 15px 17px 6px 17px;*/  
    font: 90% 'Droid Sans', arial, sans-serif;
    text-decoration: none;  
    color: #000000; 

If I change that margin-right from 60px to 30px the spaces between each item does reduce but the menu as a whole moves to the right. I don't seem to be able to reduce the distance between each menu item without moving them all to the right. I understand why the menu moves to the right (on account of the margin).

Thanks for any suggestions.

RE: Menu position

So, If ...


I understand why the menu moves to the right (on account of the margin

where's the problem? If you understand it, ... you should be able to fix it.


How are we going to know from a picture and one CSS rule?

But as an educated guess you need to use some combination of these properties;


[link http://www.w3schools.com/cssref/css_selectors.asp]CSS selectors


Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Menu position

So basically what you want to do is to keep the margin of the last item at 60, but reduce the other ones. As Chris suggests you need to target one of the elements independently of the others so you can modify its margin on its own.

Alternatively, you can try to replace the removed margin on the last element with padding on either the <ul> around the <li> items or element around the <ul>

Phil AKA Vacunita
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Menu position

Thanks to you both.

Just working on it now.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close