31 users online (1 members and 30 guests)  


  Results 1 to 2 of 2

Related

  1. css active link problem    Forum: CSS Forum
    Replies: 9
  2. Javascript active link problem    Forum: Javascript Forum
    Replies: 0
  3. Replies: 1
  4. right click 4 link    Forum: HTML Forum
    Replies: 3
  1. #1
    bhagat's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2010
    Posts
    2

    Question CSS Active link is not getting highlighted on click.

    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>

  2. #2
    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 is not getting highlighted on click.

    Hi there bhagat,

    and a warm welcome to these forums.

    The active pseudo class only displays on mouse down.

    If you click the link the active color will only be seen momentarily but if you hold
    the mouse down and move away from the link it will retain the active color.

    Your coding method is unduly messy.

    Your #navlist is a list not a div so it should be coded similarly to this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #navlist {
        width:900px;
        padding:0;
        margin:0 auto;
        list-style-type:none;
     }
    #navlist li {
        float:left;
        width:145px;
        margin-right:5px;
     }
    #navlist a {
        display:block;
        width:100%;
        line-height:24px;
        border-bottom:1px dotted #808080;
        font-family:'arial narrow',sans-serif;
        color:#00f;
        text-align:center;
        text-decoration:none;
     }
    #navlist a:visited {
        color:#800080;
     }
    #navlist a:hover {
        color:#f00;
     }
    #navlist a:active {
        color:#0f0;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="navlist">
     <li><a href="AttendanceHome.aspx">Attendance Home</a></li>
     <li><a href="Attendence.aspx">Attendance Muster</a></li>
     <li><a href="Onduty.aspx">On Duty Request</a></li> 
     <li><a href="OnDutyApprove.aspx">On duty approval</a></li> 
     <li><a href="ManualPunch_Apply.aspx">Apply manual entry</a></li>
     <li><a href="ManualPunch_View.aspx">Approve manual entry</a></li>
    </ul> 
    
    </body>
    </html>
    



Tags for this Thread