Links issue, mouseover

[francinehds]

Hi all,

First, I should confess that I really have no idea what I'm doing. I have some inklings, but I've been borrowing free code from different sites, and have been manipulating them to suit my own needs. I'm very interested in learning though!!

The issue that I'm having right now is I have a page with two different tables. The left hand table is dark blue, and the right hand table is like a light beige colour. The links all have this really cool mouseover effect that I like, but the only problem is that the font before moving the mouse over the font is white. It looks fine on the dark blue, but on the other part, it's barely visible. The mouseover colour is fine though.

I've tried changing the font colour on the beige side for the links, but then it doesn't have the roll over effect.

How do I change the font color from white to say a dark blue, and keep the mouseover effect? BTW, this page is pretty much copied throughout my site, so the CSS file would be the easiest to manipulate.

Here's the Code.



.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
line-height: 20px;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
padding-left: 10px;
}
.style3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #1A3A77;
}
.style11 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
.style12 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #1A3A77;
}
.style4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
}
.style5 {
font-family: "Bradley Hand ITC", Verdana;
font-size: 25px;
color: #1A3A77;
font-weight: bold;
padding-left: 10px;
line-height: 25px;
font-style: italic;
}
.style10 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #1A3A77;
font-weight: bold;
font-style: italic;
}
.style7 {
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
}
body {
background-color: #B1B1B1;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #BDCEEE;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
.orange_link:link {
color: #BDCEEE;
text-decoration: none;
font-size: 11px;
}
.orange_link:visited {
color: #BDCEEE;
text-decoration: none;
font-size: 11px;
}
.orange_link:hover {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}
.orange_link:active {
color: #BDCEEE;
text-decoration: none;
font-size: 11px;
}
.style8 {
font-family: "Script MT Bold", Verdana, Arial, Helvetica, sans-serif;
font-size: 35px;
color: #FFFFFF;
font-weight: normal;
line-height: 45px;
}
.style9 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
}

I realize that it's in the a:link section, but how do I change that to just target the links in the dark blue section?

Thanks in advance!!

[hawkmanjacko]

In regards, you require different class for each link per table if you wish to achieve this.

"The left hand table is dark blue"

Link on dark blue table - <a href="linktowhatever.html" class="white">Link To Whatever</a>

a:link.white {color: #FFFFFF; text-decoration: none;}
a:visited.white {color: #FFFFFF; text-decoration: none;}
a:hover.white {color: #FFFFFF; text-decoration: underline;}

"right hand table is like a light beige colour"

Link on light beige table - <a href="linktowhatever.html" class="black">Link To Whatever</a>

a:link.black {color: #000000; text-decoration: none;}
a:visited.black {color: #000000; text-decoration: none;}
a:hover.black {color: #000000; text-decoration: underline;}

You can change the colours to whatever you believe suits the bgcolor of the table.

--------------

Here's an example for you --> http://www.borderprints.co.uk/example.html

[francinehds]

I'm sorry I never said thank you for helping me figure this out :(

I was just going through some of my old posts and found this.

I really appreciate your input, and it worked like a charm.