CSS - Active And Hover Link Colors?

Hi,

Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website?

Thanks

I'd like to be able to make some links on my page one color and others a different color so they show up appropriately on different backgrounds. how would i go about doing this?

thanks

Hello all

I need help please :-)

I have a website I am making that will have various boxes and each box has to have a different link color and hover over color. My issue is that teh css does not work in terms of making all the links display the correct color as outlined in the css file. here is my css file maybe someone can tell me what is wrong (I will comment in the file also whats not working

Code:

<style type="text/css">

body {
 background-image: url(./images/pgbg.gif);
    color: #000000;
/*the below link attributes does not work */
   visited: color:#000000; text-decoration: none;
   link: color:#000000; text-decoration: none;
   focus: color:#000000; text-decoration: none;
   active: color:#000000; text-decoration: none;
   hover: color: #CC0000;
}

 .header{
background-image: url(./images/header.png);
background-color:#E6E6E6;
position:absolute;
width: 900px;
height: 100px;
left: 50px;
top: 5px;
}

.navbox1{
/*General Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 115px;
padding-left: 5px;
/*the below link attributes does not work */
 visited: color:#E6E6E6; text-decoration: none;
 link: color:#E6E6E6; text-decoration: none;
 focus: color:#E6E6E6; text-decoration: none;
 active: color:#E6E6E6; text-decoration: none;
 hover: color: #CC0000;
}

.navbox2{
/*Users Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 310px;
padding-left: 5px;
/*the below link attributes does not work */
 visited: color:#E6E6E6; text-decoration: none;
 link: color:#E6E6E6; text-decoration: none;
 focus: color:#E6E6E6; text-decoration: none;
 active: color:#E6E6E6; text-decoration: none;
 hover: color: #CC0000;
}

.loginbox{
/*Login Box*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 400px;
padding-left: 5px;
}

.content{
background-color:#E6E6E6;
position:absolute;
width: 700px;
height: 455px;
left: 250px;
top: 115px;
padding-left: 10px
}

.footer{
position:absolute;
width: 700px;
left: 100px;
top: 585px;
color: #D6E7D3;
}

</style>

I have a CSS that manages my site, but I've got a list of links that are dynamicly created with php/mysql. I have two lists that I would like to use non-CSS colors for their links.

Is there a way to override the CSS to force certain colors on the links? I've tried using the normal <p> or style settings, but the main links portion of the CSS always takes precedence and I can't seem to make it work for me.

A little background for you...the lists are as follows:
1 - a list of currently open jobs in the company
2 - a list of all jobs in the company

Both lists are also links to the job descriptions. List 1 is created based on whether the database has the job flagged as open, so its never static. List 2 is not static either because it lists the jobs in the database.

Greetings all.

I am building a site which displays data in tables, with different background colors and different text colors. I am using CSS for everything, and it's working out great. Very happy with it so far.

What I want to do, and can't seem to figure out, is link / visited colors. In each line of data, some of the columns are links. I want to set the link text color to the same as the non-link text color.

I can override the text color easily enough. If I want a row to be white on red, I do that by saying: <tr style="background-color: #f00; color: #fff" >. I cannot figure out how to change a link color. The cells in the row that are links, I want to make them white on red also. Not just the default link color for the page.

Any help would, of course, be greatly appreciated.

Thanks,
Tom

I've set-up a few link colrs in a style sheet - I see it working in mac IE, and Safari - but not IE in windows.

Most of the formatting is being ignored. I'm going to try setting all attributes (link, visited, hover...) for each set but that seems like a reach.

any ideas?

the link:

http://www.eightbyten.com/rc_store/shopcart_test.html

the style sheet directly:

http://www.eightbyten.com/rc_store/link.css

Thanks!

I'm making a page and I've got an a:link specification. I want a separate specification for a part of the page under a .header tag. The background on that part of the page doesn't match the a:link color I have specified for the rest of the page. So I want one specifically for the .header tag.

Doesn't seem to be working though. How do you think I should throw it in there?

I'm just starting to experiment with external css files and I'm stuck on how to deal with setting color for the links.

When I put this in the html page itself it works fine:

<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>


But when I instead move it to the body section of my external css file and link to that css from my html file, it doesn't do anything (link colors just go back to the default). I know I'm generally setting up the external css file correctly since the other things I set in that external file get picked up correctly (font family, font size, background image, etc.).

Any magic to using link colors in an external sheet??

In case it helps, here is my css file:

Code:

body {
  background-color: #000033;
  color: white;
  background-image:url(balbkgnd.gif);
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
 }

td {
  font-size: 12.0pt;
  font-family: Trebuchet MS;
  a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
}

th {
  font-size: 12.0pt;
  font-family: Trebuchet MS;
  a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
}

This code works in IE but not in FF. Does Firefox not support these?

<style type="text/css">
<!--
A:link
{
text-decoration: underline;
color:"#ffffff";
}

A:visited
{
text-decoration: underline;
color:"#ffffff";
}

A:active
{
text-decoration: underline;
color:"#ffffff";
}

A:hover
{
text-decoration: none;
color:"#fffffff";
}

Body
{
background:url(http://n0madism.tripod.com/mbg.jpg);
background-color:#000000;
background-repeat: no-repeat;

font-family:Georgia;
color:#ffffff;
font-size:10 pt;
text-align:left;

scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #FFFFFF;
}

td
{
font-family:Georgia;
color:#ffffff;
font-size:10 pt;
}

-->
</style>

I've searched the forum but can't find why my test with the following code works properly in IE (white link goinf yellowish on mouse over but not in FF or Op. It would be useful to correct this before going any further:

Many thanks

Robert
______________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="description"
content="test"
content="test">
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8895-1" />
<link rel="stylesheet" href="testcss.css" TYPE="text/css">

</head>

<body topmargin="0">

<div align="center">
<table border="1" cellspacing="1" width="760" bordercolor="#243348" height="50">
<span class="menu">
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item1.htm">item1</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item2.htm">item2</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item3.htm">item3</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item4.htm">item4</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item5.htm">item5</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item6.htm">item6</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item7.htm">item7</font></a></td>
<td width="41" align="center" bgcolor="#243348" height="50">
<p align="center"><a href="item8.htm">item8</font></a></td>
</span></table>
</div>
</body>


______________________________

.menu a {text-decoration:none; font-family: arial; font-size: 10pt
}

.menu a:link {color:#FFFFFF;
}
.menu a:visited {.color:#FFE2A8;
}
.menu a:hover {color:#FFE2A8;
}
.menu a:active {.color:#FFE2A8;

is there a method similar to active, so when the user clicks the link it changes style but keeps the style change (after the mouse button is released) until the link is clicked a 2nd time at which point it goes back to its initial state and so on.

i hope that makes sense

Hi,

I have this in the html and so on for each page

<div id="nav">
<ul>
<li class="current"><a href="one.htm">one</a></li>
<li><a href="two.htm">two</a></li>
<li><a href="three.htm">three</a></li>
</ul>
</div>

Then css:

#nav ul li.current a{
background:#CCCCCC;
color:#000000;
}

But I don't want the first page's link to change colour until it is
clicked. Otherwise the menu comes up with first link always
active before anything has been selected. It looks wrong.

Is there anyway around this in css?

Thanks,
jdl

Hi, I need some help to design an image based menu. I have been trying it for a week now but still could not achieve and going little bit mad.

(Ive rewritten the same problem clearly this time hope someone can help me out)

My menu image consists of 4 sections and 3 layers which looks like this: img26.imageshack.us/img26/1268/menux.gif

1.home 2.archives 3.news 4.about - (layer 1 unvistided link)
1.home 2.archives 3.news 4.about - (layer 2 hover link: mouse over)
1.home 2.archives 3.news 4.about - (layer 3 active: shows what section the visitor on afer clicking and going to that page) and my problem is with the last layer.

I created the pages via admin panel of wordpress but give the links in the header.php manually myself without using codes.

so the links of each section are like this

home=http://localhost/wordpress/
archives=http://localhost/wordpress/?page_id=2
news=http://localhost/wordpress/?page_id=35
about=http://localhost/wordpress/?page_id=31

You can see my codes for CSS and PHP files below. Could you please have a look at my codes and provide the right code. The menu at the moment works ok except from the active side of it. I tried to give class id like "active" but failed to get it worked so please please change my wrong codes.

PHP code:

Code:

<ul id="nav">
   <li id="home"><a href="http://localhost/wordpress/">home</a></li>
   <li id="archives"><a href="http://localhost/wordpress/?page_id=2">archives</a></li>
   <li id="news"><a href="http://localhost/wordpress/?page_id=35">news</a></li>
   <li id="about" class="last"><a href="http://localhost/wordpress/?page_id=31">about</a></li>
		</ul>

CSS Code:

Code:

#nav {
     list-style: none;
     padding: 0;
     margin: -105px 25px;
     width: 332px;
     height: 30px;
     background: url('images/menu.gif');
     position: relative;
}

	ul#nav li { width: 80px;
	            height: 30px;
				padding: 0 4px 0 0;
				text-indent: -900px;
				float: left;
				}

	ul#nav li.last { padding: 0; }

		ul#nav li a, ul#nav li a:visited, ul#nav li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }

			ul#nav li#home a, ul#nav li#home a:visited { background-position: 0 0; }	

			ul#nav li#archives a, ul#nav li#archives a:visited { background-position: -84px 0; }

			ul#nav li#news a, ul#nav li#news a:visited { background-position: -168px 0; }

			ul#nav li#about a, ul#nav li#about a:visited { background-position: -252px 0; }

				ul#nav li#home a:hover { background-position: 0 -30px; }

				ul#nav li#archives a:hover { background-position: -84px -30px; }

				ul#nav li#news a:hover { background-position: -168px -30px; }

				ul#nav li#about a:hover { background-position: -252px -30px; }

			.home ul#nav li#home a, .home ul#nav li#home a:visited, .home ul#nav li#home a:hover { background-position: 0 -60px; cursor: default; }

			.archives ul#nav li#archives a, .archive ul#nav li#archives a:visited, .archives ul#nav li#archives a:hover { background-position: -84px -60px; cursor: default; }

			.news ul#nav li#news a, .news ul#nav li#news a:visited, .news ul#nav li#news a:hover { background-position: -168px -60px; cursor: default; }

			.about ul#nav li#about a, .about ul#nav li#about a:visited, .about ul#nav li#about a:hover { background-position: -252px -60px; cursor: default; }

The main problem i can understand from the earlier discussion
is that i need to give id class for active links in header.php code but i also need to rewrite the last four lines of css code according to the codes i wrote in php file. Can someone please help? Can someone please add or rewrite the active bit (in css codes - last 4 lines from the bottom) and in php file. please.

Hi everyone,

I have a menu whereby when it's active it is highlighted by two combining images. Whenever the active link is hovered over the image disappears.

I'd like for the image(s) to stay put when it's active and the cursor hovers over it. This particular .css file is above my pay grade and I'm not confident I can do this and have it look good across all browsers.

Just click on the header links and hover over it to see what I'm talking about. Thanks for any input, here's the site...

spotabusiness dot com/new_spota1

(I apparently can't add URLs yet)

Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css.

I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link.

but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions.

PHP code:
Code:

<?php

$block = ( is_front_page() ? 'h1' : 'div' );

// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable

?>

<?php echo "<$block class='blog-title'>"; ?>
	<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>

<p class="description"><?php bloginfo('description'); ?>


<ul id="menu">
   <li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
		 <li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
         <li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
         <li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>

CSS code:
Code:

#menu {
     list-style: none;
     padding: 0;
     margin: -105px 25px;
     width: 332px;
     height: 30px;
     background: url('images/menu.gif');
     position: relative;
}

	ul#menu li { width: 80px;
	            height: 30px;
				padding: 0 4px 0 0;
				text-indent: -900px;
				float: left;
				}

	ul#menu li.last { padding: 0; }

		ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }

			ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }	

			ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }

			ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }

			ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }

				ul#menu li#home a:hover { background-position: 0 -30px; }

				ul#menu li#archives a:hover { background-position: -84px -30px; }

				ul#menu li#news a:hover { background-position: -168px -30px; }

				ul#menu li#contact a:hover { background-position: -252px -30px; }

			.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }

			.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }

			.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }

			.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }

i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem.

thank you for any single suggestions and comments.