[T-Man1984]

I've been trying everything to center my button set. If I don't fill in each button they all fill to the left and there is a big gap at the right.

www.jspafford.com

If you check out my nav buttons you can see what I mean, how can I center the buttons in the button box?

[kanaloa]

You cannot center a <ul> tag that has floating elements inside it, unless you change the width and give it a proper of margin="0px auto;width:123px"

The other solution I've used it to give the <ul> tag a margin on the left, but you'll have to guess at the numbers to center it.

[T-Man1984]

With your suggestions I was able to find the proper place in the css file to change and center my buttons! Thanks!!

Maybe you will know the answer to this as well. If you check out the site again, and now that the buttons are centered, I would either like to add a faint line to the left of the "home" button or remove the faint line from the right of the "archives" button. Not sure how to do either....

Thank s!

[kanaloa]

By looking at the code again, I'm guessing this line is what's creating that border on the right side of each list item, particularly what I've put in bold.

#nav ul li a {
display: block;
padding-right: 20px;
padding-left: 20px;
text-align: center;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 62px;
font-weight: normal;
background-image: url(/images/nav-border.jpg);
background-repeat: no-repeat;
background-position: right top;
}


If so, you need to create a class that gets RID of the border and then apply it to the ONE list item you DON'T want to have a border on the right side, i.e.; the last one, by doing both of the following.

Code: Select all

<li><a href="http://jspafford.com/archives.html" class="no_border">Archives</a></li>

#nav ul li a.no_border {
background-image: none;
}

[T-Man1984]

Thanks again. I was able to add the class to my css file and it showed up, but I was unsure what to do with the quoted code?

None the less, I took out the link to the background - image :url and now all the lines in between the buttons are gone. This will work for now. At least it doesn't look half finished!

Thanks!