Can I do this in CSS: different "link" classes? 1

[CL328]

Hi, this is what I'm trying to do:

I want to have the 4 properties of a link (active, hover, link, visited) on a page to be defined.

Now, I was to define 2 sets.

Example: navigation links look/feel one way
and
body links look/feel another way.

Right now, I only have one:
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}


How do I make 2 sets of these?

THANKS

 

[sonnysavage]

Use a "." to define a css class. Example:

a.one:active { style code... }
a.two:active { style code... }

Usage:

<a class=&quot;one&quot; href=&quot;URL&quot;>Link class &quot;one&quot;</a>
<a class=&quot;two&quot; href=&quot;URL&quot;>Link class &quot;two&quot;</a>

Enjoy!

 

[CL328]

just read the post before mine....(doh!)


the answer is
a.hover: { }

needs to be a.classname.hover: { }

sorry

 

[CL328]

Wait... Something is not working...

<td width=&quot;78&quot; valign=&quot;top&quot;><p><a href=&quot;../index.html&quot;><img src=&quot;../img/flag.gif&quot; width=&quot;78&quot; height=&quot;46&quot; border=&quot;0&quot;></a><br>
<span class=&quot;navlink&quot;><a href=&quot;../index.html&quot; class=&quot;navlink&quot;>Home</a></span>
</td>


the above is in a table and the hover property is not working. IE... all the other property are the same (black text), but on the hover, I want the text to change to white.

That does not happen.

Help please... thanks!

 

[CL328]

uhm... now I have this and it still does not work.

<td width=&quot;78&quot; valign=&quot;top&quot;>
<p><a href=&quot;../index.html&quot;><img src=&quot;../img/flag.gif&quot; width=&quot;78&quot; height=&quot;46&quot; border=&quot;0&quot;></a><br>
<a class=&quot;navlink&quot; href=&quot;../index.html&quot;>Home</a>
</td>

thanks for your help!

 

[CL328]

my style sheet looks like this:

a.navlink:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #000000;
text-decoration: underline;
}
a.navlink:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a.navlink:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}
a.navlink:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}

 

[sonnysavage]

I don't know... maybe it's the browser, you styles look good to me.

 

[BDNFLNC]

Per your latest &quot;not working posting&quot;. try thi s instead...

<td width=&quot;78&quot; valign=&quot;top&quot;>
<p><a href=&quot;../index.html&quot;><img src=&quot;../img/flag.gif&quot; width=&quot;78&quot; height=&quot;46&quot; border=&quot;0&quot;></a><br>
<a href=&quot;../index.html&quot; class=&quot;navlink&quot;>Home</a>
</td>

.......

Take the class and place it AFTER the link code. It should probably not be between the a and the href.

Hope that works!

-----------------------------------------------
These are endless galaxies which are yours.
You can journey to infinity
through the endless passages of the cosmos.
Even better. This all belongs to you.
This is your mind.

 

[CL328]

still not working... here is a page it does not work on...

http://www.texastaxinvestfund.com/pg/tax_plan_work.htm

the links under the images

any ideas?

thanks

 

[sonnysavage]

Tested:
IE 6 (latest updates)
Mozilla 1.0

Works great on BOTH of them. What's your IE version? Older browsers don't support all CSS properties, in fact Mozilla 1.0 supports CSS properties better than any other browser, and is great for testing.

http://www.mozilla.org/