Different Link Colors...

1957Goldtop / 2013-07-09 03:36:02   

Because of the coloring of the index sidebar I have the following link attributes setup in style.css:

a:link { text-decoration: none; color: #fff; background: #000000; }

However, on the exhibit portion of the page I need the links defined as:
a:link { text-decoration: none; color: #000000; background: #fff; }

How can I have them both?

arsondpi / 2013-07-09 07:40:21   

simple css selector definitions

  1. #index a:link { text-decoration: none; color: #fff; background: #000000; }
  2. #exhibit a:link { text-decoration: none; color: #000000; background: #fff; }

:-)

1957Goldtop / 2013-07-09 13:35:46   

Thanks for the help.

Ok… so I did the following and it caused a couple problems.

Let me give you the full link definitions I had previously:
a:link { text-decoration: none; color: #fff; background: #000000; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #fff; background: #000000; }
a:hover { text-decoration: none; color: #fff; background: #000000; }

With this code the index side was fine.

So I then changed it to:

#index
a:link { text-decoration: none; color: #fff; background: #000000; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #fff; background: #000000; }
a:hover { text-decoration: none; color: #434343; background: #000000; }

#exhibit
a:link { text-decoration: none; color: #000000; background: #fff; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #000000; background: #ffff; }
a:hover { text-decoration: none; color: #434343; background: #ffff; }

and now there are problems. On the index, the links were changed even though the index portion of the code were identical to the "global" code before.

Here is a screenshot of the before and after:
jeffsingerphotography.com/temp/…
jeffsingerphotography.com/temp/…

As you can see the index side link background changed to black, some links (I guess unvisited) changed to blue (not sure where that blue is even coming from), the links also changed to underlined (which you can't see since it's black on black).

What happened?

arsondpi / 2013-07-09 17:44:20   

That's because you need to specify the css selector for each state in each div:

  1. #index a:link { text-decoration: none; color: #fff; background: #000000; }
  2. #index a:active { text-decoration: none; }
  3. #index a:visited { text-decoration: none; color: #fff; background: #000000; } 
  4. #index a:hover { text-decoration: none; color: #434343; background: #000000; }
  5. #exhibit a:link { text-decoration: none; color: #000000; background: #fff; }
  6. #exhibit a:active { text-decoration: none; }
  7. #exhibit a:visited { text-decoration: none; color: #000000; background: #ffff; } 
  8. #exhibit a:hover { text-decoration: none; color: #434343; background: #ffff; }
1957Goldtop / 2013-07-09 18:15:40   

Ahh... ok. So I did that and I'm still seeing some strange link colors and underlining:
jeffsingerphotography.com/temp/…

I'm not understanding where those parameters are being set. I'm seeing purple and blue links when the color is being defined as either #fff or #000000 in my example. And doesn't "text-decoration: none" mean no underlining?

Thanks!

1957Goldtop / 2013-07-09 21:02:14   

Figured it out... you were giving me instructions for version 2... I'm using an older version. Changed your code to:
#menu a:link { text-decoration: none; color: #fff; background: #000000; }
#menu a:active { text-decoration: none; }
#menu a:visited { text-decoration: none; color: #fff; background: #000000; }
#menu a:hover { text-decoration: none; color: #434343; background: #000000; }
#content a:link { text-decoration: none; color: #000000; background: #fff; }
#content a:active { text-decoration: none; }
#content a:visited { text-decoration: none; color: #000000; background: #ffff; }
#content a:hover { text-decoration: none; color: #434343; background: #ffff; }

and all works.

Thanks!

arsondpi / 2013-07-09 21:47:07   

oops - my mistake.
:-)

This thread has been closed, thank you.