A Digital Age Deserves A Digital Leader

How to center CSS button set

How to center CSS button set

Postby T-Man1984 » Thu Dec 09, 2010 9:12 pm

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?
PRO Level 6
User avatar
Posts: 231
Joined: Thu Sep 26, 2002 12:27 am
Location: Ohio
Real Name: Justin Spafford

Re: How to center CSS button set

Postby kanaloa » Thu Dec 09, 2010 10:53 pm

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.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
President
User avatar
Posts: 11795
Joined: Sun Mar 10, 2002 1:18 am
Location: Columbia, SC
Real Name: John Derrick

Re: How to center CSS button set

Postby T-Man1984 » Sun Dec 12, 2010 4:18 am

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!
PRO Level 6
User avatar
Posts: 231
Joined: Thu Sep 26, 2002 12:27 am
Location: Ohio
Real Name: Justin Spafford

Re: How to center CSS button set

Postby kanaloa » Sun Dec 12, 2010 4:38 am

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;
}
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
President
User avatar
Posts: 11795
Joined: Sun Mar 10, 2002 1:18 am
Location: Columbia, SC
Real Name: John Derrick

Re: How to center CSS button set

Postby T-Man1984 » Tue Dec 14, 2010 12:35 am

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!
PRO Level 6
User avatar
Posts: 231
Joined: Thu Sep 26, 2002 12:27 am
Location: Ohio
Real Name: Justin Spafford

Return to HTML, CSS, and Scripts

Who is online

Users browsing this forum: Bing [Bot] and 0 guests