How can I create 2 different A:link attributes 2

[jmeckley]

I'm new to CSS. here's my situation. I have my Styles.css file and i have my attributes for hyper links and link buttons
[tt]
A:link, A:visited, A:active, A:hover
{
color: #DD4B03;
text-decoration: none;
}
A:hover
{
text-decoration: underline;
}
[/tt]
I have now been asked to create a second look for a small group of hyperlinks that show up on every page.

How can I go about creating a second set hyperlink attributes in a CSS so only specific links use them? Thanks for your assistance.

Jason Meckley
Database Analyst
WITF

 

[Faded]

Add this to your stylesheet:

A.newlink:link, A.newlink:visited, A.newlink:active, A.newlink:hover
{
color: #DD4B03;
text-decoration: none;
}
A.newlink:hover
{
text-decoration: underline;
}
a.newlink:hover {
stuff here...
}

And then in your html document you would refer to:

<a class=&quot;newlink&quot; href=&quot;blah.html&quot;>

 

[Faded]

Oops, some extra code got in there.

You only need this part:
A.newlink:link, A.newlink:visited, A.newlink:active, A.newlink:hover
{
attribute stuff here...
}
A.newlink:hover
{
attribute stuff here...
}

Cheers, Faded

 

[ChrisHirst]

define a style class

a.classnameseudoclass {
attributes:values;
}

use
<a class=&quot;classname&quot; href=&quot;etc&quot;>Anchor Text</a>



Chris.

Indifference will be the downfall of mankind, but who cares?

 

[virusdoder]

sry for the question but:

A.newlink:link, A.newlink:visited, A.newlink:active, A.newlink:hover
{
attribute stuff here...
}

A.newlink1:link, A.newlink1:visited, A.newlink1:active, A.newlink1:hover
{
attribute stuff here...
}
I think that this will wokr with 2 differents A's?

 

[Faded]

virusdoder,

You don't need to specify the second one as A.newlink1 because the regular A:link takes care of the first style you want without specifying a classname. So to refer to the two types, you would put the following in your html:

<a href=&quot;link1.html&quot;>this is the first style</a>
<a class=&quot;newlink&quot; href=&quot;link2.html&quot;>this is the second style</a>

Cheers, Faded

 

[virusdoder]

k, but can my example work whith 3 links whith other colors?

 

[Faded]

What do you mean by 3 links? Three different styles of link? or 3 links with the same style?

You can do both of the above, the first method is like you stated in your above post, specify a different classname for each style of link that you want, and add the pseudo classes active, :hover, :link, and :visited) for each. That way you can have completely different link styles at your disposal.
Here's an example of three different style links:
/* Default link style */
a {
attributes here...
}
a:link {
attributes here...
}
a:visited {
attributes here...
}
a:hover {
attributes here...
}
a:active {
attributes here...
}

/* Alternate link style */
a.linkstyle1 {
attributes here...
}
a.linkstyle1:link {
attributes here...
}
a.linkstyle1:visited {
attributes here...
}
a.linkstyle1:hover {
attributes here...
}
a.linkstyle1:active {
attributes here...
}

* Yet another alternate link style */
a.linkstyle2 {
attributes here...
}
a.linkstyle2:link {
attributes here...
}
a.linkstyle2:visited {
attributes here...
}
a.linkstyle2:hover {
attributes here...
}
a.linkstyle2:active {
attributes here...
}

and include them in your html like this:
<a href=&quot;defaultlink.html&quot;>This is the default link</a>
<a href=&quot;linkstyle1.html&quot; class=&quot;linkstyle1&quot;>This is the first alternate style</a>
<a href=&quot;linkstyle1.html&quot; class=&quot;linkstyle2&quot;>This is the second alternate style</a>

Cheers, Faded

 

[virusdoder]

thank you very mucht, i hope that the topic starter learned well about it; because this is very easy know. i'm was looking for something like this

 

[paperlion]

This is such an informative thread. It seems a good place to pose a related problem.

I have not been successful yet removing inherited anchored qualities from a linked graphic sitting at the bottom of a css nested ul nav.

Here is hopefully the relevant (summarized) code:

