CSS Problem: Change the link color of active page in Navigation

Dev Shed Forums Sponsor:

March 17th, 2013, 03:31 PM

puskas97

Registered User

Join Date: Mar 2013

Posts: 6

Time spent in forums: 54 m 15 sec
Reputation Power: 0

CSS Problem: Change the link color of active page in Navigation

I'm sure this is has been posted with solutions, but I'm very new to CSS so am looking for specific help related to the CSS sheet I am actually using.

As a new user I can not post the URL of my page or css sheet.

My problem:

I want the navigation bar to indicate the active page by changing color.

I have managed to make the color change on a mouse hover over:

#nav a:hover {
background: #FA0;
text-decoration: none;
color: #FFFFFF;
}

However, I do not know how to make it stay a different color to show which is the active page.

Can you suggest anything?

Many thanks.

March 23rd, 2013, 01:39 AM

radenli

Registered User

Join Date: Mar 2013

Posts: 4

Time spent in forums: 58 m 20 sec
Reputation Power: 0

Try this

a:active
{
background-color:#FFFFFF; /*color of your choice*/
}

Comments on this post

DonR agrees!

March 23rd, 2013, 02:51 PM

puskas97

Registered User

Join Date: Mar 2013

Posts: 6

Time spent in forums: 54 m 15 sec
Reputation Power: 0

Still not working

Hello Radenli,

Thanks for helping.

I placed the code you suggested below the code to change the color when using mouse hover. But it still didn't maintain a change in background color when on that particular active page.

Am I doing something wrong?

#nav a:hover {
background: #FA0;
text-decoration: none;
color: #FFFFFF;
font-size: 16pt;
}

#nav a:active
{
background-color:#FFFFFF; /*color of your choice*/
}

#nav a {
text-decoration: none;
text-transform: lowercase;
color: #FA0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
}

March 23rd, 2013, 06:02 PM

radenli

Registered User

Join Date: Mar 2013

Posts: 4

Time spent in forums: 58 m 20 sec
Reputation Power: 0

You need to replace the color

you need to replace the color code #FFFFFF; to other color you like.
you are using "#FFFFFF"(white) on both :hover and :active, you will not see the color change.

March 23rd, 2013, 08:08 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 460

Folding Points: 29722 Folding Title: Starter Folder

Time spent in forums: 2 Weeks 1 Day 21 h 57 m 10 sec
Reputation Power: 216

Do you have separate static HTML pages?
If so, you will need to create a class of lets say "active" and give it a color of your choice. And in the navigation link of that ACTIVE page, add the attribute class="active".

March 24th, 2013, 10:00 AM

puskas97

Registered User

Join Date: Mar 2013

Posts: 6

Time spent in forums: 54 m 15 sec
Reputation Power: 0

The color white would still work.

Quote:

Originally Posted by radenli

you need to replace the color code #FFFFFF; to other color you like.
you are using "#FFFFFF"(white) on both :hover and :active, you will not see the color change.

Hello Radenli,

If I keep the color white "#FFFFFF", it would still work and show the user which page they were currently on, as the background to the navigation bar is actually dark blue.

So this is not the solution.

Thanks

