Welcome to WebmasterWorld Guest from 107.20.54.98

Forum Moderators: not2easy

Message Too Old, No Replies

Conflicting link colors

Yet another CSS question...

     
7:38 pm on Jul 28, 2002 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:5817
votes: 64


I'm wanting to define a specific link color that differs from the "A: link" colors.

When I use a div like this:

div.nolink {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}

.... the text-link centers but defaults to the "A: link" color.

When I add the "a" like this:

div.nolink a {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}

..... the new link color shows, but I loose my center and margin.

Suggestions?

8:01 pm on July 28, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


It will work if you use the div class to set block level stuff such as text-align and margin, but change the color of the link text with its own class.

<div class="nolink><a href="someURL" class="newcolor">Link Text<a></div>

8:25 pm on July 28, 2002 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:5817
votes: 64


Doesn't work - what's wrong, thanks.

<div class="nolink><a href="someURL" class="linkcolor">Link Text</a></div>

div.nolink {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}
.linkcolor a {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}

even tried:

a.linkcolor {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}

8:34 pm on July 28, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Just use .linkcolor {...}, not .linkcolor a {...}

All you need is this:

.linkcolor {
color: #669999;
background: transparent;
}

8:35 pm on July 28, 2002 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:5817
votes: 64


OK - got it:

div.nolink {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}
a.linkcolor {
background: transparent;
color: #669999;
}

<added> wouldn't work without the "a" Thanks!

8:16 am on July 29, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 0


I've been caught out by the text-align property before.

Basically, the mistake is to think it aligns the element. It doesn't; it aligns the text inside the element.

Consider the <div> element with some text inside it. It might look like this:


+--------------------------+
¦ ¦
¦This is some text ¦
¦ ¦
+--------------------------+

If you apply the style div {text-align:center;} it will align the text inside the <div> so that there is the same amount of space either side. It does not align the <div> itself.

No consider an <a> element. It is an inline element, which means that the element is only as wide as it needs to be. It looks like this:


+--------------+
¦This is a link¦
+--------------+

There is no extra space anywhere. If you could apply text-align:center to the element, it would make no difference: the text can't be moved any further to the right because there's no room to do so.