PDA

View Full Version : Make link change while visiting that page


kcoulton30
01-28-2013, 12:43 PM
Trying to make my links 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 while you are on that page.

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

K.

(note I tried changing the :active class style but that just made it change colour for the duration of a click, a split second only!)

Corrosive
01-28-2013, 01:53 PM
You need to find some method of adding a class to the active <li> element to give it a particular set of styles in your CSS. The CSS pseudo :active class only shows as you click (as you have found out). Perhaps check some javascript options on the web.

kcoulton30
01-28-2013, 02:05 PM
I found this but I don't understand the instructions for the CSS - what do the hashes stand for? Wherabouts in the head section do I put this information? Thanks.

"First, on each and every page represented in the navigation, you have to give the body tag an id like: <body id="home"> or <body id="products"> Whatever the page is...

Then, in the navigation you need a separate id for each navigation element (I'm just showing the hrefs): <a href="/" id="homenav">Home</a> or <a href="products.htm" >> id="productsnav">Products</a> and so on...

Then, in your CSS you need: body#home a#homenav, body#services a#productsnav { background: rgb(212,201,182); <--- substitute whatever color you want here (make sure it's different than the default color)... }***this is the bit i don't get***

You can see how you'd add additional pages... Now, when you navigate to a page, the associated link/button is highlighted."

Ricky55
01-29-2013, 06:04 AM
Like corrosive says you just need a way to uniquely identify the links when the page changes, you don't need JS for this though. If you're using php then this is the best way as you can check what page you are on a dynamically assign the class of active.

If you want to use your CSS example which is perfectly fine you would use it as follows

body#home li a#home-nav {color: red;}
body#products li a#products-nav {color: red;}

So you are saying when the body as an id of home and the link inside the list item as an id of home-nav change the color of the text to red. So this style will only work when on the home page.

Your body tags will look like <body id="home">

You can separate all of these with a comma to make a group selector if you want.

Hope that makes sense.

kcoulton30
01-29-2013, 12:53 PM
Do you think you could you have a look at my code and tell me what I'm doing wrong?

As you can see, I already have different classes for the different menu items (I needed them to each hover over different colours).

I tried adding a new class in the <body> part of the respective pages for "recent" and "projects". I then added the class name into the html on this page (code shown below). I've highlighted in bold the parts I changed (not including the parts I added to the corresponding pages, which simply changed from <body> to <body class="recent"> or <body class="projects">)

In the CSS I put the information you suggested. But it doesn't do anything. Is it because I already have classes applied to it?


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #333333;
margin-left: 252px;

}
-->
</style>

<style type="text/css">

.style1 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style1:visited {
text-decoration: none;
color: #999999;
}

a.style1:link {
text-decoration: none;
color: #999999;
}

a.style1:hover {
text-decoration: none;
color: #ff3366;

}


body.recent a.projects:link
body.projects a.recent:link {
color: #FFFFFF;
}



.style2 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style2:visited {
text-decoration: none;
color: #999999;
}

a.style2:link {
text-decoration: none;
color: #999999;
}

a.style2:hover {
text-decoration: none;
color: #ff3300;
}

.style3 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style3:visited {
text-decoration: none;
color: #999999;
}

a.style3:link {
text-decoration: none;
color: #999999;
}

a.style3:hover {
text-decoration: none;
color: #FFCC33;
}
a.style3:active {
text-decoration: none;
color: #FF6600;
}

.style4 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style4:visited {
text-decoration: none;
color: #999999;
}

a.style4:link {
text-decoration: none;
color: #999999;
}

a.style4:hover {
text-decoration: none;
color: #66ff33;
}

.style5 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style5:visited {
text-decoration: none;
color: #999999;
}

a.style5:link {
text-decoration: none;
color: #999999;
}

a.style5:hover {
text-decoration: none;
color: #3366cc;
}

