How to center CSS button set
5 posts
• Page 1 of 1
How to center CSS button set
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?
- T-Man1984
- Posts: 231
- Joined: Thu Sep 26, 2002 12:27 am
- Location: Ohio
- Real Name: Justin Spafford
Re: How to center CSS button set
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
- kanaloa
- President
- Posts: 11795
- Joined: Sun Mar 10, 2002 1:18 am
- Location: HI & SC
- Real Name: John Derrick
Re: How to center CSS button set
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!
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!
- T-Man1984
- Posts: 231
- Joined: Thu Sep 26, 2002 12:27 am
- Location: Ohio
- Real Name: Justin Spafford
Re: How to center CSS button set
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.
#nav ul li a.no_border {
background-image: none;
}
#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
- kanaloa
- President
- Posts: 11795
- Joined: Sun Mar 10, 2002 1:18 am
- Location: HI & SC
- Real Name: John Derrick
Re: How to center CSS button set
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!
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!
- T-Man1984
- Posts: 231
- Joined: Thu Sep 26, 2002 12:27 am
- Location: Ohio
- Real Name: Justin Spafford
5 posts
• Page 1 of 1
Return to HTML, CSS, and Scripts
Who is online
Users browsing this forum: No registered users and 4 guests