Help - Search - Members - Calendar
Full Version: Different Links in Different Areas
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
UptonGirl
I have three link area on this site, and two link behaviors (or, that's my intent). The client wants footer and body links to change color when visited, but sidebar and top/bottom menus not to change.

http://althea.cs.umass.edu/TMurray/home.html

And, if you wonder why I have so many identical nav areas - so do I. I lost that debate.

However, all the links are changing color when visited. What have I done wrong?

(BTW - not all the links are up - and you may hit a # link as a placeholder. I realize that once one of those is hit, all links with the # will change if they are in a div that is supposed to change the link color - that's not the problem.)

The search function has not be installed yet.

I based my code on your CSS tutorial for links - which worked like a charm for me once before.

The style sheets are external - so I'm showing the link code here:



CODE


/* The following are PrimeMenu links */



#PrimeMenu {
    background-image: url(Images/primeMenuBG.png);
    font: small-caps 12px 1.75em "Times New Roman", Times, serif;
    background-repeat: no-repeat;
    background-position: center;
}

#PrimeMenu a:link  {
  color: #AC4739;
  text-decoration: none;

}

#PrimeMenu  a:visited {
  color: #AC4739;
  text-decoration: none;
}

#PrimeMenu a:hover  {
  color: #AC4739;
  text-decoration: underline;

}

#PrimeMenu a:active {
  color: #AC4739;
  text-decoration: underline;

}

.PrimeMenu {
    text-align: center;
    font: small-caps 12px/1.75em "Times New Roman", Times, serif;
    color: #AC4739;
    background: url(Images/primeMenuBG.png);
}

/* the following applies to sidebar links */

#SideLinks  {
    font: small-caps 12px/2em 1.75em "Times New Roman", Times, serif;

}

#SideLinks a:link  {
  color: #AC4739;
  text-decoration: none;

}

#SideLinks a:visited {
  color: #AC4739;
  text-decoration: none;
}

#SideLinks a:hover  {
  color: #AC4739;
  text-decoration: underline;

}

#SideLinks a:active {
  color: #AC4739;
  text-decoration: underline;

}

.SideLinks   {
    color: #AC4739;
    font: 12px/3em Georgia, "Times New Roman", Times, serif;
}

/* the following are page body and footer links */

a:link {
  color: #AC4739;
  text-decoration: underline;
}


a:visited {
  color: #B5D4E3;
  text-decoration: underline;
}

a:hover {
  color: #AC4739;
  text-decoration: none;
}

a:active {
  color: #AC4739;
  text-decoration: underline;

}
Darin McGrew
.SideLinks selects class="SideLinks"

#SideLinks selects id="SideLinks"
UptonGirl
QUOTE(Darin McGrew @ May 18 2009, 01:39 AM) *

.SideLinks selects class="SideLinks"

#SideLinks selects id="SideLinks"



Okay - so I have that backwards. and the link order is not right LVHA is the rule I'm told. Let me see what i can do to fix this - and be back!

Thanks
UptonGirl
WOOF! It turned out there were a number of little issues -- but this was, indeed, the primary one. I don't have the updates on the server yet - but it's working as it should from the local folder.

THANKS!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.