.styletitle {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.styletitle:visited {
text-decoration: none;
color: #FFFFFF;
}

a.styletitle:link {
text-decoration: none;
color: #FFFFFF;
}

a.styletitle:hover {
text-decoration: none;
color: #FFFFFF;
}



.styletumblr {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.styletumblr:visited {
text-decoration: none;
color: #999999;
}

a.styletumblr:link {
text-decoration: none;
color: #999999;
}

a.styletumblr:hover {
text-decoration: none;
color: #9933cc;

}
a.styletumblr:active {
text-decoration: none;
color: #FF6600;
}


</style>
</head>

<body>
<p><a href="jonhomepagepic.html" target="mainFrame" class="styletitle"><br />
JONATHAN MCCREE</a><br />
<br /><a href="newmenupage.html" target="mainFrame" class="projects style1">PROJECTS<br /></a>
<a href="recent paintings.html" target="mainFrame" class="recent style2" >RECENT PAINTINGS</a><br />
<a href="joncontact.html" target="mainFrame" class="style3">CONTACT<br />
</a><a href="jon-cv.html" target="mainFrame" class="style4">CV<br />
</a></span><a href="news.html" target="mainFrame" class="style5">NEWS</a>
<a href="http://JONATHANMCCREE.TUMBLR.COM" target="parent" class="styletumblr"><br />
TUMBLR</a><br />
</p>
</p>
</body>
</html>

Ricky55
01-29-2013, 06:20 PM
You've not applied a class or an ID to the body tag. See my code example here.


<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">

<title>Enter a Title</title>

<style type="text/css">
body#home li a.home-nav, body#products li a.products-nav {
color: red; /*or whatever you want to happen*/
}

</style>

</head>
<body id="home">

<ul>
<li><a class="home-nav" href="#">Home</a></li>
<li><a class="products-nav" href="#">Products</a></li>
</ul>


</body>
</html>


Then on your products page you would have


<body id="products">


All of those styles should be in a separate style sheet too.

HTH

kcoulton30
01-30-2013, 08:41 AM
I did what you said, and it's still not doing anything - does it make a difference that I'm using frames?

Plus I don't understand why I would use an id tag on the main menu page - wouldn't I need a separate body tag for all the links, instead of just "projects" etc?

Corrosive
01-30-2013, 03:37 PM
I did what you said, and it's still not doing anything - does it make a difference that I'm using frames?

Yes, big difference. Why the hell are you using frames :roll: ?

kcoulton30
01-30-2013, 03:45 PM
Hmm, well I wanted have the middle part change without having to reload the menu part, which stays the same at the top. This seemed like the only way to do it but I have since heard frames are not popular.

The whole site is using this frame, so can't change it - Can you help me fix this so it will work in frames? :\

Corrosive
01-31-2013, 07:42 AM
I've no idea how to make this work with frames. Not even sure it can be done at all. Sorry :(

d a v e
01-31-2013, 11:10 AM
"The whole site is using this frame, so can't change it" yes you can, and if you want a user friendly site you'll have to drop them.

also if you want any help you'll probably have to drop them to get it because no-one who makes any sort of sites has used frames since about 1996 (first and last time i did) or has ever used them and no one can recommend them in any (?) conceivable instance.

gentleone
01-31-2013, 11:14 AM
The whole site is using this frame, so can't change it.
Why can't you change it? How many pages are we talking about?
By using frames you have much & much bigger issues then highlighting the active page in your menu.

http://www.yourhtmlsource.com/frames/goodorbad.html

Ricky55
01-31-2013, 11:39 PM
Yeah frames are terrible.

If you absolutely must use frames then you won't be able to use just CSS to get your active page links working, you could easily do this with some very simple JavaScript but as the others have said this is the least of your worries really.

Sorry.

jmichae3
02-01-2013, 07:30 AM
for hovering, you need to do :hover and you may need to deaden :link and those others for that class
for instance

a.style2 {
font-family: Helvetica, Ariel,sans-serif;
font-size: 16px;
line-height: 21px;
cursor:pointer;
/*YOUR COLOR OF CHOICE HERE*/
}
a.style2:hover {
font-family: Helvetica, Arial,sans-serif;
font-size: 16px;
line-height: 21px;
text-decoration: none;
color: #999999;
cursor:pointer;
}
of course if you just want this to apply to all links,then you would get rid of .style2 and simply use a{...}

cursor:pointer; is a hand, oddly enough,and cursor:hand looks nothing like a hand. somebody got pointer and hand swapped I think and it has stuck ever since.

I still think it should be fixed, in all browsers, now.

you should know that frames are not search engine friendly (antagonistic?). most people have switched away from frames to plain static or dynamic pages for this reason. search engine might not even see your pages beyond the main frame. it's not made to do the navigation, especially if it requires js.

also, ul-li and other lists are search-engine friendly (and nestable),so they are used quite often for menus.

better to know now...


<style>
#b {color:brown;}
</style>
<div id="b">this is brown text based on its id attribute</div>
is the code for some unique id on the page like above, there can only be *one* of that id. tricky thing is, some browsers have the id as case sensitive. some are case INsensitive on the id. so don't try mixed case on id's. I tried that and got problems in my documents when trying cross-browser on ie, opera, ff, and chrome/safari/webkit. you CAN have multiple of name attribute though. again, case sensitive/insensitive problem. and this id/name transfers to JS because of DOM as well. however, JS identifiers such as variable names and function names are case sensitive otherwise but cannot match that of an id or name in your document (in the DOM I hear). thoroughly confused yet?

this is a hard-won lesson.

Ricky55
02-01-2013, 09:55 PM
jmichae3 nowt like throwing in a load of random facts.


<style>
#b {color:brown;}
</style>
<div id="b">this is brown text based on its id attribute</div>


WTF?

edbr
02-02-2013, 02:40 AM
yes you noticed :)