Welcome to Tech Support Forum home to more then 136,000 problems solved. Issues have included: Spyware, Malware, Virus Issues, Windows, Microsoft, Linux, Networking, Security, Hardware, and Gaming Getting your problem solved is as easy as:
1. Registering for a free account
2. Asking your question
3. Receiving an answer

Registered members:
* Get free support
* Communicate privately with other members (PM).
* Removal of this message
* See fewer ads.
* And much more..

 


Want to know how to post a question? click here Having problems with spyware and pop-ups? First Steps
Go Back   Tech Support Forum > Design Forum > Web Design & Programming
Reload this Page Multiple CSS link colors..
User Name
Password
Site Map Register Donate Rules Blogs Mark Forums Read


Web Design & Programming Discussion of web design, and server-side & client-side scripting

Reply
 
LinkBack Thread Tools
Old 11-20-2006, 07:24 AM   #1 (permalink)
Registered User
 
Join Date: Jul 2005
Posts: 100
OS: Windows XP Pro


Multiple CSS link colors..
I've looked on websites and I can't get this working! I want multiple CSS link colors on one page.

I will post the code below if someone could help.

There is a menu. Find the text "main page" in my code, it's near the top. That whole menu I want the link to be in white and when you hover over it'll underline. I have marked all of them as class="white".

Below that is a different menu. Search for "dresses" in my code. From "Dresses" all the way down to "Tunics" I want those links to be in #005083 and when hovering over it'll underline. I have marked these as class="blue".

I haven't created those classes, those are just to show those are what colors I want what.

Your help is most appreciated. This is driving me crazy. Here's the code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sonali Corporation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,td,th {
	font-family: tahoma;
	font-size: 11px;
	color: #414141;
}
body {
	background-color: #A2CCFF;
        margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;        
}

