View Full Version : link colors etc


Incendio
03-30-2006, 10:27 AM
I was wondering how I could modify my links within a table. For example, all my "regualr" links are uppercase in the color red. But I have this code;:

td.menu2{
background-color:red;
letter-spacing:0px;
color: #082A2E;
padding: 1px;
line-height:11px;}

And I would like that ALL links within menu2, are lowercase and have the color black.

How can I change this? I hope this makes sense. I don't want ALL links to get affected, only the ones that are placed in "table menu2"

uday
03-30-2006, 09:37 PM
just create a new class in your sytle sheet like this:

a.new:link, a.new:active, a.new:visited, a.new:hover {
color:black;
text-transform:lowercase;
}

then in your tables, wherever you have links, do this:

<a href="URL OF LINK" class="new">Name of Link</a>

:)

Incendio
03-31-2006, 08:58 AM
That's great! IT works, but I have another problem, My links look like this:

<tr>
<td width="100%" class="menu">
<a href="awards.html" class="index" class="index">• <B>AWARDS</B> <br>Check out all his nominations & wins</a></td>
</tr>
<tr>

I wan't Awards to be in uppercase, and the description ("check out all his ....") to be in lowercase. So that was why i wrote AWARDS with caps and the description with non-caps.

However, in I define "lowercase" in my css, EVERYTHING will go lowercase, even the AWARDS which is written in caps. If I remove the text-transform codfe completely, everything will be in uppercase.

What shall I do?

Also, I have a bold problem. In my code you see this:

a:link, a:active, a:visited {
TEXT-DECORATION: none;
color: #19454A;
text-transform: uppercase;
font-weight: bold;
cursor: default;
cursor: CROSSHAIR;}

In my other link class code:

a.new:link, a.new:active{
color: black;
text-transform:lowercase;
font-weight:none;}

Still my "new" links turn bold!

war59312
04-03-2006, 03:56 AM
Hey,

First off, you have two clases of the same name on the a tag. Only need one. Then "AWARDS" is wrapped in B tags so thats why they are bold. Remove the B tags. Only use css which you already have.

AWARDS will be lower case because its part of "a.new:link". Which you have as lowercase.

And your link code is wrong too.

So the best way to fix this is to start over.

Create two new classes such as:

p.lowercase {
text-transform: lowercase
font-weight: none;
}

a.uppercase {
text-transform: uppercase
font-weight: bold;
}

See now lowercase is tied to the p tag while uppercase is tied to the a tag. These are two different classes.

Then you use a link such as:

<p class="lowercase"><a href="awards.html" class="uppercase">AWARDS</a><br/>Check out all his nominations & wins</p>

Notice everything is wrapped in a P tag. This makes it one entire paragrahp. All normal text in the paragraph gets the lowercase class. While the link, A tag, gets the upercase tag.

Well hope thats what you mean.

Take Care,

Will

Incendio
04-15-2006, 03:43 AM
Yeah but, the thing is, I don't have an "</A>" after AWARDS, the whole text is a link. :/ And it won't work unless I copy your EXACT code, but if I do, it'll mess somethign else up :(

Incendio
04-15-2006, 04:03 AM
First off, you have two clases of the same name on the a tag. Only need one. Then "AWARDS" is wrapped in B tags so thats why they are bold. Remove the B tags. Only use css which you already have.


OK OK I SUCK at explaining but I will try!

the AWARDS is supposed to be in bold, whilst the description is supposed to be in ... "non-bold". That's why I wrapped the < B > tag ONLY around AWARDS and not the rest.

My link code MUST look like this:
<a href="awards.html" class="index" class="index">• <B>AWARDS</B> <br>Check out all his nominations & wins</a></td>

Instead of this:
<a href="awards.html" class="index" class="index">• <B>AWARDS</B></A> <br>Check out all his nominations & wins</td>

Because, if it does not, then when hovering, the table won't change color :/ Only the first row will change color, not the whole area.

I suck I told you, but here's a pic
http://i2.tinypic.com/vh7yis.jpg

See in the first pic, only one row is "shadowed", the row where GEUSTBOOK is. In the second pic, you have a bigger shadowed area, 2 rows....

Get what Im trying to say?

Thanks for trying to help!