Skip navigation

Dreamweaver

willness23 Calculating status...

Currently Being Moderated

How to make a category highlighted after it clicked

Jul 17, 2012 10:36 AM

Hi there! Just want to know how to make a category highlighted after user click on it, so he will able to track on which category he is currently on?

I've already created 3 categories (links) through creating library elements, I already have the hover effect I made through CSS external stylesheet, everything works, but the category is not highlighted when I browse within it.

Here is my HTML code of these 3 links:

<td bgcolor="#663300">

<div align="right" class="link"><a href="index.html">Home</a> <a href="Accessories.html">Accessories</a> <a href="Contact Us.html">Contact Us</a> </div>

</td>

And here is my CSS code for these links:

.link, .link a:link, .link a:visited, .link a:active {

font-family: "Times New Roman", Times, serif;

font-size: 18px;

font-weight: normal;

color: #FFFF33;

text-decoration: none;

padding: 5px;

#home: color:#00FFFF;

}

.link a:hover {

font-family: "Times New Roman", Times, serif;

font-size: 18px;

font-weight: normal;

color:#FF0000;

text-decoration: none;

}

So how to make the active link highlighted when browsing within it??

Thank you

522 Views 4 Replies Latest reply: willness23, Jul 18, 2012 11:16 AM

Replies

Currently Being Moderated

1. Nancy O.,

Jul 17, 2012 10:43 AM in reply to willness23

Report

Persistent Page Indicator on Site Wide CSS Menus
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

|
Mark as:
Currently Being Moderated

2. willness23,

Jul 17, 2012 2:51 PM in reply to Nancy O.

Report

Can't do it ((
I already have working links with hover effect, all these links have class called link, but I don't understand what should I add to my existing code, or what should I change? (

|
Mark as:
Currently Being Moderated

3. Nancy O.,

Jul 17, 2012 4:12 PM in reply to willness23

Report

Anchors can have multiple classes.

Follow the tutorial.

<a href="page1.html" class="link home">Link 1</a>
<a href="page2.html" class="link about">Link 2</a>
<a href="page3.html" class="link products">Link 3</a>

For better help, post the URL to your page.

Nancy O.

|
Mark as:
Currently Being Moderated

4. willness23,

Jul 18, 2012 11:16 AM in reply to Nancy O.

Report

My pages are offline in developing stage, can't give you an URL.
Here is my HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>untitled</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body class="home">
<table width="450" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#663709">
<div align="right" class="link"><a class="home" href="index.html">Home</a>    <a href="Accessories.html">Accessories</a>    <a href="Contact Us.html">Contact Us</a>    </div>
</td>
</tr>

And here is my CSS:

body {
    background-image: none;
    background-color: #2d2625;
}
body,td,th {
}
.link, .link a:link, .link a:visited, .link a:active {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: normal;
    color: #FFFF33;
    text-decoration: none;
    padding: 5px;
    #home: color:#00FFFF;
}
.link a:hover {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: normal;
    color:#FF0000;
    text-decoration: none;
}

What should I modify?

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points