56 users online (1 members and 55 guests)  

View Poll Results: Difficulty applying css active links

Voters
5. You may not vote on this poll
  • Sucks

    1 20.00%
  • Difficult

    2 40.00%
  • Not so bad

    0 0%
  • Easy

    0 0%
  • Do it in my sleep

    2 40.00%

  Results 1 to 10 of 10

Related

  1. Replies: 1
  2. Javascript active link problem    Forum: Javascript Forum
    Replies: 0
  3. Active Links    Forum: HTML Forum
    Replies: 11
  4. Replies: 1
  1. #1
    grkgeorgy's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    4

    Question css active link problem

    Hey everyone, I got a problem with the a:active style.

    Here's the problem

    I have the a:link a:visited and a:hover working properly. Yet the a:active appears when it is clicked, but doesn't remain active. Instead it goes back to the visited property. Maybe I'm not applying it correctly, I applied it as a class to the <a> tag and <td> tag and also named the table id and changed everything with #navbar. NO CIGAR! Take a look at the code

    .navbar a:link{
    border: 1px solid #FFFFFF;
    background-color: #003449;
    }
    .navbar a:visited{
    border: 1px solid #FFFFFF;
    background-color: #003449;
    }
    .navbar a:hover{
    background-color: #006287;
    }
    .navbar a:active{
    background-color: #999933;
    }


    From my understanding, and every other website I researched, this is the correct order according to the LOVE/HATE mnemonic jogger. Tell you the truth if this worked I would have loved it, but it's a pain in the ass so now I'm hating it!!!!!! I need some help, anyone....
    Last edited by grkgeorgy; 07-30-2004 at 02:44 PM.

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hi there,

    an 'active' link is one you have literally just clicked. Of course, this takes you to the page it linked to. When you return to your original page (using 'Back' or via a link) then the page is classified as 'visited'. Active only applies when you have just clicked the link, so you only see it for a very short sliver of time.

    is this whats happening?

  3. #3
    grkgeorgy's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    4

    Cool css active link problem

    Yup that's what's happening. But I believe it was supposed to stay active longer then a short sliver of time. How could I apply it to stay active so it becomes a user friendly navigation, a YOU ARE HERE navigation.

    ie.. If I click on the link CONTACTS then it should have a green background and the rest a blue, and then when i click on HOME, that will be green and the rest blue and so forth. I thought the active style was the process for doing this.


    Is there another way?????? Thanks for the response btw

  4. #4
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hi,

    No, thats not an active link is, but it would make sense!

    Easiest way to make this happen is to amend your links on the CONTACTS page so that it is the colour you wish it to be.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  5. #5
    grkgeorgy's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    4

    Exclamation css active link problem

    Ammend the links??? Ok well I have a template that I'm working off of. I have 4 links on this page, and the css style sheet applied to all 4. How exactly are you proposing I ammend these links??????????


    Check out this page

    http://dreamlettes.net/tutorials/activelinks/

    If you click Home | Products | Services

    You'll see the color change and stay active for that specific page. Yet it's not making any sense in the code how this would work.

  6. #6
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    At first glance, it does not make sense.. It all relies on the class of the <body> tag. Explained:http://dreamlettes.net/tutorials/activelinks/default.htm

    Its quite a clever way of doing it.

    The manual way would be to make the CONTACT link in the CONTACT page a different color with

    Code:
    <a href="bleh.html" style="color: blue;">CONTACT</a>
    The tutorial's way is a lot more elegant way to do it.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  7. #7
    grkgeorgy's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    4

    Thumbs up css active link problem solved!

    Well, right now I'm good to go. I thought about the ammending part, and that's what I did. I put it into each individual page. Yet I will convert it to the tutorial style from dreamlette this way it will be modified only in one place.

    Thanks.

  8. #8
    bhagat's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2010
    Posts
    2

    Question Re: css active link problem

    Hey i am also facing the same problem. i have three different forms having common master page. On master page i have 4 link menu. each link ref to different page.
    what is happening here : when i click on first link it should be highlighted with some different colour and same for other link also. for that i am using CSS
    where i have declared

    div#navlist a:link {
    COLOR: #0000FF;
    }
    div#navlist a:visited {
    COLOR: #800080;
    }
    div#navlist a:hover {
    COLOR: #FF0000;
    }
    div#navlist a:active {
    COLOR: #00FF00;
    }


    everything is working fine except active colour of selected link.I don't know where i went wrong.I am conffused. please help me out.


    HTML code

    <div id="navlist">
    <div id="left">
    <p style="vertical-align: top; text-align: center">
    <a class="links" href="AttendanceHome.aspx" style="width: 148px; border-bottom: gray thin dotted; text-align: left"><span style="font-family: Arial Narrow"> &nbsp; Atendance Home</span></a><span style="color: #cc0000"></span><a class="links" href="Attendence.aspx" style="width: 148px; border-bottom: gray thin dotted; text-align: left"><span style="font-family: Arial Narrow">&nbsp; Attendance Muster</span></a><span style="color: #cc0000"></span><a class="links" href="Onduty.aspx" style="width: 148px; border-bottom: gray thin dotted;
    text-align: left"> <span style="font-family: Arial Narrow">&nbsp; On Duty Request</span></a> <a class="links" href="OnDutyApprove.aspx" style="width: 148px; border-bottom: gray thin dotted; text-align: left"><span style="font-family: Arial Narrow">&nbsp; On duty approval</span></a> <a class="links" href="ManualPunch_Apply.aspx" style="width: 148px; border-bottom: gray thin dotted; text-align: left"><span style="font-family: Arial Narrow">&nbsp; Apply manual entry</a><a class="links" href="ManualPunch_View.aspx" style="width: 148px; border-bottom: gray thin dotted;
    text-align: left"><span style="font-family: Arial Narrow">&nbsp; Approve manual entry</span></a> <span style="color: #cc0000">&nbsp;</span><span style="color: #cc0000"> </span><span style="color: #cc0000"></span></p></div> </div>

  9. #9
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: css active link problem

    hi there Bhagat,

    your question has been answered here...

  10. #10
    fucuco's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2014
    Posts
    11

    Re: css active link problem

    too simple