PDA

View Full Version : How to make 2 differnat links act differant with css on a page


LoveLeather
08-20-2007, 06:51 PM
How do I make 2 hyperlinks act differantly on the same page?

So far I am able to control my links using a. a.link a.visited etc but that makes all links do the same, how do I make another set of links act differantly?

domedia
08-20-2007, 08:12 PM
Here ya go:
http://www.dreamweaverclub.com/forum/showthread.php?t=26212

Hopefully that will explain everything. If not, come back with your code so far so we can sort it out.

LoveLeather
08-23-2007, 09:19 PM
Thanks domedia

It certainly put me in the right direction:

<style type='text/css'>
<!--
a.one {color: #000000}
a.one:link {color: #000000}
a.one:visited {color: #000000}
a.one:hover {color: #000000}
a.one:active {color: #000000}

a.two {color: 000000}
a.two:link {color: #000000}
a.two:visited {color: #000000}
a.two:hover {color: #000000}
a.two:active {color: #000000}

a.three {color: #000000}
a.three:link {color: #000000}
a.three:visited {color: #000000}
a.three:hover {color: #000000}
a.three:active {color: #000000}

a.four {color: #000000}
a.four:link {color: #000000}
a.four:visited {color: #000000}
a.four:hover {color: #000000}
a.four:active {color: #000000}
-->
</style>

Use as many as you need in your document and style them as you need, you can of course call them what you like.

gmcrone
08-24-2007, 06:03 AM
You can set links contained in different parts of your web page to be
different colors by using the pseudo class.

For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

You can do this in the following fashion:
#content a:link {color: #009900;}
#content a:visited {color: #999999;}
#content a:hover {color: #333333;}
#content a:focus {color: #333333;}
#content a:active {color: #009900;}

Now assuming that you have your main content in a division named
"content" all links within that division will now be styled by this new style
selector. Should your selector have a different name, just change the
#content selector to match your division name.

Then for the links in a column you could use the following:
Once again, this assumes the name of the column division, just change
the name to match yours.
#column a:link {color: #009900;}
#column a:visited {color: #999999;}
#column a:hover {color: #333333;}
#column a:focus {color: #333333;}
#column a:active {color: #009900;}

This same method can be accomplished by declaring a class instead of
an id.
Though in this case you will need to add a class to each link.
a.column:link {color: #009900;}
a.column:visited {color: #999999;}
a.column:hover {color: #333333;}
a.column:focus {color: #333333;}
a.column:active {color: #009900;}
<a class="column" href="" title="">some link text</a>

But, there is still yet an easier way

.column a:link {color: #009900;}
.column a:visited {color: #999999;}
.column a:hover {color: #333333;}
.column a:focus {color: #333333;}
.column a:active {color: #009900;}

Then in the (X)HTML file
<div class="column">
<a href="" title="">some link text</a>
</div>

Mike...