Linking Help

Navigation

For the link to the Home page, would it be the index.html or web url? I guess index.html is internal and url would be extral but redirecting to the home page. Also, the active isn't working? I cannot get the link to stay highlighted or colour change when clicked on?

HTML

<ul class="navigation">
  <li><a href="index.html">Home</a></li>
  <li><a href="about-us.html">About Us</a></li>
  <li><a href="#">Online Guitar Lessons</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

HTML:

CSS

.navigation {
     list-style-type: none;
     width: 100%;
    height: 40px;
     background-color: #F4F4F4;
     border: 1px solid #999999;
    box-shadow: 0px 0px 1px #999999;
    border-left: none;
    border-right: none;
    
}
.navigation li {
     display: inline-block;
    padding: 11.1px 10px 0 10px;
    
}
.navigation li a{        
     color: #000;
     text-decoration: none;
    overflow:hidden;
}
.navigation li a:hover {
     color:#0645AD;
     background-color:#E5E5E5;
     padding: 11px 0px;
    
    
}
.navigation li a:active{
     color:#0645AD;
     background-color:#E5E5E5;
     padding: 11px 0px;
}

Code (CSS):

All help much appreciated!

Thanks,
Chris

 

Try this:

.navigation a.current {
       ...
}

Code (markup):

<ul class="navigation">
     <li><a href="/" class="current">Selected option</a></li>
     <li><a href="/">Normal link</a></li>
     ...
</ul>

Code (markup):

Personally I prefer to put one index.html in a directory to have pretty URLs, although this may cause duplicate content issues if someone links to your urls ending in /index.html. I'm not sure what's the best method to avoid this, maybe 301 redirects or using canonical.

 

Ohh, thanks. I was puzzled for a few minutes, than I realised I needed to add the class on each pages link in the nav not just index. Thanks!

 

Besides, that is no what :active is for - :active is for _the action_ - ie, WHEN you click on sometihng. It does not reflect anything BEING "active" (ie, being the current page or similar).