What is preventing margin bottom from working here? http://jsfiddle.net/cq8VC/1/
I just want the active one to be jumping up in the air about 10px.
A:
maybe use :
#navigation ul#links li a.active{color:#1161A5;position:relative;top:-10px;}
(since on inline elements)
darma
2010-08-12 14:07:37
Whilst that does the trick it moves the border-left up as well.
simnom
2010-08-12 14:09:57
i don't think there's a way to get the text "higher" than its border anyway, is it?
darma
2010-08-12 14:12:16
Not within the same element it's not possible. Adding the extra span element as per my expanded answer gets around that issue.
simnom
2010-08-12 14:15:26
I'd like to know a way to move the text up without the border, but ya it does seem kind of impossible...
Maletor
2010-08-12 14:21:46
A:
Adam C
2010-08-12 14:12:11
+3
A:
Ok, by adding a span around the internal elements of the list items as follows:
<div id="navigation">
<ul id="links">
<li><a href="index.html"><span>Home</span></a></li>
<li><a class="active" href="projects.html"><span>Projects</span></a></li>
<li><a href="whyme.html"><span>Why Me?</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
And by changing your CSS to the following you should end up with the desired result:
#navigation ul#links li a.active{color:#1161A5; }
#navigation ul#links li a.active span { position: relative; top: -10px; }
#navigation ul#links li a{ font-family:LeagueGothicRegular;color:#ADC060;text-decoration:none;padding-left:10px;border-left:2px solid #1161A5;}
#navigation ul#links li a:hover,#navigation li:active{color:#1161A5;}
#navigation ul#links li:first-child a{border-left:none;}
#navigation ul#links li{float:left;font-size:1.5em;margin-left:10px;}
simnom
2010-08-12 14:14:17
This works beautifully... Side note is there any way to decrease the size of the border?
Maletor
2010-08-12 14:23:26
@Maletor on #navigation ul#links li a its border-left:2px solid #1161A5; change it to border-left:1px solid #1161A5;
Sotiris
2010-08-12 14:26:29
@sotiris... wouldn't that just change the width of the border? I think Maletor meant the height of it... correct me if I'm wrong.
Hristo
2010-08-12 14:28:01
Could add display: block; height: whateverpx; into the #navigation ul#links li a declaration. Not the most graceful way of managing it but it's all that immediately comes to mind.
simnom
2010-08-12 14:32:37
@Hristo I think he just wish to change the border-width. The height is not set on css so it takes auto value from the browser. Maletor can correct me if I understood something wrong
Sotiris
2010-08-12 14:32:45
@Sotiris. I agree with your way to change the width. If that is what Maletor wants, sweet :) To change the height, you can add a `height` property to `#navigation ul#links li` but I don't recommend that.
Hristo
2010-08-12 14:34:38
Ya I meant the height. Display block with height doesn't really do the tick, perhaps we need another span with a different class?
Maletor
2010-08-12 15:11:52
You can add another element before the `<a>` and give it a height and a left border, or you can surround the `<a>` with a `<div>` and give that a height and a left border... but that means you'd have to take off the left border in `#navigation ul#links li a`
Hristo
2010-08-12 15:51:08
+1
A:
How about this: http://jsfiddle.net/vXaeP/1/
CSS
#navigation ul#links li{
padding-left:10px;
border-left:2px solid #1161A5;
float:left;
font-size:1.5em;
margin-left:10px;
}
#navigation ul#links li a{
font-family:LeagueGothicRegular;
color:#ADC060;
text-decoration:none;
}
#navigation ul#links li a.active{
color:#1161A5;
position: relative;
bottom: 10px;
}
#navigation ul#links li a:hover {
color:#1161A5;
}
#navigation ul#links li:first-child {
border-left: 0px;
}
HTML
<div id="navigation">
<ul id="links">
<li><a href="index.html">Home</a></li>
<li><a class="active" href="projects.html">Projects</a></li>
<li><a href="whyme.html">Why Me?</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
Hristo
2010-08-12 14:31:57