Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Menu position

Status
Not open for further replies.

Blueie

Technical User
May 12, 2012
72
GB
Hello

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

menu_screenshot_hf0u7b.jpg


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; 
    margin-right:60px;
}

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.
 
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.


And;

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;

last-of-type
last-child
first-of-type




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


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
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
 
Thanks to you both.

Just working on it now.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top