CSS Menu styling issue

10 replies
Hi there

I just can't solve this - at least not as I want to

Heres the CSS code:

.linktop {
color: #343434;
text-decoration: none;
margin-left: 14px;
}

.linktop:hover {
text-decoration: underline;
}

.linktop:active {
text-decoration: none;
font-weight: bold;
}
I just can't put the active class to work.

Since I have lots of different link styles in this CSS file... what am I missing with this one?

?
#css #issue #menu #styling
  • Profile picture of the author TrueStory
    hey man,

    You HAVE TO specify them in order, even if they don't do anything:

    A:link
    A:visited
    A:active
    A:hover

    Link, visited, active, then hover.

    If you skip one, it wont work. I don't know why, but it's been common knowledge for some time.

    .linktop:link {
    color: #343434;
    text-decoration: none;
    margin-left: 14px;
    }
    .linktop:visited {}
    .linktop:active {
    text-decoration: none;
    font-weight: bold;
    }
    .linktop:hover {
    text-decoration: underline;
    }
    Try that.

    also why are you accessing them by classname,

    have you tried .linktop a:xxxxx ?


    http://www.echoecho.com/csslinks.htm for more info (towards the end)
    Signature

    Your business matters only to people that matter to your business[/U][/B] - Reach them?

    {{ DiscussionBoard.errors[1996172].message }}
  • Profile picture of the author Fernando Veloso
    Thanks mate

    BUT the "active" class does not work.

    This is what I got:

    .linktop:link {
    color: #343434;
    text-decoration: none;
    margin-left: 14px;
    }
    .linktop:visited {
    color: #343434;
    text-decoration: none;
    margin-left: 14px;
    }
    .linktop:active {
    color: #336699;
    text-decoration: underline;
    margin-left: 14px;
    }
    .linktop:hover {
    color: #343434;
    text-decoration: underline;
    margin-left: 14px;
    }
    Any other idea of WHY the active class is not working?

    ??
    Signature
    People make good money selling to the rich. But the rich got rich selling to the masses.
    {{ DiscussionBoard.errors[1996688].message }}
  • Profile picture of the author Johnny Slater
    Try this:

    Code:
    .linktop A:link {
    color: #343434;
    text-decoration: none;
    margin-left: 14px;
    }
    .linktop A:visited {
    color: #343434;
    text-decoration: none;
    margin-left: 14px;
    }
    .linktop A:active {
    color: #336699;
    text-decoration: underline;
    margin-left: 14px;
    }
    .linktop A:hover {
    color: #343434;
    text-decoration: underline;
    margin-left: 14px;
    }
    Signature

    {{ DiscussionBoard.errors[1996736].message }}
  • Profile picture of the author TrueStory
    What Johnny said.

    I think it says that in the link i gave you. but you have to add: a:XXXX after the class reference.
    Signature

    Your business matters only to people that matter to your business[/U][/B] - Reach them?

    {{ DiscussionBoard.errors[1996747].message }}
  • Profile picture of the author entrepenerd
    Johnny's on the right track, but most likely it will not work for you since it seems that your <a> tag is what has the linkactive class applied.

    The "active" pseudoclass can only be applied to an "a" element. So, you may need to do it this way:

    a.linktop:active { /* your stuff here */ }

    PS: Another quick note. You do NOT have to have all 4 pseudo-classes applied for them to work. I'm not sure where that came from. It's NOT common knowledge as mentioned above. I've been doing this a long time and have NEVER declared anything but the :hover and :visited pseudoclasses. The others are pretty much useless. Which leads to the next question.

    Why are you using the :active pseudoclass to apply a bold styling to the font. Do you know that the :active pseudoclass is only going to get applied while someone is actively clicking on a link? Once clicked, they'll most likely be going to a new page where the link will no longer be active. There are certainly times that the :active pseudo is useful, but most often it's not.

    If you're trying to highlight the link that equates to the page or section that the user is currently visiting, then you'll need to do that by applying a different class to the link you want to highlight like

    <a class="current" href="blah">
    {{ DiscussionBoard.errors[1996755].message }}
    • Profile picture of the author Fernando Veloso
      Originally Posted by entrepenerd View Post

      If you're trying to highlight the link that equates to the page or section that the user is currently visiting, then you'll need to do that by applying a different class to the link you want to highlight like

      <a class="current" href="blah">
      Dumb me. :p

      Thats it and nothing more.

      Let me test it.

      EDIT:

      Works fine. Thanks guys, especially you Entrepenerd!!!

      Owe you one mate!!!

      Fernando
      Signature
      People make good money selling to the rich. But the rich got rich selling to the masses.
      {{ DiscussionBoard.errors[1996795].message }}
  • Profile picture of the author Fernando Veloso
    Thanks guys,

    Does not work so far BUT heres the html code:

    <div id="menu">
    <div id="div">

    edited....

    </div>
    </div>
    Signature
    People make good money selling to the rich. But the rich got rich selling to the masses.
    {{ DiscussionBoard.errors[1996773].message }}
  • Profile picture of the author TrueStory
    can you link to your website?
    Signature

    Your business matters only to people that matter to your business[/U][/B] - Reach them?

    {{ DiscussionBoard.errors[1996785].message }}

Trending Topics