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.
|