SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css a:active not shown in the page when the link is selected

    hI, I tried to formatted the button in my page.

    However, when a button is clicked, the effect "a:active" is not showing in the page...

    is my code right? or is there any other solution???

    thank you!

    Code:
    .btn li a{
    padding: 3px 0.5em;
    text-decoration: none;
    color: black;
    background-color: #FFF2BF;
    border: 2px solid #FFF2BF;
    }
    
    .btn li a:hover{
    color: black;
    background-color: #FFE271;
    border-style: outset;
    
    .btn li a:active{
    color: black;
    background-color: #FFFFF;
    border-style: outset;
    
    }

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hello,

    You've got to be quick to see the :active styles
    I've added :focus if someone is navigating without the mouse.
    Code:
    .btn li a{
      padding: 3px 0.5em;
      text-decoration: none;
      color: black;
      background: #FFF2BF;
      border: 2px solid #FFF2BF;
    }
    .btn li a:hover, .btn li a:focus {
      background: #FFE271;
      border-style: outset;
    .btn li a:active{
      background: #FFFFFF;
      border-style: outset;
    }
    Oh.. you were missing an F I just love errors like that - The CSS validator would have picked that one up.
    You need to have 3 or 6 numbers in a hexadecimal number.
    You can use 3 when the numbers are grouped in bunches of two.
    #023 == #002233
    #551 == #555511
    #FFF == #FFFFFF

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you misunderstand what the :active pseudo-class means. A link or button is 'active' during the mouse click, i.e., from when you depress the mouse button until you release it again.

    It does not mean 'the current page'.

    Indicating the current page is easiest to do by assigning IDs to the links and to the BODY element, then using CSS to style the combinations of BODY ID and link ID:

    Code:
    #nav a {
      ...rules for menu links...
    }
    
    #home a#home-link,
    #news a#news-link,
    #about a#about-link, ...
    {
      ... rules for styling the 'current page' link ...
    }
    Birnam wood is come to Dunsinane

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mark
    You've got to be quick to see the :active styles
    To qualify what Mark just said the active state is only the instant that you click down with the mouse and then release. It's hardly noticeable unless you hold the mouse button down for a long time.

    A lot of people think it has something to do with a current page identifier but its nothing like that at all

    Well spotted on the missing F mark
    Edit:


    toooooo slow.......


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •