Hey can someone help me, getting really annoyed why the code won't do what I want it to lol... so basically I am trying to get the navigation to have an 'active' state.. ie. if you are on the home page.. make it red, rest black... and so on.

 

I have done this on several websites all the same way and re-used the code however its not working now... heres the code.

 

HTML ----------->

<ul id ="Nav">

 <li class ="active" ><a  href="Index.html" >Home</a></li>
  <li><a href="About.html">About</a></li>
         <li><a href="Portfolio.html">Portfolio</a></li>
         <li><a href="Contact.html">Contact</a></li>
</ul>
 

 

CSS ---------->

 

#Nav {
width:500px;
float:right;
 list-style:none;
 padding-top:20px;
 font-family: Lobster,'Arial';
}

#Nav li {
margin-right: 30px;
display:inline;
font-size: 25px;
padding-right:10px;
border-right: red dotted 2px;
text-decoration:none;
}

#Nav li a{
color:black;
text-decoration:none;
}

#Nav li a:hover{
color:red;
text-decoration:none;
-webkit-transition:color 0.2s ease-in;  
-moz-transition:color 0.2s ease-in;  
transition:color 0.2s ease-in; 
}

. active{
color:red;
}

 

The annoying thing is that I can in fact target the right list element, like I can change its background color, give it a border... only thing I can't do is change the color its driving me mad, anyone think of what could be the problem aha? thanks!

 

Also uploaded the CSS file in case this info isn't enough to solve it.. thanks guys

style.css

Edited August 19, 201313 yr by 4li4s
Needed <code> format

ID gets priority (or has greater specificity) over Class in CSS, so:

#Nav li a{
  color:black;
  text-decoration:none;
}

beats

.active{
  color:red;
}

for priority, and the color:black rule is used.

 

 

#Nav .active a{
color:red;
}

has enough priority to change the color

 

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

YESSS!! thank you lol spent ages trying to get there... I thought there was something 'overiding' the class didn't know ID's over-ruled them thanks a lot mate

Glad you could sort it out - good advice, A. Don't forget to put your code in the <code> format

Glad you could sort it out - good advice, A. Don't forget to put your code in the <code> format

Oh, what do you mean ?

Oh, what do you mean ?

 

No worries When you put code into your post make sure you put in the code format that you can select in the editor. The icon looks like this <>. So when you type something like

 

<ul id ="Nav">

 

<li class ="active" ><a href="Index.html" >Home</a></li>

<li><a href="About.html">About</a></li>

<li><a href="Portfolio.html">Portfolio</a></li>

<li><a href="Contact.html">Contact</a></li>

</ul>

 

Highlight the code and click on the Code icon above so it looks like this:

 

 

<ul id ="Nav">
  <li class ="active" ><a  href="Index.html" >Home</a></li>
  <li><a href="About.html">About</a></li>
  <li><a href="Portfolio.html">Portfolio</a></li>
  <li><a href="Contact.html">Contact</a></li>
</ul>

There's a post by Rallport http://wdf.co/j2. Any problems, do ask

Edited August 19, 201313 yr by 4li4s

Ohhh I seeee aha cheers, know that for now... thought you mean't my coding wasn't correct in my files was almost about to cry aha, thanks man

Also not sure if it would of made your original version work but your code has a space in between the full stop and class name making it invalid.

 

Doesn't work

. active

 

Does work

 

.active

It is worth noting that ID's are 99 times for specific than a class - meaning that you would need 99 classes against one ID to overwrite that ID's characteristics.

That's not how it works; the ID selector will have a specificity of 0,1,0,0 where the 99 class selector will have 0,0,99,0 - it's still lower down the chain

Ohhh I seeee aha cheers, know that for now... thought you mean't my coding wasn't correct in my files was almost about to cry aha, thanks man

 

Ha ha! I wouldn't pick someone up on that unless they asked. Don't worry

Oh god that wasnt the 'your code is fine' response i was expecting lol! Dare i ask if my code is correct?

Dare i ask if my code is correct?

It wasn't in your first post because you had a space after the . like . active and j05hr pointed that out, but it wouldn't do what you want because it needed to be

#Nav .active a{
color:red;
}

as A pointed out.

 

There are several ways to make the current page link have a different style. The best ways use a PHP "include" or pure PHP, both mean that you can use the same html markup on different pages, so you don't have to change the html class in the link on every page. See

http://www.wickham43.net/highlighthome.php items 2. 3 and 4.

Item 1 doesn't use the best method, so every page has to have a different html markup.

Pages with the nav need a .php extension instead of .html