homepage Welcome to WebmasterWorld Guest from 23.22.29.137
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved