[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
   wise-women



[an error occurred while processing this directive]homeback about/faq features tutorials resources members search
resources
 

Wise Women List Archive File

Different Link Colors on the Same Page

Question:

I am supposed to be collaborating with other designer on a project where they set up white links against a navy background at the top of the page. Obviously, white links against the white parts of the rest of the page don't work. What's my best solution?


This is where CSS for links helps immensely-this way you can tell the links what colour to be..


You can easily do this with css...

here's the code format you'll follow.. just fill in your colors :)

A:link { color: #xxxxxx; }
A:hover { color: #xxxxxx }
A:active { color: #xxxxxx }
A:visited { color: #xxxxxx }

A:link.color1 { color: #xxxxxx; }
A:hover.color1 { color: #xxxxxx }
A:active.color1 { color: #xxxxxx }
A:visited.color1 { color: #xxxxxx }

A:link.color2 { color: #xxxxxx; }
A:hover.color2 { color: #xxxxxx }
A:active.color2 { color: #xxxxxx }
A:visited.color2 { color: #xxxxxx }

Then your codes will be like this:
<a href="xxx.html">
<a class="color1" href="xxx.html">
<a class="color2" href="xxx.html">

Hope this helps.. if you need more help just let me know.


Set up a class for them with CSS - those links white, other links some other color. Or use images instead of text for one set or the other.


[Editor's Note: This message is part of another thread, but it's related so I'm including it here.]

<I wanted to add that
< I've had good success (with all but the hover in NN) by putting the
< link style definitions in this order...
<
< A:link
< A:visited
< A:hover
< A:active
<
< FWIW

YES YES YES !!!

I remember mentionning this to list when I found out this winter that many of the unconsistency of my CSS with Netscape came from the order in which the properties are listed. Netscape WILL NOT recognize the properties if they are not in the order it wants it.

As an indispensable (is that English ?) tool I use TopStyle. I open my CSS file in TopStyle. In the top left window I can see my code, in the top right I can see a list of properties. On top of that window, the tabs allow to select which browser I am checking against. I click on Netscape and I look at the order in which the properties are listed. I modify the order in my file on the left accordingly.

As a rule of thumb, if it works in Netscape, 98% of the time it will work in IE (I am talking for Windows 9+). And this is true for tables as well. IE is much more tolerant with missing tags or empty cells. Consequently, when scripting, I prefer to check regularly with Netscape and only do a final check with IE. If I do the opposite, I end up having to do a lot of checking and editing at once.

Someone else asked about the pertinency of using CSS, external CSS over inline ones etc.

I personnaly could not work without an external CSS anymore. I use the same one for all my sites and just modify the colors, sizes, add, remove or rename some classes etc. This way, as I work along, if I want to test different color combinations, sizes or font styles, it is a snip to change back and forth. If I realize I need a new class, I cut and past an existing one, rename it and edit it. Inline CSSs are nice for the layout and appearence but they don't solve the problem of having to change your properties in every single file.

I just finished a three month contract with an organisation here in [major Canadian city] that has a large static site. It was all scripted with Dreamweaver and had inline CSSs. When time came to change some attributes, unless the files where imported in DW and modified from the template - and there were several templates, it would have taken for ever. The best option was indeed the external CSS.

As far as the learning curve ... I think I must admit I never really learnt CSSs ! I use them, they work, I try some properties from TopStyle, I see what they do and if they can be of some use, I add them to my css file. I know there is much more to them than what I am using so far. But what I mean is that, in MHO, one doesn't really need to *learn* CSSs to start using them.

Hope this can help someone.
Have a good day all of you.


 

resources

Books

Recommendations and Reviews for web professionals.

List Archives

Project WW Archive: how you can help us to build up a treasure trove of useful information.

List of available archives

Alphabet Soup

Essential terminology for the serious web professional.

 

Printable version of this page

Link to us


Join the discussion lists

 
 
passionate about the web