CSS and Links

Changing the Default Link Style?

[andmunn]

Just a quick question "how to". What's the proper way to code a "different" link style. For example, my page has the following code at the top of the stylesheet:

A:Link {text-decoration : none;
color : #000066;}
A:Visited {text-decoration : none;
color : #000066;}
A:Active {text-decoration : none;
color : #000066;}
A:Hover {text-decoration : underline;
color : #CC0000;}

However, there are certain areas of text (which are links) that i want to display different.

For example, i have this class:

.menutop {
font-family: Verdana, Arial, Helvetica, sans serif;
font-style: normal;
font-weight: normal;
font-size: 8pt;
color: #ffffff;

How would i make it so that the class "menutop" doesn't use the default link colours, and lets say, is *always* a plain white textual link (no underlines, nothing, just always white).

Thanks!
Andrew.

[Rambo Tribble]

A couple notes on the existing code - a lower case "a" for the anchor tag CSS definitions would be more proper as in:
a:link{etc. & so on}

And it is better to place the definitions in the order link, visited, hover, active so all browsers will properly refresh.

To specify anchor tags within menutop:

.menutop a{etc. & so forth}
.menutop a:link{and on, and on}

[darrin365]

To follow up on this, how does one apply two classes to the same set of data? For instance, if I create:
.menu a:link {
blah;
blah;
}

.menu a:visited {
blah;
blah;
}

How do I then apply both classes to my menu? I tried:
<div id="menu" class="menu a:link> <div class="menu a:visited>
Blah, blah, blah
</div>
</div>
Doing this killed all my css on the page. So, obviously it's not right.

I'm new to this and am learning by trial an error (and asking questions in forums where people know much more than I.)

Thanks,
Darrin

[Paul_o_b]

How do I then apply both classes to my menu? I tried:
<div id="menu" class="menu a:link> <div class="menu a:visited>

The one thing you didn't try is the one thing you needed to do :)

<div class="menu">
<a href="#">Link</a>
</div>

The states of the anchors are pseudo classes and do not appear in the document itself. The browsers gives the anchors its visited or unvisited states so you need to do nothing about it in the html.

The css comes into play when the anchor is in the state specified and is covered simply by being within the class of menu (as above).

Any anchor states that you have defined in the css will apply the the <a> element in the html automatically as long as the anchor is within that class of menu.

(also do not confuse class (.) with id (#) as that is another issue entirely :) )

Paul

[BlobFisk]

Don't forget that the ordering of your pseudo classes is very important:

A:link { color: red } /* unvisited links */
A:visited { color: blue } /* visited links */
A:hover { color: yellow } /* user hovers */
A:active { color: lime } /* active links */

From the W3C Selectors page [w3.org]:

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color will apply when the user both activates and hovers over the A element.

[darrin365]

Thanks. I was trying to stick with the original posting example, but here are my specifics. It might help clear this up a bit.

I've got these link characteristics as my defaults:
a {
text-decoration:none;
}

/* link: normal links, active: links in use */
A:LINK, A:ACTIVE {
color: #422C00;
font-weight: bolder;
}

/* hover: mouse hover */
A:HOVER {
color: white;
font-weight: bolder;
}

/* visited: previously visited links */
A:VISITED {
color: #E7DFC6;
font-weight: bolder;
}

I've also got a left navigation bar that is an ID:
#leftNav {
position: absolute;
width: 20%;
top: 205px;
left: 10px;
padding: 10px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
z-index: 4;

In addition, I've got a CLASS that defines the navbox style of each button in that navigation bar:
.navbox {
background: #A0965A;
border-color: #422C00;
border-style: groove;
border-width: 2px;
color: #E7DFC6;
font-size: 12px; /*some button-like boxes for the left-side navigation*/
margin: 2px;
padding: 2px;
}

But, I need the a:link and a:visited in these boxes to have a different color than the ones on the rest of my site. Otherwise, the text in the boxes is unreadable as it uses the same color as the background. So, I created:
.leftNav a:link {
color: #E7DFC6;
}

.leftNav a:visited {
color: #E7DFC6;
}

My HTML looks like:
<div id="leftNav" class="leftNav a:link">
<div class="navbox"><a href="../geneology/login.php">Log In</a>&nbsp</div>
<div class="navbox"><a href="../geneology/searchform.php">Advanced Search</a>&nbsp</div>
<div class="navbox"><a href="../geneology/surnames.php">Surnames</a>&nbsp</div>
</div>

That works OK, except for visited links. I tried changing to:
<div id="leftNav" class="leftNav a:link"><div class="leftNav a:visited">
<div class="navbox"><a href="../geneology/login.php">Log In</a>&nbsp</div>
<div class="navbox"><a href="../geneology/searchform.php">Advanced Search</a>&nbsp</div>
<div class="navbox"><a href="../geneology/surnames.php">Surnames</a>&nbsp</div>
</div>
</div>

But that killed the CSS on the whole page, so I assumed that was a bad move on my part.

Any suggestions, or am I already wandering way out in left field?

Thanks again,
Darrin

[Paul_o_b]

Hi,

Any suggestions, or am I already wandering way out in left field?

You're wandering somewhere but you're not reading our posts lol :)

I gave you the answer previously. You don'tneed to add anything extra to the html to specify the states of the anchor. They will work automatically as long as they are contained within the class(or id) specified and are defined in the css correctly.

Just specify the class name by itself don't add any states of the a: link to it. e.g. use class="leftNav" not class="leftNav a:link".

<div id="leftNav" class="leftNav"> 
<div class="navbox"><a href="../geneology/login.php">Log In</a>&nbsp</div> 
<div class="navbox"><a href="../geneology/searchform.php">Advanced Search</a>&nbsp</div> 
<div class="navbox"><a href="../geneology/surnames.php">Surnames</a>&nbsp</div> 
</div> 

You didn't actually need to create another class anyway you could have just used the existing leftNav id or the existing navbox class.

e.g.

#leftNav a:link {color:red} etc...

Then you wouldn't have needed to add anything to the html at all as the id is already there.

Also as mentioned twice above ensure that you define your anchor states in the correct order. In the code you pasted above you have the wrong order for them.

You have also missed a closing bracket out from one of the css styles but I assume that is because you copied it incorrectly. Anyway check your source to make sure its correct.

Heres a simplified version of your code except I've called the links different colours so you can see whats going on.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
a { 
text-decoration:none; 
color: #422C00; 
font-weight: bolder; 
} 
a:visited {color: blue;} 
a:hover {color: white;} 
a:active{color: yellow;} 
#leftNav { 
position: absolute; 
width: 20%; 
top: 205px; 
left: 10px; 
padding: 10px; 
text-align: center; 
font-family: Arial, Helvetica, sans-serif; 
z-index: 4; 
}
.navbox { 
background: #A0965A; 
border-color: #422C00; 
border-style: groove; 
border-width: 2px; 
color: #E7DFC6; 
font-size: 12px; /*some button-like boxes for the left-side navigation*/ 
margin: 2px; 
padding: 2px; 
} 
#leftNav a{ 
color: red; 
font-weight: bolder; 
} 
#leftNav a:visited {color: green;} 
#leftNav a:hover {color: white;} 
</style>
</head>
<body>
<div id="leftNav"> 
 <div class="navbox"><a href="#">Log In</a></div>
 <div class="navbox"><a href="#">Advanced Search</a></div>
 <div class="navbox"><a href="#">Surnames</a></div>
</div>
</body>
</html>

Paul

[darrin365]

Paul,

Thanks for slapping me about a bit. I needed that. After rereading your posts about 40 times to try to understand (I said I am a newbie!) I think I got it.

Then it turned out I was trying to make it much more complicated than I should have. The biggest problem I was having was that my visited links were the wrong color. Turns out I had the wrong color defined! What a goob!

Nevertheless, I learned a lot in the process. I decided to challenge myself by building this thing in CSS (considering I have almost no sitebuilding experience). So a good part of my layout and CSS were cobbled from other templates I'd seen on the web. Now that I've learned a little bit about what I'm doing, I am trying to clean up some of the mess. :-)

Oh, yeah, and I fixed the a: listing order as you told me twice.

Thanks again for the help! I probably have one more question I'll post under another discussion.

Darrin