Solved

CSS menu Help

Posted on 2007-04-05
5
218 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

920 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now