By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,395 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,395 IT Pros & Developers. It's quick & easy.

how to code for different color for the link in same page??

100+
P: 127
Below is css for the link color for my homepage... My homepage have 5 different table which contain a link... If i wish to have different color for the link in different table in same page, what coding i should adding?? Can someone give me a guildeline?? Thanks..


Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. <!--
  3. a:link {
  4.     color: #FFFFFF;
  5. }
  6. a:visited {
  7.     color: #FFFFFF;
  8. }
  9. a:hover {
  10.     color: #CCCCCC;
  11. }
  12. a:active {
  13.     color: #CCCCCC;
  14. }
  15. -->
  16. </style>
Feb 23 '07 #1
Share this Question
Share on Google+
11 Replies


Expert 100+
P: 1,892
Below is css for the link color for my homepage... My homepage have 5 different table which contain a link... If i wish to have different color for the link in different table in same page, what coding i should adding?? Can someone give me a guildeline?? Thanks..


Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. <!--
  3. a:link {
  4.     color: #FFFFFF;
  5. }
  6. a:visited {
  7.     color: #FFFFFF;
  8. }
  9. a:hover {
  10.     color: #CCCCCC;
  11. }
  12. a:active {
  13.     color: #CCCCCC;
  14. }
  15. -->
  16. </style>