.style1 {color: #ffffff}
a {
	font-size: 11px;
	color: #ffffff;
}
.style2 {color: #005083}
.style3 {color: #B7B7B7}
A:link {text-decoration: none;}
A:visited {text-decoration: none;} 
A:active {text-decoration: none;}
A:hover {text-decoration: underline;}

-->
</style>
</head>
<body>
<table width="765" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="765" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
      <tr>
        <td valign="top"><table width="269" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/title.gif" width="269" height="119" border="0"></td>
          </tr>
          <tr>
            <td><img src="images/spacer.gif" width="1" height="27"></td>
          </tr>
          <tr>
            <td><table width="204" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="index.htm">Main Page</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="faq.htm">Frequently Asked Questions</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="showrooms.htm">Showrooms</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="reps.htm">Representatives</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="request.htm">Request A Catalog</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="dir.htm">Office/Warehouse Directions</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="contact">Office Contacts</a></strong></td>
              </tr>

			  <tr>
            <td><img src="images/spacer.gif" width="1" height="27"></td>
          	  </tr>
            </table></td>
          </tr>
          <tr>
            <td><table width="204" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td background="images/partner_t.gif" height="34"><img src="images/spacer.gif" width="27" height="8"><strong>View Our Catalog</strong></td>
              </tr>
              <tr>
                <td background="images/gr1.gif"><table width="204" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="25"><img src="images/spacer.gif" width="20" height="8"></td>
                    <td width="175"><table width="175" border="0" cellspacing="5" cellpadding="0">
                      <tr>
                        <td class="blue"><a href="">Dresses</a></td>
                      </tr>
                      <tr>
                        <td class="style2">Bermuda Shorts</td>
                      </tr>
                      <tr>
                        <td class="style2">Bikini Wraps</td>
                      </tr>
                      <tr>
                        <td class="style2">Capris</td>
                      </tr>
                      <tr>
                        <td class="style2">Kaftans</td>
                      </tr>
                      <tr>
                        <td class="style2">Men's Shirts</td>
                      </tr>
                      <tr>
                        <td class="style2">Pareos</td>
                      </tr>
                      <tr>
                        <td class="style2">Sarongs</td>
                      </tr>
                      <tr>
                        <td class="style2">Shawls</td>
                      </tr>
                      <tr>
                        <td class="style2">Skirts</td>
                      </tr>
                      <tr>
                        <td class="style2">Tunics</td>
                      </tr>
                    </table></td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td><img src="images/part_bottom.gif" width="204" height="7"></td>
              </tr>
               <td><br><h2>About Us</h2><hr><br>Founded in 1989 blah blah blah blah and some more stuff would go here eventually. Please think of something catchy to write. I beg of you smart people. Hurry time is running out.
                      <p>I'm not really sure what to write here, but I'm sure someone else would. This is so people can read we've been around for a long time and know we're not going anywhere.</p>
                      <p>Blah bluh bluh blah blah blah and so fourth. Please fill me up with something useful.</p></td>
            </table></td>
          </tr>
        </table></td>
        <td valign="top"><table width="496" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><table width="496" border="0" cellspacing="0" cellpadding="0" bgcolor="#A2CCFF">
              <tr>
                <td width="279"><img src="images/spacer.gif" width="1" height="45"></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td><img src="images/header.jpg" width="496" height="175" border="0"></td>
          </tr>
          <tr>
            <td><table width="445" border="0" align="center" cellpadding="0" cellspacing="0">
			  <tr>
                <td><img src="images/spacer.gif" width="1" height="20"></td>
              </tr>

			  <tr>
                <td><img src="images/spacer.gif" width="1" height="20"></td>
              </tr>
              <tr>
                <td><img src="images/main.jpg" width="449" height="583" border="0" align="left"></td>
              </tr>
			  <tr>
                <td><img src="images/spacer.gif" width="1" height="15"></td>
              </tr>
            </table></td>
          </tr>
		  </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><a href="http://www.templatesfreelance.com"><img src="images/footer.gif" width="765" height="22" border="0"></a></td>
  </tr>
  <tr>
    <td>
      <table width="766" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="421" align="left" class="style1">&copy; copyright 2006</td>
		  <td width="10"><img src="images/spacer.gif" width="1" height="20"><img src="images/spacer.gif" width="1" height="1" border="0"></td>
          <td width="335" align="right" class="style1">Web Design by Yuppicide using TemplatesFreeLance.Com</td>
        </tr>
      </table><img src="images/spacer.gif" width="1" height="1" border="0"></td>
  </tr>
</table>
<img src="images/spacer.gif" width="1" height="1" border="0">
</body>
</html>
Last edited by yuppicide; 11-20-2006 at 07:50 AM.
yuppicide is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
Important Information
Join the #1 Tech Support Forum Today - It's Totally Free!

TechSupportForum.com is a leading support website for your computer needs. We offer free, friendly and personalized computer support. Why pay to have your computer fixed when you can do it for free.

Join TechSupportforum.com Today - Click Here

Old 11-20-2006, 12:04 PM   #2 (permalink)
Manager Emeritus
 
v-six's Avatar
 
Join Date: Sep 2004
Location: Gardiner, NY
Posts: 2,076
OS: OS X for mac, XP Pro for PC


Send a message via AIM to v-six
If you want to have a certain part of a page have different link properties, you need to set a different style with its own a:link, a:visitied, a:active, and a:hover properties.

Example:
this is global (will affect everything on your site)

a:link, a:visited, a:active {
color: #663300;
text-decoration: underline;
}

a:hover {
color: #663300;
text-decoration: none;
}

this is local (will only affect the div with id navigation


#navigation a:hover {
color: #333333;
text-decoration: none;
}

Let me know if this helps
__________________
mysql> --i-am-a-dummy

v-six is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
Old 11-20-2006, 01:47 PM   #3 (permalink)
Registered User
 
Join Date: Jul 2005
Posts: 100
OS: Windows XP Pro


Thanks for the help. I got things fixed.
yuppicide is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
Reply

« Previous Thread | Next Thread »

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



All times are GMT -7. The time now is 12:10 PM.

Contact Us - Tech Support Forum - Archive - Privacy Statement - Top


Copyright 2001 - 2009, Tech Support Forum
Home Tips Plus | Outdoor Basecamp | Automotive Support Forum

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85