[Powaqqatsi]

Look here

I have a nav bar that uses the "hover" CSS thing. But I also have a link next to "email" that I want to change when hovered over. But, the text looks and acts the same as the navbar text. I want the mailto link to be an other size and other colour. How should I do this ?

[Jan Van Boghout]

Originally posted by Powaqqatsi:
Look here

I have a nav bar that uses the "hover" CSS thing. But I also have a link next to "email" that I want to change when hovered over. But, the text looks and acts the same as the navbar text. I want the mailto link to be an other size and other colour. How should I do this ?

You probably want to define a separate link style for the navigation, which is easily done with your current html: to style the navigation links only, use ".nav a" and ".nav a:hover", for the general link style, just use "a" (make sure you define the general style first so the nav styles won't be overruled).

[Synotic]

Originally posted by Powaqqatsi:
Look here

I have a nav bar that uses the "hover" CSS thing. But I also have a link next to "email" that I want to change when hovered over. But, the text looks and acts the same as the navbar text. I want the mailto link to be an other size and other colour. How should I do this ?

Well there are a hundred ways you can do it, but I think the most efficient way would be to change:

Code:
a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #CCCCCC;
	text-decoration: none;
}
a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #CCCCCC;
	text-decoration: none;
}
a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	text-decoration: underline;
}
a:active {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;
}

to

Code:
.nav a { color: #ccc; font: 10px Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.nav a:hover { color: #000; text-decoration: underline }

and then add something like:

Code:
a { generic link style code here }

You would first target all the links in the navigation with the specific code, and then you could have the more general "link" style for things like the e-mail link. There's a lot more optimization that can be done.. but it looks like it was generated from some wysiwyg editor so I won't bug you about it

Edit: It looks like me and Jan have the same idea But it doesn't matter which comes first or not. Because ".nav a" has the extra class selector in there, it's more specific than the generic "a", so no conflict would occur, causing either selector's position in the stylesheet to change anything.

[Powaqqatsi]

Originally posted by Synotic:
There's a lot more optimization that can be done.. but it looks like it was generated from some wysiwyg editor so I won't bug you about it

Dreamweaver. What optimization could be done ? I'm always interested in optimization

Thanks for the help guys, I'll try this out.