Sure check out this example:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
/* clsGoogle */
a.clsGoogle:link {color: #800000}
a.clsGoogle:visited {color: #191970}
a.clsGoogle:hover {color: #300000}
/* clsYahoo */
a.clsYahoo:link {color: #708090}
a.clsYahoo:visited {color: #A0522D}
a.clsYahoo:hover {color: #FF00FF}
/* clsDefaultLinks */
a.clsDefaultLinks:link {color: #FF0000}
a.clsDefaultLinks:visited {color: #000000}
a.clsDefaultLinks:hover {color: #600000}
</style>
</head>
<body>
<table style="border: 1px solid black">
<tr>
<td>
<a href="http://google.com" class="clsGoogle">Google</a>
</td>
</tr>
<tr>
<td>
<a href="http://yahoo.com" class="clsYahoo">Yahoo</a>
</td>
</tr>
<tr>
<td>
<a href="http://msn.com" class="clsDefaultLinks">MSN</a>
</td>
</tr>
</table>
</body>
</html>
[/html]

HTH,
Aric
Feb 23 '07 #2

P: 99
Below is css for the link color for my homepage... My homepage have 5 different table which contain a link... If i wish to have different color for the link in different table in same page, what coding i should adding?? Can someone give me a guildeline?? Thanks..


Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. <!--
  3. a:link {
  4.     color: #FFFFFF;
  5. }
  6. a:visited {
  7.     color: #FFFFFF;
  8. }
  9. a:hover {
  10.     color: #CCCCCC;
  11. }
  12. a:active {
  13.     color: #CCCCCC;
  14. }
  15. -->
  16. </style>
if the tables got an id or a class, you could do something like this
Expand|Select|Wrap|Line Numbers
  1. a:link {
  2.     color: #FFFFFF;
  3. }
  4. table.table1 a:link {
  5.        color: #F0F0F0;
  6. }
  7. table#table2 a:link {
  8.        color: #0F0F0F;
  9. }
  10.  
Always try to use container element classes or ids before you add a class to the link itself.
Feb 24 '07 #3

100+
P: 127
if the tables got an id or a class, you could do something like this
Expand|Select|Wrap|Line Numbers
  1. a:link {
  2.     color: #FFFFFF;
  3. }
  4. table.table1 a:link {
  5.        color: #F0F0F0;
  6. }
  7. table#table2 a:link {
  8.        color: #0F0F0F;
  9. }
  10.  
Always try to use container element classes or ids before you add a class to the link itself.
Thanks.. Sorry, can u explain in more detail...The table don't have any id or classas.. Can u give an example how to code it to code it??
The code below is on of the table, can u give me an example how to code it... Thanks...
Expand|Select|Wrap|Line Numbers
  1.   <tr> 
  2.       <th width="187" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"> 
  3.         <table width="82%" border="0">
  4.           <tr> 
  5.             <td> 
  6.               <?php include "alumniLogin.php"; ?>
  7.               <?php include "comLogin.php"; ?>
  8.               <?php include "ticker.php"; ?>
  9.             </td>
  10.           </tr>
  11.         </table></th>
Feb 24 '07 #4

P: 99
Expand|Select|Wrap|Line Numbers
  1.   <tr> 
  2.       <th width="187" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"> 
  3.         <table width="82%" border="0">
  4.           <tr> 
  5.             <td> 
  6.               <?php include "alumniLogin.php"; ?>
  7.               <?php include "comLogin.php"; ?>
  8.               <?php include "ticker.php"; ?>
  9.             </td>
  10.           </tr>
  11.         </table></th>
I see you are using tables in tables. Try to avoid as much as possible to use tables for lay-out, best is you don't use them at all for lay-out. This will lessen the amount of html code you have to maintain.

As i can see from your code you put the includes in a tablecell of 187 px width, in a table that is 82% of that containing table cell. Try to write down what you are doing and you see it's more work than it is supposed to be.

i think with this html code you can do the same
[HTML]
<html>
<head>
<style>
/* float all divs you want */
float1, float2, float3 { float:left; }
/* set the sizes for the separate divs */
/* with a liquid lay-out use relative values, with a fixed lay-out absolute values */
float1 { width:300px; }
/* to set the space used to display content use padding */
float2 { width:187px; padding-left:3px; }
float3 { width:300px; }
/* now your question about the links */
div.float1 a { color:red;}
div.float2 a {color:green;}
div.float3 a {color:orange; }
/* set the rest of the page example */
/* clear to stop the floating and the with is the sum of the widths */
div#content { clear:left;width:787px; }
</style>
</head>
<body>
<div class="float1"><a href="#">other table headers</a></div>
<div class="float2">
<a href="#">to show</a>
<?php include "alumniLogin.php"; ?>
<?php include "comLogin.php"; ?>
<?php include "ticker.php"; ?>
</div>
<div class="float3"><a href="#">other table headers</a></div>
<div id="content">
content
</div>
</body>
</html>
[/HTML]
Feb 24 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
To do the mentioned 'id' or 'classes', wherever you want to change the color of the link, you need to add "id="name_for_this_element". Then, in the css, you can just do:
#name_for_this_element{
color:#fofofo;
}

Or whatever color you want the link to be.
Feb 24 '07 #6

P: 99
To do the mentioned 'id' or 'classes', wherever you want to change the color of the link, you need to add "id="name_for_this_element". Then, in the css, you can just do:
#name_for_this_element{
color:#fofofo;
}

Or whatever color you want the link to be.
An id is not a good idea to use for links because it has to be a unique value for each element on the page. You could do #link-1, #link-2, ... but as long as there is no support for a[id^=link] in all browsers it will require a large amount of css, which isn't flexible either when the links are created dynamically.
Feb 24 '07 #7

100+
P: 127
An id is not a good idea to use for links because it has to be a unique value for each element on the page. You could do #link-1, #link-2, ... but as long as there is no support for a[id^=link] in all browsers it will require a large amount of css, which isn't flexible either when the links are created dynamically.

Thanks a lot, xwero and drhowarddrfine coz willing to help me... :)
Sorry, i'm still new to html and css... I try to edit the code as you provided, but it seem didn't work, i think i did something wrong on the code, but i really don't how to repair it... I just use a part of ur code in my page as show below...
Because i want to remain the color of other link in the page and some of the link of my page is not in table... i just want to change the color of a:link, a:visited, a:hover and a:active for the table below:
Expand|Select|Wrap|Line Numbers
  1.   <tr> 
  2.       <th width="187" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"> 
  3.         <table width="82%" border="0">
  4.           <tr> 
  5.             <td> 
  6.                 [PHP]<?php include "alumniLogin.php"; ?>
  7.                 <?php include "comLogin.php"; ?>
  8.                 <?php include "ticker.php"; ?>
  9.                 </div>[/PHP]
  10.             </td>
  11.           </tr>
  12.         </table></th>
And the other link will remain the same color... This is the code i have modify, but i think it is wrong... Emm.. How to repair it??
Thanks a lot..

[HTML]<html>
<style type="text/css">
<!--
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #CCCCCC;
}
a:active {
color: #CCCCCC;
}

float{ float:left; }
float { width:187px; padding-left:1px; }
div.float a: link{color:green;}
div#content { clear:left;width:187px; }
-->
</style>


<tr>
<th width="187" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row">
<table width="82%" border="0">
<tr>
<td>
<div class="float">
<a href="#">to show</a>
[PHP]<?php include "alumniLogin.php"; ?>
<?php include "comLogin.php"; ?>
<?php include "ticker.php"; ?>
</div>[/PHP]
</td>
</tr>
</table></th>[/HTML]
Feb 25 '07 #8

P: 99

[HTML]<html>
<style type="text/css">
<!--
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #CCCCCC;
}
a:active {
color: #CCCCCC;
}

float{ float:left; }
float { width:187px; padding-left:1px; }
div.float a: link{color:green;}
div#content { clear:left;width:187px; }
-->
</style>


<tr>
<th width="187" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row">
<table width="82%" border="0">
<tr>
<td>
<div class="float">
<a href="#">to show</a>
[PHP]<?php include "alumniLogin.php"; ?>
<?php include "comLogin.php"; ?>
<?php include "ticker.php"; ?>
</div>[/PHP]
</td>
</tr>
</table></th>[/HTML]
You code makes it more difficult than it should be. The float style is only necessary if you want to leave the table lay-out. When you write html code you should go in super lazy mode. Every character is one too many.

Maybe a question i have overseen is; are the tables in the includes the tables you want to apply the different link colors too? I assumed you wanted the colors for the rest of the table head.
If so you have to add a class to the generated tables and not to the containing table.

This is an example for other link colors in the tablehead

[HTML]
<html>
<head>
<style type="text/css">
<!--
body { background:#000; }
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #CCCCCC;
}
a:active {
color: #CCCCCC;
}
/* no borders anywhere for tables */
table { border:0; }
/* this is the padding for all tables inside the tableheader */
table.header th table{padding-left:1px; }
/* i use a class for the column names so you can use the name again for other tables on the page */
table.header th.column1 { width: 187px; background: #fff;}
/* finally styling the link itself */
table.header th.column1 table a:link{color:green;}

-->
</style>
</head>
<body>
<table class="header">
<tr>
<!-- try to put all your styles into the css.
If there is no border you don't need to set a color to it. -->
<th class="column1" scope="row">
<table>
<tr>
<td>
<a href="#">to show</a>
[PHP]<?php include "alumniLogin.php"; ?>
<?php include "comLogin.php"; ?>
<?php include "ticker.php"; ?>
[/PHP]
</td>
</tr>
</table></th>
<th><a href="#">to show</a></th>
</tr>
</table>
</body>
</html>
[/HTML]

If you want to changes the links for the ticker for example you can do
Expand|Select|Wrap|Line Numbers
  1. /* i assume the ticker is in a table again */
  2. table.header table.ticker a:link { color:red;}
  3.  
As you see you don't have to use only classes and id's to style your page you can use the DOM structure too with the help of a few strategically placed classes.

I know it's a little harder to separate all your style attributes from the html and use css lay-out but in the long run you will have an easier to adjust lay-out and less html code. So try to move as much style attributes to css as you can and in no time you will have cleaner and more searchengine friendly pages. This is the way i learned.

sorry for all the ranting :)
Feb 25 '07 #9

P: 99
No, i should said thank you coz you willing to help me...
Thanks a lot...
Emm.. I have try the code, i can view the link in green color inside the dreamveaver, but when i press F12, it will show the color according to the code

Sorry, i don't really know how to modify the code...Emm... the alumniLogin, comLogin and ticker which i have included in the the page (which the home page i showed before) have their own table in alumniLogin.php, comLogin.php and ticker.php... I have try to add CSS in those page.For example, i add CSS (let said link color is blue) in comLogin.php, all the link in my home page will become blue... i should add CSS in homepage or in alumniLogin.php, comLogin.php, ticker.php?? Sorry to make u confuse... Below is the interface of comLogin.php
It's been a while ago i used dreamweaver but to modify your code you have to switch the view from design to source.

From your explanation i understand you have one css style or file so it will not be hard to look for it. I know there is a css view window in dreamweaver where you can manipulate the css styles.

comLogin.php
Expand|Select|Wrap|Line Numbers
  1. <font color="#FFFFFF"></font> 
  2. <form action="comLogin.php" method="POST">
  3.  
  4.    <TABLE width="166" height="188" cellPadding=0 cellSpacing=0 bgcolor=#8870AB style="BORDER-RIGHT: #9B77CB 1px double; PADDING-RIGHT: 0px; BORDER-TOP: #9B77CB 1px double; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 10px; BACKGROUND-IMAGE:  PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: top; BORDER-LEFT: #9B77CB 1px double; WIDTH: 140px; COLOR: #000000; PADDING-TOP: 0px; BORDER-BOTTOM: #9B77CB 1px double; FONT-STYLE: normal; FONT-FAMILY: Verdana; TEXT-DECORATION: none" >
  5.     <tr align="center" bgcolor="#4F5899"> 
  6.       <td width> <center>
  7.           <font color="#FFFFFF" size="3" face="Verdana"><strong>COMPANY LOGIN</strong></font> </center>
  8.         </td>
  9.     </tr>
  10.     <tr bgcolor="#FOF4FD"> 
  11.       <td width><font size="2" face="Verdana"><strong>&nbsp;&nbsp;&nbsp;Username</strong></font></td>
  12.     </tr>
  13.     <tr bgcolor="#FOF4FD"> 
  14.       <td width><font size="2" face="Verdana">&nbsp;
  15.         <input type="text" name="username" size="24">&nbsp;
  16.         </font></td>
  17.     </tr>
  18.     <tr bgcolor="#FOF4FD"> 
  19.       <td><font size="2" face="Verdana"><strong>&nbsp;&nbsp;&nbsp;Password</strong></font></td>
  20.     </tr>
  21.     <tr bgcolor="#FOF4FD"> 
  22.       <td><font size="2" face="Verdana">&nbsp; 
  23.         <input type="password" name="password" size="24">&nbsp;
  24.         </font></td>
  25.     </tr>
  26.       <tr bgcolor="#FOF4FD"><td colspan="2"><font size="2" face="Verdana">&nbsp;
  27.         <input type="submit" name="submit" value="Login">
  28.       </font></td>
  29.     </tr>
  30.     <tr bgcolor="#FOF4FD">
  31.       <td colspan="2">&nbsp;&nbsp;&nbsp;<a href="forgetPassword.php"><font size="1.8" face="Verdana">Forgot 
  32.         password?</font></a></td>
  33.     </tr>
  34.     <tr bgcolor="#FOF4FD"> 
  35.       <td colspan="2"><font size="1.8" face="Verdana">&nbsp;&nbsp;&nbsp;Not Register Yet? <br>&nbsp;&nbsp;&nbsp;<a href="comRegister.php">Register 
  36.         Now!</a></font></td>
  37.     </tr>
  38.     <tr bgcolor="#FOF4FD"> 
  39.       <td colspan>&nbsp;</td>
  40.     </tr>
  41.   </table> 
  42.   </form>
This is an old pain between code freaks like me and wysiwyg editors. Let dreamweaver generate the html code, add classes or ids where it's needed and do the styling not by selecting the elements and style them but by hand coding the css. I believe dreamweaver shows the dom structure of the file so you can use that as a guide.

The font tag and the non breaking space html character (&nbsp;) is considered bad practice. The code above can be cut to a quarter of its original.


I think to solve your problem you have to break your habits and try to do more handcoding. The bad way to go is to give all links a class that resembles the color you want it to have and then code it in the css view. I can't give you examples how to do that but check the menu bar to find the css view and read the help file how to use it.
Feb 25 '07 #10

100+
P: 127
Sure check out this example:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
/* clsGoogle */
a.clsGoogle:link {color: #800000}
a.clsGoogle:visited {color: #191970}
a.clsGoogle:hover {color: #300000}
/* clsYahoo */
a.clsYahoo:link {color: #708090}
a.clsYahoo:visited {color: #A0522D}
a.clsYahoo:hover {color: #FF00FF}
/* clsDefaultLinks */
a.clsDefaultLinks:link {color: #FF0000}
a.clsDefaultLinks:visited {color: #000000}
a.clsDefaultLinks:hover {color: #600000}
</style>
</head>
<body>
<table style="border: 1px solid black">
<tr>
<td>
<a href="http://google.com" class="clsGoogle">Google</a>
</td>
</tr>
<tr>
<td>
<a href="http://yahoo.com" class="clsYahoo">Yahoo</a>
</td>
</tr>
<tr>
<td>
<a href="http://msn.com" class="clsDefaultLinks">MSN</a>
</td>
</tr>
</table>
</body>
</html>
[/html]

HTH,
Aric


Thanks alot, Aric... I get what i want.... Thanks for giving me a guildeline...:)
Feb 25 '07 #11

100+
P: 127
It's been a while ago i used dreamweaver but to modify your code you have to switch the view from design to source.

From your explanation i understand you have one css style or file so it will not be hard to look for it. I know there is a css view window in dreamweaver where you can manipulate the css styles.



This is an old pain between code freaks like me and wysiwyg editors. Let dreamweaver generate the html code, add classes or ids where it's needed and do the styling not by selecting the elements and style them but by hand coding the css. I believe dreamweaver shows the dom structure of the file so you can use that as a guide.

The font tag and the non breaking space html character (&nbsp;) is considered bad practice. The code above can be cut to a quarter of its original.


I think to solve your problem you have to break your habits and try to do more handcoding. The bad way to go is to give all links a class that resembles the color you want it to have and then code it in the css view. I can't give you examples how to do that but check the menu bar to find the css view and read the help file how to use it.

Thanks because willing to give me advise... I'm learning dreamveaver, photoshop, flash, html, css, php, mysql all in one time, coz need to pass up my final year project soon, and most of my code is just download from website and learn it, so very confuse sometimes... I'm just getting what i want from the thread Aric posted last time, really thanks to you all coz willing to help me..

Thanks, Xwero...
And thanks Aric...
Feb 25 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.