CSS Help. (Easy?)
- Started
- Last post
- 7 Responses
- nb
I know html and css pretty well, I think. But I'm trying to do something that isn't working. I thought it would work easily, but it's not.
I have a navigation div where I want the buttons to be aligned to the right. Easy enough with text-align:right applied to #nav a. Then I figured I could apply background-color to the #nav a, and the background-color would only extend the length of the navigation text. But, instead the background colour is extending all the way across the width of the nav.
Super simple code:
<div id="nav">
<a href="#">Nav Option #1</a>
<a href="#">Nav Option Number 2</a>
<a href="#">Nav Option The Third</a>
<a href="#">Nav Option Four</a>
</div>and the CSS is:
#nav {
width: 160px;
background-color: #428698;
position: absolute;
top:235px;
bottom:0px;
font-size:15px;
font-weight: 700;
font-style:italic;
text-transform: uppercase;
padding-left: 8px;
}
#nav a {
background-color: #53b1ff;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 14px;
margin-bottom: 2px;
letter-spacing: 0.1em;
text-align: right;
color: #FFF;
text-decoration: none;
}What I'm getting is this:
But what I WANT is this:
I tried using <ul> and <li> tags instead of just the straight <a>, but got the same problem. Help?
- ernexbcn0
Create a jsfiddle http://jsfiddle.net
- nb0
I'm going to try going inline.
- dbloc0
here...this is better.
http://jsfiddle.net/V2pb9/18/
- gonzalle0
works only with <li>, don't ask why...
- hereswhatidid0
here's one using inline-block rather than float:
- this is the right wayernexbcn
- < yup even betterdbloc
- Any reason you're putting "active" class on the <li> rather than on the <a>?nb
- doesn't matter either way honestly..I put on li as welldbloc
- I just put it there as most of the time the CMS I'm using does it that way. Totally up to youhereswhatidid