CSS & links

  • mister harbies
  • Novice
  • Novice
  • mister harbies
  • Posts: 25
  • Loc: Auckland, New Zealand

Post 3+ Months Ago

I have a problem that has been limiting my design of a website I have been making.

The website consists of three parts in a table separated in cells:
- left naviagtion bar (navy blue background)
- content area (white background)
- links, and other stuff bar (red background)


The problem is:
I want a link in the left nav bar to be white. When visited, change to grey.

But when a link in the content area is visited, it changes to grey too and is barely readble. This is because the page properties state the visited links should change to grey.


I have been able to define diffrent colours for the links, but when a user visits a link, all the links visited are grey too.


I want the visited links in the content area to change to say light blue


This is what I want:
Left navigation bar (white links, grey visited links)
Content area (red links, light blue visited links)
Links and other stuff bar (blue links, grey visited links)


I hope this is clear?

Cheers everyone,

Mister Harbies
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

assign a class whatever section will have fewer links is one way

Code: [ Select ]
a:visited {color:#123456;}
.example:visited {color:#654321;}
  1. a:visited {color:#123456;}
  2. .example:visited {color:#654321;}
Code: [ Select ]
<a href="" class="a">link</a>
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

here's an example of how i set completely different color schemes for colors on my site:

Code: [ Select ]
a {color:#07a; text-decoration: none;}
a:link {color:#07a;}
a:visited {color:#663399;}
a:hover {color:#80003D;}

a.invisible {color:#008080; text-decoration:none;}
a.invisible:link {color:#008080;}
a.invisible:visited {color:#008080;}
a.invisible:hover {color:#008080;}
  1. a {color:#07a; text-decoration: none;}
  2. a:link {color:#07a;}
  3. a:visited {color:#663399;}
  4. a:hover {color:#80003D;}
  5. a.invisible {color:#008080; text-decoration:none;}
  6. a.invisible:link {color:#008080;}
  7. a.invisible:visited {color:#008080;}
  8. a.invisible:hover {color:#008080;}


the first style listed applies to all links by default. the second requires me to call it in a style statement in the code, which should look like this:

Code: [ Select ]
<a href="http://www.mylink.htm" class="invisible">My Text Link</a>


Hope that makes sense. Just define whatever colors or effects you want on the link, and create as many classes as you need (in your example, sounds like 3).

Mark
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
I posted much the same question here recently. Check out replies in the post entitled.....
'CSS text link hover - setting multiple link colour options'
  • mister harbies
  • Novice
  • Novice
  • mister harbies
  • Posts: 25
  • Loc: Auckland, New Zealand

Post 3+ Months Ago

Thanks for the help guys.

Got it working just how I wanted it. :)


I always search the forums first before making a repeat post. Apparantly I did not see your post.


Mister Harbies

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 49 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.