<div id=&quot;navcontainer&quot;>
<ul id=&quot;navlist&quot;>
<li id=&quot;active&quot;><a href=&quot;index.htm&quot; id=&quot;current&quot;>Site Home Page</a></li>
<li><a href=&quot;/papers-articles/index-articles.htm&quot;>Articles</a></li>
<ul id=&quot;subnavlist&quot;>
<li><a href=&quot;/papers-articles/index-articles.htm&quot;>Constitution</a></li>
<li><a href=&quot;/papers-articles/index-articles.htm&quot;>Democracy</a></li>
</ul></li>
<li><a href=&quot;contact.htm&quot;>Contact Us</a></li>
<li><div align=&quot;center&quot;><img src=&quot;images/logo.gif&quot; vspace=&quot;10&quot;></div></li>
<li><div align=&quot;center&quot;><a class=&quot;ads, ads:active, ads:hover, ads:linked, ads:visited, ul ads, ul ads:active, ul ads:hover, ul ads:linked, ul ads:visited, ul ul ads, ul ul ads:active, ul ul ads:hover, ul ul ads:links, ul ul ads:visited&quot; href=&quot;/audio/professor.mp3&quot; ><img src=&quot;images/audio-link.jpg&quot; border=&quot;0&quot;></a></div>
</li>
</ul></li>
</div>
......css.......
#navcontainer { whatever }
#navcontainer ul { whatever }
#navcontainer li { whatever }
#navcontainer a { whatever }
#navcontainer a:hover { whatever }
#navcontainer ul ul li { whatever }
#navcontainer ul ul a { whatever }
#navcontainer ul ul a:hover { whatever }

#navcontainer a.ads, a.ads:active, a.ads:hover, a.ads:linked, a.ads:visited, ul a.ads, ul a.ads:active, ul a.ads:hover, ul a.ads:linked, ul a.ads:visited, ul ul a.ads, ul ul a.ads:active, ul ul a.ads:hover, ul ul a.ads:links, ul ul a.ads:visited
{ display: inline;
padding:0;
border:0;
margin:0;
width: 196px;
background-color: #369;
text-decoration: none;
}

Explanation; The html code is based a nested (2-level) unordered list, with hover effects, etc.

This forms a column for navigation 196 pixels wide. At the bottom, after the last item, I added a gif ['logo', non-linking] which sits there just so nice. However, when I added a linked gif of the same size just under it [professor.mp3], I now had to eliminate the active, hover and other anchor-related effects except perhaps for the hand mouseover that reveals a link there.

It didn't seem to work, so in my frustration I took out an elephant gun and added all the link possibilities to the 'ads' [as in advertising boxes] 'a' selectors, covering both levels of ul as well with all variants.

Alas, this didn't help either. I almost fear hearing how easy this is but, nonetheless, it would still be quite relieving.

Anybody?

PS - url is foundation1.org - bottom of nav on the homepage.

 

[Faded]

I hhink you should take the images out of the <li> and just put them below and add a .nohover classname to your linked image, like this:
<div id=&quot;navcontainer&quot;>
<ul id=&quot;navlist&quot;>
<li id=&quot;active&quot;><a href=&quot;index.htm&quot; id=&quot;current&quot;>Site Home Page</a></li>
<li><a href=&quot;/papers-articles/index-articles.htm&quot;>Articles</a></li>

<ul id=&quot;subnavlist&quot;>
<li><a href=&quot;/papers-articles/index-articles.htm&quot;>Constitution</a></li>
<li><a href=&quot;/papers-articles/index-articles.htm&quot;>Democracy</a></li>
</ul>

<li><a href=&quot;contact.htm&quot;>Contact Us</a></li>
</ul>

<img src=&quot;images/logo.gif&quot; vspace=&quot;10&quot;>
<a class=&quot;nohover&quot; href=&quot;/audio/professor.mp3&quot; ><img src=&quot;images/audio-link.jpg&quot; border=&quot;0&quot;></a>

Then add the following to your stylesheet:
#navcontainer a.nohover {
background-color:#369;
}

I think that should do it.

Let me know.

Cheers, Faded

 

[paperlion]

It doesn't seem to work. I placed these within after the ul sections, but within the div tags. Don't know how it could work otherwise?!

Thanks.

 

[Sardamil]

I'm rebuilding my website and decided to get a new menu. I decided on using a css menu. I looked around on the internet and found this one:

http://www.xs4all.nl/~peterned/examples/cssmenu.html

This works fine, but one poses me with a small problem. The hoverfunction also works on all the other links on my page. I tried the alternate link definition in my style sheet as descibed above, but it didn't solve my problem. Can anybody help me here?

 

[paperlion]

Sardamil..
I'm not sure what you're asking, but someone from a different forum solved the problem I had by showing me how to use the important function. The site I had a problem with was this one: foundation1.org. You can view the source file for it and see the nav code by the graphics especially. Here is a clip from the css file for the code for the graphics:

#navcontainer a.nohover {
display: block;
padding: 5px 4px 20px 4px;
width: 196px;
color: #fff;
background-color: #369 !important;
text-decoration: none;
}

I got the basic nav from here if it's also helpful:

http://css.maxdesign.com.au/listamatic2/vertical02.htm

Good luck.

 

[Sardamil]

Thanx Paperlion, that solved my problem.