hyperlinks css stylesheet

**vineet** · 12-16-2008, 12:57 PM

hi all

i am using css to style my links. what i need is that only the link that is clicked should change colour separate color and rest other links should be of same one colour.

i using IE 7 and firefox 3. This css is not working.

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
a:link{
background-color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	height:60px;
	padding:4px;
	margin:10px;
display:block;
width:20px;
	}
a:visited{
background-color:#ff0000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	height:60px;
	padding:4px;
	margin:10px;
display:block;
width:20px;
	}
a:active{
	background-color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	height:60px;
	padding:4px;
	margin:10px;
display:block;
width:20px;
	}
a:hover{
	background-color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	height:60px;
	padding:4px;
	margin:10px;
display:block;
width:20px;
	}
</style>
</head>

<body>
<a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a>
</body>
</html>

vineet

**Snookerman** · 12-16-2008, 02:41 PM

Here you go:

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a {
	background-color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	height:60px;
	padding:4px;
	margin:10px;
	display:block;
	width:20px;
}
a:active {
	background-color:#ff0000;
}
</style>
</head>
<body>
<a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a>
</body>
</html>

**vineet** · 12-16-2008, 02:58 PM

Originally Posted by Snookerman

Here you go:

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a {
	background-color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	height:60px;
	padding:4px;
	margin:10px;
	display:block;
	width:20px;
}
a:active {
	background-color:#ff0000;
}
</style>
</head>
<body>
<a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a>
</body>
</html>

hi snookerman

thanks for the reply. your code works perfect in IE7 But doesnt works in Firefox3.

what is the solutions for Firefox3

vineet

**vineet** · 12-16-2008, 03:18 PM

hi snookerman

one thing more i would like to tell.

like there are 4 links in the code that u sent. when u click one of the link then it becomes red and other becomes black.

that is perfect in IE7. But when u click any link and it becomes red and then simultaneously if u click on the white space of the page that link wil turn back to black.

there is trouble in the code. it should not become black until anyother link is clicked. it become black when u click on white space on the page.

vineet

**Snookerman** · 12-16-2008, 04:47 PM

Originally Posted by vineet

hi snookerman

thanks for the reply. your code works perfect in IE7 But doesnt works in Firefox3.

what is the solutions for Firefox3

vineet

Ahh.. sorry my bad, I forgot FF doesn't like a:active, try this:

HTML Code:

<style type="text/css">
a {
	background-color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	height:60px;
	padding:4px;
	margin:10px;
	display:block;
	width:20px;
}
a:active, a:focus {
	background-color:#ff0000;
}
</style>

**vineet** · 12-16-2008, 05:07 PM

hi snookerman

Code:

<style type="text/css">
a {
	background-color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	height:60px;
	padding:4px;
	margin:10px;
	display:block;
	width:20px;
}
a:active, a:focus {
	background-color:#ff0000;
}
</style>

This code is working fine in both IE7 and FF3.

But the common problem both have that if is that like if one link is red means its highlighted and you simply click on the white space of the page then all links will become black.

The highlighted red link should not become black until any other link has been clicked.

Means when u click on the white page background then the active red state changes to normal black state in IE7 and FF3.

vineet

**Snookerman** · 12-16-2008, 05:11 PM

I don't think you can do that with css, but jQuery could do this (and a lot more) easily.

**Snookerman** · 12-16-2008, 05:44 PM

Here is a code that does what you want, you can see how simple it is, took me a minute to write:

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('a').click(function() {
			$('a').removeClass('activated');
			$(this).addClass('activated');
		});
	});
</script>
<style type="text/css">
a {
	background-color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	height:60px;
	padding:4px;
	margin:10px;
	display:block;
	width:20px;
}
.activated {
	background-color:#ff0000;
}
</style>
</head>
<a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
<body>
</body>
</html>

As you can see I'm being generic here, targeting all anchor tags ('a') but you should be more specific if you want this effect on specific links. In that case, give them a class value and change the ('a') parts in the code to ('.yourclassvalue').

**vineet** · 12-17-2008, 05:58 AM

hi snookerman

i tried this example and this was what i need.

can this be applied in php pagination. i have applied it but not able to make it work.

Code:

<?php
    $page = intval($_GET['page']);
    if ($page < 1 || $page > $total_pages) {
        $page = 1;
    }
    $offset = ($page - 1) * $records_per_page;
    
echo "No. of Pages";
    for ($i = 1; $i <= $total_pages; $i++) {
        if ($i == $page) {
            $class = 'class="paging"';
            $prepend = 'Page ';
}
echo "<a href=products-".$dealer_id."-". $category_id. "-". $i. ".html " . $class . ">" .$prepend. $i . "</a>\n";
      
}
?>

this is javascript
[code]
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('a').removeClass('activated');
$(this).addClass('activated');
});
});
</script>
[code]

this is css

Code:

<style>
a.paging {
	background-color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	height:60px;
	padding:4px;
	margin:10px;
	width:20px;
}
a.paging.activated {
	background-color:#ff0000;
}
</style>

vineet

Thread: hyperlinks css stylesheet

Thread Tools

Search Thread

hyperlinks css stylesheet

css hyperlinks

css hyperlinks

css links

css hyperlinks

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions