equal spacing nav ul

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
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;
}
 

CMT

macrumors regular
Aug 24, 2009
102
10
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.
 

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
7
USA
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
 

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
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 :).
 

CMT

macrumors regular
Aug 24, 2009
102
10
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:
 

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
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.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.