TalkPHP - View Single Post

9three · 05-09-2009, 02:53 AM

Hey,

I have a navigation using LIs. I added a border to the right to simulate a spacer for each link. What I'm trying to do is add padding to the top to bring the text down some becasue it's too high. But when I do that, the padding also moves the border. Is there a way around this?

HTML

Code:

<div id="nav">
    <ul>
      <li><a href="#">Stories</a></li>
      <li><a href="#">Blogs</a></li>
      <li><a href="#">Forums</a></li>
      <li><a href="#">Tournament</a></li>
      <li><a href="#">Podcasts</a></li>
    </ul>
  </div>

CSS

Code:

#nav ul
{
  float: left;
  width: 324px;
  margin: 21px 0px 0px 0px;
  padding: 0px;
  color: #FFFFFF;
}

#nav ul li { display: inline; }

#nav ul li a
{
  float: left;
  height: 30px;
  padding: 0px 8px 0px 8px;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  border-right: 1px solid #670000;
  background: url('../images/nav_bg.jpg') repeat-x;
}

#nav ul li a:hover
{
  color: #670000;
  background: url('../images/nav_bg_o.jpg') repeat-x;
}

I also want to add an active LI so I added

Code:

#featuresNav ul li .active
{
  color: #000000;
  background: #FFFFFF;
}

and I did <li class="active"><a href="#">blah</a></li> but it doesn't work.

Basically I just want the background and font color to change if I set the LI element to "active".

thanks :)

05-09-2009, 02:53 AM	#1 (permalink)
9three The Contributor Join Date: Oct 2008 Posts: 75 Thanks: 4	Padding without moving border? Hey, I have a navigation using LIs. I added a border to the right to simulate a spacer for each link. What I'm trying to do is add padding to the top to bring the text down some becasue it's too high. But when I do that, the padding also moves the border. Is there a way around this? HTML Code: <div id="nav"> <ul> <li><a href="#">Stories</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Tournament</a></li> <li><a href="#">Podcasts</a></li> </ul> </div> CSS Code: #nav ul { float: left; width: 324px; margin: 21px 0px 0px 0px; padding: 0px; color: #FFFFFF; } #nav ul li { display: inline; } #nav ul li a { float: left; height: 30px; padding: 0px 8px 0px 8px; font-weight: bold; color: #FFFFFF; text-decoration: none; border-right: 1px solid #670000; background: url('../images/nav_bg.jpg') repeat-x; } #nav ul li a:hover { color: #670000; background: url('../images/nav_bg_o.jpg') repeat-x; } I also want to add an active LI so I added Code: #featuresNav ul li .active { color: #000000; background: #FFFFFF; } and I did <li class="active"><a href="#">blah</a></li> but it doesn't work. Basically I just want the background and font color to change if I set the LI element to "active". thanks :)