change colour of visited link

vinpkl · December 16, 2008

hi all

i have 10 links.

and i want that only the visited active link should change colour and the rest links should automatically change back to normal as unvisited links whether they have been visited on not.

i m using IE7 and Firefox 3. my 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

beansandsausages · December 16, 2008

because all the colours are the same?? maybe.

there all set as : color:#ffffff;

<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:pink; //  <------------- change that colour i like pink tho haha 
   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>

vinpkl · December 16, 2008

hi burnside

sory not the colour but i mean background colour.

vineet

beansandsausages · December 16, 2008

<style type="text/css">
A:link {background: #FFCC00; text-decoration: none}
A:visited {background: black; text-decoration: none}
A:active {background: #FFCC00; text-decoration: none}
A:hover {background: #FFCC00; font-weight:bold; color: red;}
</style>

just mess around with that.

vinpkl · December 16, 2008

<style type="text/css">
A:link {background: #FFCC00; text-decoration: none}
A:visited {background: black; text-decoration: none}
A:active {background: #FFCC00; text-decoration: none}
A:hover {background: #FFCC00; font-weight:bold; color: red;}
</style>

just mess around with that.

hi burnside

these kind of changes i have applied many times but the problem is when a links has been clicked once whether it has a background or no background ,

it dont change its state to unclicked link when the other link is clicked. it remains as a visited link till u delete cache.

vineet

vinpkl · December 16, 2008

hi burnside

i need something like the paging effect of phpfreaks forums.

when u click the page number 2 then page number 1 will automaticaly change to normal state.

vineet

beansandsausages · December 16, 2008

so when you click link2 link1 will change back to normal?

vinpkl · December 16, 2008

so when you click link2 link1 will change back to normal?

yes you can try to click pages 1,2,3

and when u wil click 3rd link then 1 & 2 wil become normal like unvisited.

vineet

beansandsausages · December 16, 2008

well why not just use hover then?

vinpkl · December 16, 2008

well why not just use hover then?

hover will give effect only on rollover.

we cannot get effect for visited page link to show we are at 3rd page or 4th page.

vineet

beansandsausages · December 16, 2008

but that you want isnt realy a visited link as soon as you click a diffrent link you want it to go back to default, whats the point lol?

vinpkl · December 16, 2008

but that you want isnt realy a visited link as soon as you click a diffrent link you want it to go back to default, whats the point lol?

i want exactly the same what i told you about forum paging.

if i have 10 links then i click any of the link. then only that clicked link should be highlighted to show i am on that page whether i have clicked 2 links before that link or 5 links before that link.

like i went to page 5 from pages 1,2,3,4 then only page number 5 should be highlighted not rest 1,2,3,4 that i visited before moving to page 5

vineet

beansandsausages · December 16, 2008

ah i see now.

well the way that is done in the pagin tutorial is by a database,

// loop to show links to range of pages around current page
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
   // if it's a valid page number...
   if (($x > 0) && ($x <= $totalpages)) {
      // if we're on current page...
      if ($x == $currentpage) {
         // 'highlight' it but don't make a link
         echo " [<b>$x</b>] ";
      // if not current page...
      } else {
         // make it a link
 echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$x'>$x</a> ";
      } // end else
   } // end if 
} // end for

but for that to work its php and not css, other than that i have no idea how to do what your asking.

vinpkl · December 16, 2008

well burnside

i also needed to use the css styles in my paging but not able to apply style on them. here is my for loop

<?
echo "No. of Pages »  ";
    //use $sql with a MySQL query operation: mysql_query($sql) ... etc
    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";
        unset($class, $prepend);
       
}
?>

can u help me out in this. i want to hightlight the visited page number only. other links should become back normal.

vineet

haku · December 18, 2008

a, a:visited
{
  background-color:red;
}

Sign In

change colour of visited link

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information