Log in

View Full Version : 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.



<!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:

<!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
Here you go:

<!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
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:

<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



<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 (http://jquery.com/) 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:

<!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.



<?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


<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