Jump to content

Oh Please Help - Simple Link Colour Change


kcoulton30

Recommended Posts

Using frames - Trying to make my navigation links in the top frame a different colour when the page is active, i.e. you click on ABOUT from a list in the top frame, the main frame changes to the About page, and the ABOUT link changes colour whilst you are on that page.

 

Help for a beginner would be appreciated - i.e. simpler the better!

 

I have been messing around with classes, body tags and lots of other things I don't really understand, for what seems like forever.

 

Trying to basically do the first suggestion on this tutorial - http://www.impressivewebs.com/current-page-link-styles/

 

The guy (or girl) says this....

 

"The only thing you have to make sure of is that the location of the class gets changed depending on the page you’re on. For example, the HTML shown above would appear on the “Products” page, but on the “Contact” page the “current” class would be moved to the “Contact” link."

 

...but doesn't explain how to do it! Which is the difficult bit?!

 

Any help?

 

K.

Link to comment
Share on other sites

For starters: Frames are a BAD idea. It's outdated, and has more problems than it's worth. Is there any particular reason you want to be using them?

 

However, if you insist, I gather your navigation file is the same on every page, so you wouldn't not have the option of adding the active class to any specific page. In that case, add an id to the body tag for each page. Example:

 

<body id="homeP">

 

<body id="productsP">

 

etc.

 

for the navigation, add an ID to each nav item. Example:

<ul>
<li id="home">Home</li>
<li id="products">Products</li>
</ul>

 

In your CSS:

 

#homeP #home a, #projectP #project  a { 	background: black; 	color: red; }

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...