equal spacing nav ul

Discussion in 'Web Design and Development' started by Dal123, Jul 30, 2010.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    Very basic error that I still do not understand, I have unordered list for my nav bar.
    Ideally I would just set a width of them but that does not seem to work, last time I did this on my .co.uk site and it worked. But I am following everything from my site and it does not work.:(
    it is viewable here http://www.preciseformwork.co.uk/new-site/index1.htm
    any input appreciated.:eek:

    html
    HTML:
    <ul id="nav-list">
    	<li><a href="index.htm">home</a></li>
    	<li><a href="services.htm">services</a></li>
    	<li><a href="gallery.htm">previous jobs</a></li>
    	<li><a href="links.htm">links</a></li>
    	<li><a href="http://www.preciseformwork.co.uk/wordpress">blog</a></li>
    	<li class="no-pad"><a href="contact.htm">contact us</a></li>
    </ul>
    css
    Code:
    #nav-list {
    position:absolute;
    padding:0;
    margin:0;
    }
    
    #nav-list li{
    position:relative;
    display:inline;
    padding:0 80px 0 0;
    margin:0;
    }
    
    .no-pad li{
    padding:0;
    margin:0;
    }
    
    #nav-list a {
    text-decoration:none;
    font-family: "Lucidia Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
    font-size: 20px;
    margin:0;
    padding:0;
    }
     
  2. CMT macrumors regular

    CMT

    Joined:
    Aug 24, 2009
    #2
    Your CSS could be simplified a lot!

    Let's see if I understood what you want:

    Code:
    #nav-list {
    	list-style: none;
    	margin: 0; padding: 0;
    }
    #nav-list li {
    	float: left;
    	margin-left: 30px;
    }
    	
    #nav-list a {
    	text-decoration:none;
    	font-family: "Lucidia Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
    	font-size: 20px;
    }
    or, you can use padding on both sides (left and right) of list items, instead of margin like I did.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    It's a specificity issue and a incorrect CSS selector.

    Code:
    .no-pad li
    means an li element that is inside an element with a class on no-pad. What you wanted was an li element with a class name of nopad. You don't even ned the li part.

    Code:
    #nav-list .nopad
     
  4. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #4
    Thanks angelwatt, I tried similar but with li on the end :eek:. Thanks very much buddy.:D
    Also thanks cmt, unfortunately padding on left and right would not achieve what I want. Thanks for input though much appreciated :).
     
  5. CMT macrumors regular

    CMT

    Joined:
    Aug 24, 2009
    #5
    Ok!

    By the way, I always used floats in these situations, but your solution looks great!

    CSS sometimes drive you crazy, I think that's normal.

    100 lines of CSS generates me 5 times more bugs than if had written 100 lines of Objective-C. :eek:
     
  6. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    Thanks cmt, some say that css is easy but I strongly disagree. There are a million different ways with all slightly different solutions :confused:, read two books on it now and just found out css3 is out lol.
     

Share This Page