...

View Full Version : signify active link when page is shown



Tamarab
08-24-2005, 01:07 AM
Hey Guys,

Having some minor problems.
I have a menu (my second link style) and currently when they click the link it goes to the page it is highlighted, but when you go somewhere else, it stays highlighted. I would like it to go back to normal.. so that only one page is 'underlined' at a time.. does that make sense?


a.menu:link {
font-family: Verdana,sans-serif;
color: #006699;
font-size: 11px;
text-decoration: underline;
}
a.menu:active {
font-family: Verdana,sans-serif;
color: #006699;
font-size: 11px;
text-decoration: underline;
}

a.menu:hover {
font-family: Verdana,sans-serif;
color: #006699;
font-size: 11px;
text-decoration: underline;
}

a.menu:visited {
font-family: Verdana,sans-serif;
color: #006699;
font-size: 11px;
}

I can't quite figure out whats wrong.. IDEAS?

THANKS!

mark87
08-24-2005, 01:17 AM
Didn't quite understand what you meant but shouldn't you take out the 'text-decoration: underline' for the active part? (Change to 'text-decoration: none')

You can also make that code alot shorter...

a.menu {
font-family: Verdana, sans-serif;
color: #069;
font-size: 11px;
text-decoration: underline;
}

a.menu:active {
text-decoration: none;
}

rmedek
08-24-2005, 02:11 AM
I'm not quite sure what you mean but I do know this... it matters what order the pseudo-classes are in:

a:link
a:visited
a:hover
a:active

Some people use the mnemonic "a LoVe HAte relationship" but I swear I always remember it with "Lewd, Vicious, Hamster Attacks." Go figure.

Kurashu
08-24-2005, 05:05 AM
On the topic of hamsters....
Go for the eyes Boo!

And just to be curious, could we see your code for the menu?

Tamarab
08-26-2005, 11:40 PM
Hey Guys,

Thanks for your super quick replies.

The order the pseudo-classes were somewhat to blame (THX mark87) but Im still having some problems. I didn't explain it very well before.

Here is the page: (STILL IN TEST MODE!)
http://www.vivraterra.com/screenshots.html

The two problems are:
1#: the 'active' state when they click the link (ie, contact us or about vivraterra) is not staying underlined once clicked and the new page loads. I would like the underline to stay on until anoher link is clicked.

#2: In Safari, Firefox the top menu aligns left perfectly. In IE 5 & 6 it has like a 10px space to the left that I can't figure out how it got there. (This is for the main blue menu at the top).

Any help would be great.
(Yes, I know CSS is the way of the future, but I haven't quite gransped it yet.. but I promise, Im working on it) So, please ignore my tabled layout for now.

THANKS!
Tamarab

bazz
08-29-2005, 11:58 AM
Hi,

What you need to do is to tell the active link that it is active. So if your Home Page is active then, on the Home Page assign a class of perhaps, active, to its link and assign that class some values. do the same for all the other links on their respective pages.

Bazz

Bill Posters
08-29-2005, 12:13 PM
Here's something I posted elsewhere…




The method I prefer uses css and relies on adding custom id or class attributes to the body element (tag) and each of the menu items.
This can potentially be done with some degree of automation (using PHP) on a larger site (by tapping into the directory or file name), but can easily be done manually on smaller sites.

By adding a custom id or class to a page's body element, you can then create custom css selectors to specify how a certain link should appear when viewed on certain pages.

e.g.

css


a {
background: red;
}

body#home a#m-home,
body#info a#m-info {
background: yellow;
}





home page



<body id="home">



<li><a href="/" id="m-home">Home</a></li>
<li><a href="info.html" id="m-info">Info</a></li>





info page



<body id="info">



<li><a href="/" id="m-home">Home</a></li>
<li><a href="info.html" id="m-info">Info</a></li>





This enables you to repeat the same menu markup on every page (server-side include?) and use the external css to group and manipulate how links appear when on that page.


HTH :)

Tamarab
08-29-2005, 06:19 PM
This really helps - I will try it out.

THANKS SO MUCH!
Tamarab



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum