Welcome to WebmasterWorld Guest from 54.226.194.180

Forum Moderators: not2easy

Message Too Old, No Replies

Conflicting link colors

Yet another CSS question...

     

keyplyr

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

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



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?

tedster

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

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



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>

keyplyr

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

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



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;
}

tedster

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

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



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

All you need is this:

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

keyplyr

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

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



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!

rewboss

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

10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month