(I'm going to try the proposed solution below).

March 24th, 2013, 10:02 AM

puskas97

Registered User

Join Date: Mar 2013

Posts: 6

Time spent in forums: 54 m 15 sec
Reputation Power: 0

A new class "active"

Quote:

Originally Posted by DonR

Hello Don,

I have created the new class, called it active and changed the colors to match what I want. However, how do I actually do the last part of your suggestion?

(And in the navigation link of that ACTIVE page, add the attribute class="active".)

Thanks

March 24th, 2013, 12:01 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 460

Time spent in forums: 2 Weeks 1 Day 21 h 57 m 10 sec
Reputation Power: 216

I need to know if all of your pages are separate HTML pages.

And it would really help if we could see a link to your code or see your html code and a tree-view of all of your files [at least filenames as this would answer my above question].

At least post your navigation code, please.

March 24th, 2013, 01:53 PM

puskas97

Registered User

Join Date: Mar 2013

Posts: 6

Time spent in forums: 54 m 15 sec
Reputation Power: 0

Tree View of Files, HTML and CSS

...........................................................
I will try to post what I believe will help.

HTML Page with information about what is in the navigation bar: (I dont know why the new active class I made appears 3 times)
...........................................................

<body>
<span class="active"><span class="active"><span class="active">
</span></span></span>

<div class="active" id="bg">
<div id="outer">
<div id="header">
<div id="nav">

<ul>
<li class="first">
<a href="index.htm" accesskey="H" title="Link to Home page."><b>H</b>ome</a></li>
<li><a href="tools.htm" accesskey="T" title="Link to Teacher Tools page."><b>T</b>eacher Tools</a></li>
<li><a href="contact.htm" accesskey="C" title="Link to contact page."><b>C</b>ontact</a></li>
</ul>

<br class="clear" />
</div>
<img src="images/banner3.gif" width="981" height="69" alt="Web 2.0 Tools Logo" />
</div>
<div id="main">
<div id="content">
<div id="box1">

...........................................................
And the CSS code for the navigation:
...........................................................

#nav {
position: absolute;
bottom: 0;
left: 0;
height: 57px;
line-height: 57px;
padding: 0 24px 0 24px;
width: 932px;
margin: 0 0 0 0;
background: #08286e;
}

#nav a:hover {
background: #FA0;
text-decoration: none;
color: #FFFFFF;
font-size: 16pt;
}

#nav a:active
{
background-color:#FFFFFF; /*color of your choice*/
}

#nav a {
text-decoration: none;
text-transform: lowercase;
color: #FA0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
}

#nav li {
margin: 0 1em 0 0;
padding: 0 1em 0 1em;
}

#nav li.active {
background: #fff;
}

#nav li.active a {
color: #34564F;
}

#nav ul {
list-style: none;
}

#nav ul li {
float: left;
font-family: Arial, Helvetica, sans-serif;
}

...................................................
Summarised Tree View of Files

...................................................

Site Name: Teacher Tools

HTML Pages:
- index.htm
- tools.htm
- contact.htm
- style.css

#10

March 24th, 2013, 03:51 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 460

Time spent in forums: 2 Weeks 1 Day 21 h 57 m 10 sec
Reputation Power: 216

ok, this is what we want to focus on.

Code:

<ul>
<li class="first">
<a href="index.htm" accesskey="H" title="Link to Home page."><b>H</b>ome</a></li>
<li><a href="tools.htm" accesskey="T" title="Link to Teacher Tools page."><b>T</b>eacher Tools</a></li>
<li><a href="contact.htm" accesskey="C" title="Link to contact page."><b>C</b>ontact</a></li>
</ul>

#nav li.active a {
color: #34564F;
}

you can get rid of this

Code:

<span class="active"><span class="active"><span class="active">
</span></span></span>

<div class="active" id="bg">

(unless you need the <div id="bg"> but get rid of that class="active" in that DIV.)
--------------------------------------------------------------

what you will want to do in each of your html files is to add the class="active" to the <li> item that corresponds to that ACTIVE page.

For example, in your "index.htm" page you will want this

Code:

<ul>
<li class="first active">
<a href="index.htm" accesskey="H" title="Link to Home page."><b>H</b>ome</a></li>
<li><a href="tools.htm" accesskey="T" title="Link to Teacher Tools page."><b>T</b>eacher Tools</a></li>
<li><a href="contact.htm" accesskey="C" title="Link to contact page."><b>C</b>ontact</a></li>
</ul>

in your tools.htm file you want this

Code:

<ul>
<li class="first">
<a href="index.htm" accesskey="H" title="Link to Home page."><b>H</b>ome</a></li>
<li class="active"><a href="tools.htm" accesskey="T" title="Link to Teacher Tools page."><b>T</b>eacher Tools</a></li>
<li><a href="contact.htm" accesskey="C" title="Link to contact page."><b>C</b>ontact</a></li>
</ul>

and in your contact.htm, you want this

Code:

<ul>
<li class="first">
<a href="index.htm" accesskey="H" title="Link to Home page."><b>H</b>ome</a></li>
<li><a href="tools.htm" accesskey="T" title="Link to Teacher Tools page."><b>T</b>eacher Tools</a></li>
<li class="active"><a href="contact.htm" accesskey="C" title="Link to contact page."><b>C</b>ontact</a></li>
</ul>

then, just set the color to what you want in this

Code: