473,225 Members | 1,162 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 software developers and data experts.

Different colored link

Hi all,

I'm using an open source template from oswd.org and I wanted to change the color of one of the links to make it stand out from the others. Here's the CSS code:

Expand|Select|Wrap|Line Numbers
  1. .nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
  2. .nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px;  border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}
  3. .nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;}
  4. .nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
  5. .nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}
  6.  
Note the a.inquiry:hover above - I added that entire line in hopes that would change the color.

And here is the HTML in question:

Expand|Select|Wrap|Line Numbers
  1.         <!-- Navigation Level 3 -->
  2.         <div class="round-border-topright"></div>
  3.         <h1 class="first">TurnkeySolutionsNow</h1>        <!-- Navigation with grid style -->
  4.         <dl class="nav3-grid">
  5.           <dt><a href="whyusetsn.html">Why Use TSN</a></dt>
  6.           <dt><a href="productdevelopment.html">Product Development </a></dt>
  7.             <dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
  8.             <dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
  9.             <dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
  10.             <dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
  11.             <dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
  12.             <dd><a href="productdevelopment-industries.html">Industries</a></dd>
  13.             <dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
  14.           <dt><a href="contact.html">Contact Us</a></dt>
  15.         </dl>                        
  16. <p>&nbsp;</p>
  17.       </div>
  18.  
The link I want to change color is the Inquiry Form. I thought by adding class="inquiry" I could define the color, but I'm having issues.

Any help is appreciated - thanks in advance!

Patrick
Sep 11 '07 #1
1 2047
Death Slaught
1,137 1GB
Hi all,

I'm using an open source template from oswd.org and I wanted to change the color of one of the links to make it stand out from the others. Here's the CSS code:

Expand|Select|Wrap|Line Numbers
  1. .nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
  2. .nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px;  border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}
  3. .nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;}
  4. .nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
  5. .nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}
  6.  
Note the a.inquiry:hover above - I added that entire line in hopes that would change the color.

And here is the HTML in question:

Expand|Select|Wrap|Line Numbers
  1.         <!-- Navigation Level 3 -->
  2.         <div class="round-border-topright"></div>
  3.         <h1 class="first">TurnkeySolutionsNow</h1>        <!-- Navigation with grid style -->
  4.         <dl class="nav3-grid">
  5.           <dt><a href="whyusetsn.html">Why Use TSN</a></dt>
  6.           <dt><a href="productdevelopment.html">Product Development </a></dt>
  7.             <dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
  8.             <dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
  9.             <dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
  10.             <dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
  11.             <dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
  12.             <dd><a href="productdevelopment-industries.html">Industries</a></dd>
  13.             <dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
  14.           <dt><a href="contact.html">Contact Us</a></dt>
  15.         </dl>                        
  16. <p>&nbsp;</p>
  17.       </div>
  18.  
The link I want to change color is the Inquiry Form. I thought by adding class="inquiry" I could define the color, but I'm having issues.

Any help is appreciated - thanks in advance!

Patrick
Try changing the "class" to "id" like this:

HTML:

[HTML]<a href="location" id="specialLink">Text</a>[/HTML]
CSS:

Expand|Select|Wrap|Line Numbers
  1. a#specialLink
  2. {
  3. color: black;
  4. hover: red;
  5. background-color: blue;
  6. }
the CSS needs to be in an external CSS document. So now any link with the "id" 'specialLink' will have those colors.

Hope it helps, Death
Sep 11 '07 #2

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

Similar topics

16
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...
0
by: Manfred Kooistra | last post by:
I have positioned a text link over an image, and when I hover over the link, in Firefox a 1px-wide text-high white bar appears immediately to the left of the first letter of this link. CSS for the...
7
by: ashkaan57 | last post by:
Hi, I was trying to display a small colored square using <table> tag. It worked fine on the screen but when I do print preview, the square shows up as white. I used both: <table width="15"...
2
by: None | last post by:
How do i write lines with different colors in a textbox? I've tried using the forecolor property and it just takes the last color. eg. TextBox1.ForeColor = Color.Red TextBox1.Text = "test" & "...
0
by: lazaridis_com | last post by:
Colored Code Blocks Pudge generated documentation can contain colored code blocks, using the rst directive "..code-block:: Python" (an other languages supported by SilverCity). ...
7
by: Rohan | last post by:
Hello, Can some one tell me how do I get colored text. Say when I want to write something in a text file , how do I get it colored.
2
lotus18
by: lotus18 | last post by:
Hello World Can anyone explain to me why i'm having a blue colored text in some of my files. My Local Disk (D:) also got it. I think I got this problem when I share my Local Disk (D:) over the...
6
by: CodeTilYaDrop | last post by:
I was wondering how some people have colored code and others do not. How do I get the colored code to show up in the forum? I think you can read it better. I was just curious so I can do it in the...
2
by: khacthuy | last post by:
I need to write a program with content: Colored plane graphs. Tell people what I know. I always code for the study. Thanks please send me mail: khacthuy.3k@gmail.com I come from VietNamese...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.