SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how do i get a:active 2 work??

    hi all have my links running fine but even tho iv added a:active it never seems to show in any browser iv tryed.. what is the problem?? thanks!

    code:
    Code:
    #L1 a:link, #L1 a:visited {border-left: 4px solid #999;text-decoration: none;color: #000;text-indent: 4px;}
    #L1 a:hover, #L1 a:active {background: #CCC;text-indent: 8px;}

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any 1? cheers!

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And the html you are trying to influence with this...?

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <div class="l">
    <div id="L1">
      <p><a href="secure_email.php">Secure Email</a></p>
      <p><a href="enterprise_pki.php">Enterprise PKI</a></p>
      <p><a href="exchange_upgrades.php">Exchange Upgrades</a></p>
      <p><a href="clients.php">Our Clients</a></p>
      <p><a href="gfi_products.php">GFi Products</a></p>
      <p><a href="mail_services.php">Mail Services</a></p>
      <p><a href="directory_upgrades.php">Directory Upgrades</a></p>
    </div>
    </div>

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure why you aren't using an unordered list for this? It would seem custom made for what you are trying to do.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ive been messing with floats and got the <p> to work in my #L1 id ive used the <ul> before just feel like a change.. anyway do u no how to achive the a: active

    thanks

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't see that any of your links ARE active..

    If, for example you are on the page:
    <p><a href="gfi_products.php">GFi Products</a></p>

    And you want that particular link to be styled with your a:active style to show that that is where the viewer is, I'm guessing you need to change the line to read:

    <p><a href="gfi_products.php" class="active">GFi Products</a></p>

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    :active applies when the element is being activated, i.e., during the time that you click on the link.

    IE has a bug (#54131) that makes :active act like it were :focus.

    If it doesn't change color when clicked then perhaps you have other rules in your stylesheet with higher specificity?
    Simon Pieters

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is the only code i have for my #L1 div, u must of seen this on loads ov pages when u click a link and get taken to the page, the link u just clicked stays highlightd, yes so u no where u r

    thanks

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    a:active it never seems to show in any browser iv tryed.. what is the problem?? thanks
    As Zcorpan has already said a:active only happens when you click down on the link and the link is engaged.

    In this code here you are giving the a:active the same styles as a:hover therefore you will never see anythin ghappen because the hovered state will be activated first and then there is no change when you click because you have styled a:active the same
    Code:
    #L1 a:hover, #L1 a:active {background: #CCC;text-indent: 8px;}
    If you had given a:active a different colour you would see the change occur when you clicked (not in IE though for the bug mentioned in zcorpans post). However the active state will disappear when the new page loads because it is only valid for the instant that you click on it.

    If you mean you wanted a link to indicate the current page then you would need to hard code it with a class as mentioned in one of the other posts above already.

    Also note tha text-indent only applies to block-level elements, table cells and inline blocks and not inline elements. Therefore you will get no text-indent in good browsers (ie again does its own thing here and applies the text indent.)

    You need to set the anchor to display:block to get the text-indent to be applied.
    Code:
    #L1 a{display:block}
    Hope that helps

  11. #11
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not :active. You have to modify the markup to support that:
    HTML Code:
    <ul class="nav">
     <li><a href="secure_email.php">Secure Email</a></li>
     <li><a href="enterprise_pki.php">Enterprise PKI</a></li>
     <li><a href="exchange_upgrades.php">Exchange Upgrades</a></li>
     <li><span>Our Clients</span></li> <!-- this is the current page -->
     <li><a href="gfi_products.php">GFi Products</a></li>
     <li><a href="mail_services.php">Mail Services</a></li>
     <li><a href="directory_upgrades.php">Directory Upgrades</a></li>
    </ul>
    Code:
    .nav span { ... }
    Simon Pieters

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks all!!

    yes paul i already have display: block with my links, cheers.. and thanks Zcorpan i tryed that a while back and works fine just thought the active might of done the same job, a little less work..

    ok so i have <p> to all my links, i see Zcorpan has used <ul><li> ive used that alot b4 is there any limitaions by using <p> instead ov <ul> the way i have these setup? cheers again every1!!

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    is there any limitaions by using <p> instead ov <ul>
    P is a paragraph and li is a list. See if you can work out which one best describes the content of that list of links

    The tags you use should be the correct semantic tags for the content in hand. CSS doesn't care what you use as it can style it exactly how you want anyway (in most cases).

  14. #14
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "See if you can work out which one best describes the content of that list of links"

    lol funny!! thanks Paul

    so what ur saying is as long as i apply the right css to what ever tag it will work just that there are standards when we would use 1 tag over another?

    thanks again

  15. #15
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is great article on using lists for menus at:

    A list apart

    Hopefully this will make it clear that a menu is best treated as a list!

  16. #16
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks great little article, cheers every1!!!


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
  •