Solved

CSS menu Help

Posted on 2007-04-05
5
219 Views
Last Modified: 2008-02-01
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;}


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

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.

Thanks
0
Comment
Question by:sabecs
  • 2
  • 2
5 Comments
 
LVL 19

Expert Comment

by:v2Media
ID: 18856162
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;}
0
 
LVL 30

Accepted Solution

by:
VirusMinus earned 500 total points
ID: 18856201
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.

eg.

a{color:#FFFFFF;}
a:hover{color:#FF0000;}
a.current{color:#0000FF;}

and then use it like

<a href="#" class="current">home</a> | <a href="#">about</a> | <a href="#">contact</a>
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 18856206
you can also apply two css classes to an element; in your case it would be <a href="..." class="nav current">...</a>
0
 

Author Comment

by:sabecs
ID: 18856551
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?
0
 

Author Comment

by:sabecs
ID: 18861764
Thanks VirusMinus for your help.
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question