CSS and Hyperlinks

[AGNEW2PRG]

Hi,

I have a .htm page that uses a css sheet that defines the way the links are displayed on the page.

a:link {text-decoration: none; color: #000000;}
a:visited {text-decoration: none;color: #000000;}
a:active {text-decoration: none;color: #000000;}
a:hover {color: #000000;text-decoration:underline;}

this works on a red background as expected. the red is #e80000.

however the links on the white background cannot be seen as it is in white. is there a way around this ? i would like the same link settings as above but in black.

Any help will be most useful..

many thanks

 

[mkrausnick]

I don't understand. The link text is black. I tested your css - it produces a link with black that is underlined when hovered. My background was white.

BTW the recommended order is: link, visited, hover, active.

Mike Krausnick
Dublin, California

 

[AGNEW2PRG]

apologies,

I have my colours the wrong way round...

I need white text on red background, and black text on white..

I have typed it the wrong way round... This will show you the problem i am experiencing..

thanks

 

[mkrausnick]

Then you need two separate styles for links, one for links on red bg and another for text on white bg.

You can do this using CLASS, i.e.

<a class="whitelink" href="...
and
<a class="blacklink" href="...

and the css would be:

/* Content area links - white */
a.whitelink:link    { color: #fff; text-decoration: underline; font-weight: bold }
a.whitelink:visited { color: #fff; text-decoration: underline; font-weight: bold }
a.whitelink:hover   { color: #fff; text-decoration: underline; font-weight: bold }
a.whitelink:active  { color: #fff; text-decoration: underline; font-weight: bold }

/* Content area links - black */
a.blacklink:link    { color: #0000ff; text-decoration: none }
a.blacklink:visited { color: #0000ff; text-decoration: none }
a.blacklink:hover   { color: #ff0000; text-decoration: none }
a.blacklink:active  { color: #ff0000; text-decoration: none }

Mike Krausnick
Dublin, California

 

[Foamcow]

Rather then use classes, try to target the links by their containing element.

For instance if your black links are for subnavigation then they may be inside an element with an id of, for the sake of argument, subnav

So you could do

#subnav a { color:#000;

I've produced many CSS sites and I think I've never had to use more than 2 or 3 classes if any at all.

If you do use classes then try to use class names that don't relate to the visual appearance of that style.

For instance, instead of .blacklink use .subnavlink

There may be a point in future where you don't want those links to be black anymore. You can simply change the color in the style but if the class is called blacklink and the links are actually green it's going to get confusing!

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[AGNEW2PRG]

thanks,

I will give that a go and keep you posted...

regards

 

[AGNEW2PRG]

thanks for the help... that worked a treat...