• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 230
  • Last Modified:

CSS menu Help

Hi ,
I have the following CSS for my navigation menu, everything is working fine except that the when I am on the current page, the button for that page should be highlighted, but it’s not. The hover over button works fine.

.body,td,th {font-family: Arial, Helvetica, sans-serif;      font-size: 12px;color: #000000;}
.copy {font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;padding: 20px;}
.navcell {text-align:left;color: #000000; text-indent: 20pt;}
.navcell a {display: block; color: #FFFFFF;}
.navcell a:link {color: #FFFFFF; background-image: url(../agents_website/nav_images/nav008_off.jpg);}
.navcell a:visited {color: #FFFFFF; background-image: url(../agents_website/nav_images/nav008_off.jpg);}
.navcell a:hover { background-image: url(../agents_website/nav_images/nav008_ovr.jpg); color: #000000;}
.navcell a:active{ background-image: url(../agents_website/nav_images/nav008_on.jpg); color: #000000;}
.nav, a.nav { color: #000000; font-weight: bold; text-decoration:none; line-height:35px;}

<td class="navcell"><a href="page1.php&aid=<?php echo $aid; ?>" class="nav" ><?php echo $p1h; ?></a></td>
<td class="navcell"><a href="page2.php&aid=<?php echo $aid; ?>" class="nav"><?php echo $p2h; ?></a></td>
<td class="navcell"><a href="page3.php&aid=<?php echo $aid; ?>" class="nav"><?php echo $p3h; ?></a></td>

I can’t get the active page to display the nav008_on.jpg .
Am I doing something wrong? I am new to CSS so any input would be appreciated.

  • 2
  • 2
1 Solution
If you're going to define all 4 link psudoclass's, loose the class for a.

i.e. delete .navcell a {display: block; color: #FFFFFF;}
a:active is applied to a hyperlink from the time that you click on the hyperlink to the time that you release the click.

eg. http://www.w3schools.com/css/tryit.asp?filename=trycss_link

Click on the link and without letting go of your mouse button move the mouse over the link. you will see the colour change to blue.

You can try changing the source code yourself and playing around with it.

active does not mean current page.

yea you're right. a:active will not set the current page in your menu to a different color or style.

to do something like that you'll have to set a different class on the current page via server side code, or manually in each page for that current page menu link.



and then use it like

<a href="#" class="current">home</a> | <a href="#">about</a> | <a href="#">contact</a>
you can also apply two css classes to an element; in your case it would be <a href="..." class="nav current">...</a>
sabecsAuthor Commented:
Thanks for your input, so are you saying that I should create a class nav_current and changed it for the current page, say via PHP.
nav_current{ background-image: url(../agents_website/nav_images/nav008_on.jpg); color: #000000;}

Also, as I am new to css and have got the code from another site, what is the difference between navcell & nav, does navcell only set the background image to the <td> tags & nav sets the color & format of the text link?
sabecsAuthor Commented:
Thanks VirusMinus for your help.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Train for your Pen Testing Engineer Certification

Enroll today in this bundle of courses to gain experience in the logistics of pen testing, Linux fundamentals, vulnerability assessments, detecting live systems, and more! This series, valued at $3,000, is free for Premium members, Team Accounts, and Qualified Experts.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now