CSS - Image Hyperlinks - Link-style Pseudo-classes

i currently have the following code for links..

Code:

a {
	color:#666666;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font-family: arial, helvetica, sans-serif;
	}
a:link {color:#666666;}
a:visited {color:#333333;}
a:hover {background-color:#eee;}

is there a way of having another set so that some have the colour settings as above and another set have the colour settings that are blue or something???

any suggestions would be great....

thanks

RF

Is it possible to have multiple link classes? Currently, I'm using the pseudo elements a:link, a:visited, etc., but there are a couple of places in my layout where the colors for these links are the same color as my background. Is there any way that I can single out certain links using classes and set their colors to a different color like #ffffff

Thank you in advance,
Jim

My layout contains a vertical navigation bar. It is split up into individual images. I have created a table to organize the sliced images. I am using CSS to create a hover effect. When you mouseover the table cell, the backgroudn changes (and changes back when the mouse is removed.) This is all peachy, but is it possible for me to change the colors of the text within that table cell along with the background.

Heres the CSS:

Code:

	.link_hover1{
	background-image: url("images/link_img_01a.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	} 
	td.link_hover1:visited{
	background-image: url("images/link_img_01a.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	} 
	td.link_hover1:hover{
	background-image: url("images/link_img_01b.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	} 
	td.link_hover1:active{
	background-image: url("images/link_img_01a.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	}

I tired implementing the font-color property. No use. does this have something to do with my 'td' selector? I have a feeling that this is the problem.

Hi all, I'm a newbie to CSS but I'm giving it a good crack and trying to learn all I can, reading and experimenting etc.

I'm currently building a website for my wife's cake baking business and can't seem to get multiple CSS link classes working and I don't know why. I've been reading various websites on CSS for the last couple of hours but honestly can't see what I've done wrong. Any help would be appreciated.

If you look at the site Ladybirdbakery co uk the top navigation has a .top_nav class that makes it white and the links are supposed to turn yellow and underline when you hover but they just don't. Similarly the small print links at the bottom, the mailto link underlines but the external link to my marketing website doesn't. I've tried re-writing the CSS a few times and put it through the W3 validation and it doesn't pull up any errors on my link classes that seem to be causing this issue. Could anyone offer me some advice so I can get this right and not make the same mistakes in the future?

The CSS lives at the above address /ladybird.css

Thank you very much.

Ant

hi, i have this style for a div hover effect, but how cani stop my other links having this efect? i want 2 different link styles.

Code:

<style type="text/css">     
a:link
{
text-decoration:none;
color:#000000;
background:#B1DB9D;

width: 200px;
display:block;
}
a:active
{
text-decoration:none;
color:#000000;
background: #A2D389;

width: 200px;
display:block;
}
a:visited 
{
text-decoration:none;
color:#000000;
background:#B1DB9D;

width: 200px;
display:block;	  
}
a:hover
{
text-decoration:none;
color:#000000;

width: 200px;
background: #A2D389;
display:block;	  
}

</style>

Any ideas?

I know how to use the class etc but i can't get he link part right.

Thanks

I have not done much web designing lately and have forgoten a number of things. Right now i cannot remember if it is possible to specify link styles for a specific class for a cell in a table. I have this code for the entire page:

a:link,a:active,a:visited,a:hover { color : #FFFFFF; text-decoration: underline; }

However, I want to have it different in only a specific cell of a table. Is there a way to put it in the following code?

td.newshead { background-color: #013501; border-style: solid; border-color: #FFFFFF; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; font-family: verdana; font size: 125%; font-variant: small-caps; font-weight: bold; color: #FFFFFF; text-align: center; }


I can't do something like making another link class like this either

a.class:link,a.class:active,a.class:visited,a.class:hover { color : #013501; text-decoration: underline; }

I have the information comming from another page and I am not able to the <a class="class" href="url">. I need to put it in the style for the cell. Anyone able to help me out here?

I have one css file
which is linked to all my html pages

That css file defines a style for all my
<a> tags

ie - a:link, a:visited, a:hover etc.

Theres one html file
where i need a different style for some of the <a> tags
ive set a sepecific class on these tags ie:
<a class="set1" etc

and in my css file ive tried the following

.set1 a:link
{
etc
}

but for some reason this doesnt override the style on the generic a tags
ie it seems to keep using
a:link {

}

ignoring the

.set1 a:link
{
etc
}

help!

I have a webpage that has a Link tag that links to a style sheet

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn-media.madaboutbrighton.net/css/main-min-v1.4.css" />
</head>
<body>
Test 0.0.1
</body>
</html>

However, when viewing the source of this page in IE, Chrome and Firefox the Link tag has transformed into a Style tag which contains a dump of the linked style sheet

Code:

<html>
<head>
<style type="text/css" style="display:none">body... whole style sheet content dumped in here...</style>
</head>
<body>
Test 0.0.1
</body>
</html>

This is a fairly old site, and nothing has changed recently. But when i first published the site the Link tag appeared normally.

I have tried passing it a css file with no content or with just one definition in it, but it keeps changing the Link tag into a Style tag.

I obviously don't want the css dumped into a Style tag each time as this is very inefficient and bypasses all my caching/expires settings.

You can see an example of this here madaboutbrighton.net/test

This is not an isolated case and is effecting some but not all sites on my webserver, which were all displaying correctly the last time i checked but now have this problem. Even though all sites have the same settings.

I am baffled. All ideas most welcome, or even just let me know if you are having the same problem.

Cheers!!!

i want to have two seperate styles for links on my page - how can i do this. i am using dreamweaver.

i can only work out how to use one link style, i.e. the a:hover etc..

I have a menu where the submenu li's have a blue/darker blue background color and hover color.

I have one set of submenu items where I would like to change the background and hover colors for that set only, but haven't been successful in writing the second set of code, the original colors still show up

Here's the part of my styles for the list that I'm trying to change..
Code:

/* original backgrounds for the menu */
ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

Is it the way I tried to rename the style?
Code:

/* change backgrounds to shades of green for one sub menu */
.green ul.menu li ul li a {
  background: #afe4bf;
  color: #000;
  padding-left: 20px;
}

.green ul.menu li ul li a:hover {
  background: #88b796;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

thanks in advance for any help, Kathy

Can someone tell me why css style settings for links won't effect a mailto: link? Is there anyway to make it happen without individually coding style into each mailto: link?

Thanks,
HeadElf

Hello,
My unvisted links within a div section are not working, they default to Red which is set up in the CSS as a catch-all.
I see this happenning with IE 6.x and FireFox 1.5 and netscape 7
Example HTML code where the unvisited link appears in Red and it should be in Grey:
Code:

<div class=medGray>
<a href="/data/tmp/E300vV60cB.s5ukal.diblu.tmp">Download</a> extracted device records (4 records).
</div>

Here's my snippet from my CSS file:
Code:

a.medGray:link {
	text-decoration: underline;
	FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: Verdana, Tahoma, sans-serif;
}
a.medGray:visited { color:#666666; }
a.medGray:hover { text-decoration: underline; }
a.medGray:active { color:#666666; }
/*-- Default Red--*/
a:link {
text-decoration: underline;
font-family:Verdana, Arial, Helvetica; font-size:12px; color:#CC0000; }
a:visited { color:#999999; }
a:hover { text-decoration:underline }
a:active { color:#CCCCCC; }

I'm trying to set a link style for thumbnail images I have on my site but am having difficulty getting the style to take over the a { } and a:hover { } styles. Here is an example of the styles I have set;

Code:

a {
color: #005D93;
text-decoration: none;
}

a:hover {
color: #990000;
text-decoration: underline;
}

#thumb {
position: relative;    
float: left;
padding-left: 21px;
padding-bottom: 10px;
}

#thumb img {
width: 96px;
height: 145px;
}

#thumb img a {
text-decoration: none;
border: 2px;
border-color: #F5F6F7;
border-style: solid;
}

#thumb img a:hover {
border-color: #990000;
}

An example image tag is as follow;

Code:

<div id="thumb"><a href="details/page2.html" onclick="NewWindow(this.href,'name','640','460','yes');return false;"><img src="Images/2714.jpg"></a></div>

With the above mentioned, the thumbnail is surround by the a color of #005D93 and not the border color I expected. An example can be seen here - Example. I know it must be something fairly obvious I'm missing. Any help would be greatly appreciated.

Regards,
JT

Hi all,

I am trying to automate everything on my test website and I have one more angle to cover.

In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height.

Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder)

My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement.

Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values?

I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit.

Whew!