|
|
Posted by John Hosking on 08/02/07 18:19
tshad wrote:
> My links/anchors in my site are a turquoise color.
By which I guess you mean #3EA2BC. A URL would be useful.
>
> a {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size:10px;
> }
> a:link {
> color:#3EA2BC;
> }
> a:active {
> color:#3EA2BC;
> }
>
> I have some tags
By which I guess you mean links, or elements, rather than tags.
> I want to be a different color so I set up a class -
> bodybold.
I get itchy when I see a class name suggesting its presumed formatting
rather than the semantic importance of the classed items. Here, I wonder
which link elements you want to be non-#3EA2BC, and *why*. Are they auto
models? Member names? Monitor brands? Planets? Species of primates? Name
the class "planet" and then you can style (and re-style) as your heart
desires. With bodybold you have to watch out constantly that you don't
change from using font-weight: bold anymore.
>
> It seems the way I do it with my menu list doesn't work for my other links
> For my menu Links I do it this way:
>
> .nav-menu li a
> {
> height: 2em;
> line-height: 2em;
> color: #666666; /* Color of the Link - need to change it for a:visited as
> well */
> text-align: center;
> margin: 0;
> padding: 0;
> font-weight: bold;
> }
> .nav-menu li a:visited
> {
> color: #666666; /* Color of visited link - should be the same as the "a"
> tag */
> }
>
> The class name, then the list, then the link. This is then applied as so:
>
> <div class="nav-menu" >
> <ul>
> <li><asp:HyperLink ID="HomeMenu" Text="Home" NavigateUrl="home.aspx
> runat="server"/></li>
What the hell is asp:? This is why you should provide a URL, so we can
see what you've really got.
>
> This doesn't work for my normal links:
>
> My <a> is:
>
> <a class="bodybold" href="file:///C|/Inetpub/wwwroot/media_kit">media</a>
>
> I tried this first:
>
> .bodybold
> That didn't work.
>
> I then realized that I needed to specifically set the <a> specifically as I
> do with my list menus, so I now have:
>
> .bodybold a
You're just guessing. Read and digest an actual tutorial, like
http://css.maxdesign.com.au/selectutorial/
(http://css.maxdesign.com.au/selectutorial/selectors_class.htm) or
http://www.htmldog.com/guides/cssintermediate/pseudoclasses/ (although
beware because the HTMLDog page doesn't use the ordering :link,
:visited, :hover, :active.
> This still didn't work work. But then I did this which did work.
>
> a.bodybold:link
> {
> font-family:Geneva, Arial, Helvetica, sans-serif;
> font-style:normal;
> font-size:11px;
BTW, please don't do this. Use % or em instead.
> font-weight:Bold;
> text-decoration:none;
> color:#666666
> }
> a.bodybold:active
> {
> font-family:Geneva, Arial, Helvetica, sans-serif;
> font-style:normal;
> font-size:11px;
> font-weight:Bold;
> text-decoration:none;
> color:#666666
> }
> a.bodybold:visited
> {
> font-family:Geneva, Arial, Helvetica, sans-serif;
> font-style:normal;
> font-size:11px;
> font-weight:Bold;
> text-decoration:none;
> color:#666666
> }
>
> Why didn't the previous ones work?
".bodybold a" selects the <a> elements which are descendants of elements
with the bodybold class. You don't have any of those. What you have are
<a> elements which have the bodybold class. Such elements are selected
with a.bodybold, as you have done.
Also BTW: since these three rule sets are identical, you can combine them to
a.bodybold:link, a.bodybold:visited, a.bodybold:active
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
or even
a.bodybold:link, a.bodybold:visited, a.bodybold:active
{
font: normal bold 11px Geneva, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#666666
}
but if they're identical, why are you specifying them at all? And what
about the :hover case?
HTH
--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
Navigation:
[Reply to this message]
|