| Conflicting link colors
Yet another CSS question... |
keyplyr
msg:1210665 | 7:38 pm on Jul 28, 2002 (gmt 0) |
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
msg:1210666 | 8:01 pm on Jul 28, 2002 (gmt 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>
|
keyplyr
msg:1210667 | 8:25 pm on Jul 28, 2002 (gmt 0) |
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
msg:1210668 | 8:34 pm on Jul 28, 2002 (gmt 0) |
Just use .linkcolor {...}, not .linkcolor a {...} All you need is this: .linkcolor {
color: #669999;
background: transparent;
}
|
keyplyr
msg:1210669 | 8:35 pm on Jul 28, 2002 (gmt 0) |
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
msg:1210670 | 8:16 am on Jul 29, 2002 (gmt 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.
|
|
|
