473,748 Members | 10,649 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

127 New Member
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
11 3396
AricC
1,892 Recognized Expert Top Contributor
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:lin k {color: #800000}
a.clsGoogle:vis ited {color: #191970}
a.clsGoogle:hov er {color: #300000}
/* clsYahoo */
a.clsYahoo:link {color: #708090}
a.clsYahoo:visi ted {color: #A0522D}
a.clsYahoo:hove r {color: #FF00FF}
/* clsDefaultLinks */
a.clsDefaultLin ks:link {color: #FF0000}
a.clsDefaultLin ks:visited {color: #000000}
a.clsDefaultLin ks:hover {color: #600000}
</style>
</head>
<body>
<table style="border: 1px solid black">
<tr>
<td>
<a href="http://google.com" class="clsGoogl e">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="clsDefau ltLinks">MSN</a>
</td>
</tr>
</table>
</body>
</html>
[/html]

HTH,
Aric
Feb 23 '07 #2
xwero
99 New Member
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
bb nicole
127 New Member
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
xwero
99 New Member
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;widt h: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.ph p"; ?>
<?php include "comLogin.p hp"; ?>
<?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
7,435 Recognized Expert Expert
To do the mentioned 'id' or 'classes', wherever you want to change the color of the link, you need to add "id="name_for_t his_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
xwero
99 New Member
To do the mentioned 'id' or 'classes', wherever you want to change the color of the link, you need to add "id="name_for_t his_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
bb nicole
127 New Member
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:gree n;}
div#content { clear:left;widt h:187px; }
-->
</style>


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

[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:gree n;}
div#content { clear:left;widt h:187px; }
-->
</style>


<tr>
<th width="187" bordercolor="#F FFFFF" bgcolor="#FFFFF F" scope="row">
<table width="82%" border="0">
<tr>
<td>
<div class="float">
<a href="#">to show</a>
[PHP]<?php include "alumniLogin.ph p"; ?>
<?php include "comLogin.p hp"; ?>
<?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:gr een;}

-->
</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.ph p"; ?>
<?php include "comLogin.p hp"; ?>
<?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
xwero
99 New Member
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

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

Similar topics

242
13409
by: James Cameron | last post by:
Hi I'm developing a program and the client is worried about future reuse of the code. Say 5, 10, 15 years down the road. This will be a major factor in selecting the development language. Any comments on past experience, research articles, comments on the matter would be much appreciated. I suspect something like C would be the best based on comments I received from the VB news group. Thanks for the help in advance James Cameron
53
5738
by: Cardman | last post by:
Greetings, I am trying to solve a problem that has been inflicting my self created Order Forms for a long time, where the problem is that as I cannot reproduce this error myself, then it is difficult to know what is going on. One of these Order Forms you can see here... http://www.cardman.co.uk/orderform.php3
16
4210
by: Geoff Cox | last post by:
Hello, I publish some web pages using large fonts and would like to give the user the opportunity to print the pages using a smaller font. I believe that this is possible using different style sheets? I am not clear how the user would select the different .css files? Seems to be easier than having duplicate html files ...
35
2327
by: Dirk Bruere at Neopax | last post by:
Is it possible to have one table somehow 'called' to appear on different pages? I want something to appear on all pages, yet only want to (re)edit one item. -- Dirk The Consensus:- The political party for the new millenium http://www.theconsensus.org
10
1840
by: Don Munroe | last post by:
This one has me stumped. I have three web applications running on two different servers. The first that works fine is hosted by a .Net hosting company. Everyone that uses it has no problems hitting the site. The other two applications are running on my personal server which has Windows 2003, IIS 6, and .Net 1.1 Most of my users can use the sites. Two have come up with a very strange problem. They try to go to either application and...
2
3664
by: Kenneth P | last post by:
Hi, I'm developing asp.net (vb) apps in VS.NET 2003, and I'd like to know how you can write style sheet code in a sub in an .aspx page that when it's rendered as html/text/css code in the .aspx page. The idea is to programmatically write style sheet code that dynamically goes into every page and is rendered accordingly. Let's assume I wanted this kind of code into my rendered .aspx page
6
5516
by: Paolo Pignatelli | last post by:
I have an aspx code behind page that goes something like this in the HTML view: <asp:HyperLink id=HyperLink1 runat="server" NavigateUrl='<%#"mailto:" &amp; DataBinder.Eval(Container.DataItem,"StoreEmail") &amp; "&amp;Subject=" &amp; DataBinder.Eval(Container.DataItem,"ProductName") ....
6
2137
by: mae | last post by:
I have created 2 ASP pages that gives users the option of switching back and forth between French and English. They click on the word English and it converted the text to English and the French link converts the text to French. In the ASP page with the form on it there is an includes file pointing to the scripts page. The scripts page holds the values for both languages. It works great in ASP but as soon as I rename the page to a .aspx...
232
13318
by: robert maas, see http://tinyurl.com/uh3t | last post by:
I'm working on examples of programming in several languages, all (except PHP) running under CGI so that I can show both the source files and the actually running of the examples online. The first set of examples, after decoding the HTML FORM contents, merely verifies the text within a field to make sure it is a valid representation of an integer, without any junk thrown in, i.e. it must satisfy the regular expression: ^ *?+ *$ If the...
0
8830
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9541
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9321
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9247
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8242
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6796
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4602
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3312
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2782
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.