A: active link

Discussion in 'HTML' started by Florida Flamingo, Jun 22, 2006.

  1. What exactly does using A:active do vs the others:

    : link
    : hover
    : visited

    I have a global menu bar at the top of each page. I am looking for the
    ability to change the color of the link in the global tool bar to a
    different color if I am actual viewing that page.

    EX: Global tool page included a link to the news page. It is colored black
    like all the othe links listed in the global tool page. Once you have
    navigated to the news page, the link for that page has now changed to red in
    the global tool bar. I thought that was what A: active link is used for but
    I think I am wrong.

    Any help is appreciated.
    - Genie
    Florida Flamingo, Jun 22, 2006
    #1
    1. Advertising

  2. Florida Flamingo

    Jim Higson Guest

    Florida Flamingo wrote:

    > What exactly does using A:active do vs the others:
    >
    > : link
    > : hover
    > : visited


    Not sure exactly what the specs say, but in practice, it's the style applied
    if you tab over the link. In some browsers it is also shown momentarily as
    the link is clicked, and might still be applied when the back button is
    pressed.

    > I have a global menu bar at the top of each page. I am looking for the
    > ability to change the color of the link in the global tool bar to a
    > different color if I am actual viewing that page.


    I don't think this can be done in CSS. A scripting language like CSS is a
    good way to do it though.

    --
    Jim
    Jim Higson, Jun 22, 2006
    #2
    1. Advertising

  3. Ok, so what you are saying is that "active" is the same thing as "hover".
    Both have a rollover effect per~se. I guess I can eliminated one of them
    from the CSS file.

    Too bad about the other - it would have saved me a lot of work on menu's.

    Thanks for you comments.

    "Jim Higson" <> wrote in message
    news:D...
    > Florida Flamingo wrote:
    >
    >> What exactly does using A:active do vs the others:
    >>
    >> : link
    >> : hover
    >> : visited

    >
    > Not sure exactly what the specs say, but in practice, it's the style
    > applied
    > if you tab over the link. In some browsers it is also shown momentarily as
    > the link is clicked, and might still be applied when the back button is
    > pressed.
    >
    >> I have a global menu bar at the top of each page. I am looking for the
    >> ability to change the color of the link in the global tool bar to a
    >> different color if I am actual viewing that page.

    >
    > I don't think this can be done in CSS. A scripting language like CSS is a
    > good way to do it though.
    >
    > --
    > Jim
    Florida Flamingo, Jun 22, 2006
    #3
  4. Florida Flamingo

    Andy Dingley Guest

    Jim Higson wrote:
    > Florida Flamingo wrote:
    >
    > > What exactly does using A:active do vs the others:


    > Not sure exactly what the specs say, but in practice, it's the style applied
    > if you tab over the link.


    That's a:focus, not a:active

    a:active applies (very briefly) when you _have_ (past tense) activated
    the link, but navigation hasn't happened yet (future tense). You also
    see it when the link has been "activated elsewhere", such as after
    pressing Back, or when opening a link in a new tab. Firefox seems a
    little buggy here and a control-click into a new tab leaves the old
    link with quite a persistent :active state that takes a lot of nav
    before it gets reset.

    Spec (such as it is) is over here
    http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes


    Here's a demo fragment

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html dir="ltr" lang="en">
    <head>
    <title>CSS pseudo-class selector demostration</title>


    <style type="text/css">

    body {
    color: #000000;
    background-color: #ffffff;

    font-family: sans-serif;
    font-weight: bolder;
    }

    ul { margin: 3em }

    a {
    text-decoration: underline;
    color: #59BF47;
    }

    ..link-styles .link,
    a:link {
    color: #BF47BC;
    }

    ..link-styles .visited,
    a:visited {
    color: #475CBF;
    }
    ..link-styles .focus,
    a:focus {
    color: #47BF63;
    }
    ..link-styles .hover,
    a:hover {
    color: #FF0000;
    }
    ..link-styles .active,
    a:active {
    color: #BEBF47;
    }
    </style>


    </head>
    <body>

    <h1>Link types and the :hover pseudo class selectors</h1>

    <ul class="link-styles" style="float: left;" >
    <li class="link" >a:link</li>
    <li class="visited" >a:visited</li>
    <li class="focus" >a:focus</li>
    <li class="hover" >a:hover</li>
    <li class="active" >a:active</li>
    </ul>

    <ul >
    <li><a href="#" >A link</a></li>
    <li><a href="#foo" target="_blank" >A link (targetted)</a></li>
    <li><a href="http://www.google.com" >A link (visited)</a></li>
    <li><a href="http://example.org/404" >A link (unvisited)</a></li>
    </ul>

    <p style="clear: both;" ><a
    href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes"
    >CSS specification</a>

    <br><tt>http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes</tt></p>

    </body>
    Andy Dingley, Jun 22, 2006
    #4
  5. Florida Flamingo

    Jim Moe Guest

    Florida Flamingo wrote:
    > What exactly does using A:active do vs the others:
    >
    > : link
    > : hover
    > : visited
    >

    a:active is the state a link becomes when it is activated (clicked). The
    state is usually rather brief since it becomes a:visited when the new link
    loads.

    > I have a global menu bar at the top of each page. I am looking for the
    > ability to change the color of the link in the global tool bar to a
    > different color if I am actual viewing that page.
    >

    Using a scripting language like PHP makes this type of work much easier.
    (It could be done with Javascript but not everyone has it enabled.)
    Create a function that outputs the menu code. The function's parameter
    list tells it which menu item to not be a link, instead giving it the
    style for "this page."

    > EX: Global tool page included a link to the news page. It is colored black
    > like all the othe links listed in the global tool page. Once you have
    > navigated to the news page, the link for that page has now changed to red in
    > the global tool bar. I thought that was what A: active link is used for but
    > I think I am wrong.
    >

    The closest you can get with CSS is a:visited, but it is not unique. If
    you set it to red, all the other visited links are red as well.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Jun 22, 2006
    #5
  6. Florida Flamingo wrote:
    > What exactly does using A:active do vs the others:
    >
    > : link
    > : hover
    > : visited
    >
    > I have a global menu bar at the top of each page. I am looking for the
    > ability to change the color of the link in the global tool bar to a
    > different color if I am actual viewing that page.
    >
    > EX: Global tool page included a link to the news page. It is colored black
    > like all the othe links listed in the global tool page. Once you have
    > navigated to the news page, the link for that page has now changed to red in
    > the global tool bar. I thought that was what A: active link is used for but
    > I think I am wrong.
    >
    >


    active as said above is the brief moment when a link is activated. What
    you want is essentially a 'breadcrumb' routine. I would require
    scripting on your part to

    1) identify what page you are on;
    2) match it you what element in you navigation menu system
    3) style effected element accordingly.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 22, 2006
    #6
  7. Thanks for all the great answers. It looks like what I wanted to accomplish
    is vastly over my head, as I don't write scripts.

    I do appreciate finding the answer even if it wasn't as easy as I had hoped.

    The help around here is awesome.

    Thanks all.
    Florida Flamingo, Jun 22, 2006
    #7
  8. Florida Flamingo

    Jim Higson Guest

    Florida Flamingo wrote:

    > Thanks for all the great answers. It looks like what I wanted to
    > accomplish is vastly over my head, as I don't write scripts.


    Is is actually really easy in PHP because it can be put in the middle of
    your HTML. You only need something like:

    <div id="links">
    <? if( $current_page == 'home' ): ?>
    <span>HOME</span>
    <? else ?>
    <a href="http://www.example.com">HOME</a>
    <? endif ?>
    </div>


    Not too bad, huh? There's a little more to it than that, but not a great
    deal.

    --
    Jim
    Jim Higson, Jun 22, 2006
    #8
  9. Well... thank you. I will fool around with that and see what I can come up
    with. Really appreciate the starter kit. :)


    "Jim Higson" <> wrote in message
    news:...
    > Florida Flamingo wrote:
    >
    >> Thanks for all the great answers. It looks like what I wanted to
    >> accomplish is vastly over my head, as I don't write scripts.

    >
    > Is is actually really easy in PHP because it can be put in the middle of
    > your HTML. You only need something like:
    >
    > <div id="links">
    > <? if( $current_page == 'home' ): ?>
    > <span>HOME</span>
    > <? else ?>
    > <a href="http://www.example.com">HOME</a>
    > <? endif ?>
    > </div>
    >
    >
    > Not too bad, huh? There's a little more to it than that, but not a great
    > deal.
    >
    > --
    > Jim
    Florida Flamingo, Jun 23, 2006
    #9
  10. Florida Flamingo

    Kevin Scholl Guest

    Jim Moe wrote:

    >> I have a global menu bar at the top of each page. I am looking for the
    >> ability to change the color of the link in the global tool bar to a
    >> different color if I am actual viewing that page.
    >>

    > Using a scripting language like PHP makes this type of work much easier.
    > (It could be done with Javascript but not everyone has it enabled.)
    > Create a function that outputs the menu code. The function's parameter
    > list tells it which menu item to not be a link, instead giving it the
    > style for "this page."


    PHP is indeed one solution, but for those that may not have programming
    knowledge or the server to support it... (see below)

    >> EX: Global tool page included a link to the news page. It is colored black
    >> like all the othe links listed in the global tool page. Once you have
    >> navigated to the news page, the link for that page has now changed to red in
    >> the global tool bar. I thought that was what A: active link is used for but
    >> I think I am wrong.
    >>

    > The closest you can get with CSS is a:visited, but it is not unique. If
    > you set it to red, all the other visited links are red as well.


    It actually can be done quite easily with only CSS. There are several
    tutorials for it online; here's a pretty straight forward one:

    http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css

    I've seen several sites that use this method, and have done several
    myself with it, e.g., http://www.weathergrid.com/ .

    --

    *** Remove the DELETE from my address to reply ***

    ======================================================
    Kevin Scholl http://www.ksscholl.com/

    ------------------------------------------------------
    Information Architecture, Web Design and Development
    ------------------------------------------------------
    We are the music makers, and we are the dreamers of
    the dreams...
    ======================================================
    Kevin Scholl, Jun 23, 2006
    #10
  11. Florida Flamingo

    Jim Moe Guest

    Kevin Scholl wrote:
    >
    >>> EX: Global tool page included a link to the news page. It is colored black
    >>> like all the othe links listed in the global tool page. Once you have
    >>> navigated to the news page, the link for that page has now changed to red in
    >>> the global tool bar. I thought that was what A: active link is used for but
    >>> I think I am wrong.
    >>>

    >> The closest you can get with CSS is a:visited, but it is not unique. If
    >> you set it to red, all the other visited links are red as well.

    >
    > It actually can be done quite easily with only CSS. There are several
    > tutorials for it online; here's a pretty straight forward one:
    >
    > http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
    >

    Well, I was not considering having to do it all manually.
    The method described above does not scale well; it needs a unique ID for
    every page and menu item, a lot of cruft builds up in the CSS files. Using
    SSIs does not scale easily either since a unique file is needed for each
    page's menu.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Jun 23, 2006
    #11
  12. Jim Moe wrote:
    > Kevin Scholl wrote:
    >>>> EX: Global tool page included a link to the news page. It is colored black
    >>>> like all the othe links listed in the global tool page. Once you have
    >>>> navigated to the news page, the link for that page has now changed to red in
    >>>> the global tool bar. I thought that was what A: active link is used for but
    >>>> I think I am wrong.
    >>>>
    >>> The closest you can get with CSS is a:visited, but it is not unique. If
    >>> you set it to red, all the other visited links are red as well.

    >> It actually can be done quite easily with only CSS. There are several
    >> tutorials for it online; here's a pretty straight forward one:
    >>
    >> http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
    >>

    > Well, I was not considering having to do it all manually.
    > The method described above does not scale well; it needs a unique ID for
    > every page and menu item, a lot of cruft builds up in the CSS files. Using
    > SSIs does not scale easily either since a unique file is needed for each
    > page's menu.
    >


    My solution was to build a menu class in PHP. The class contains,
    organizes and generates my menu and site map. The hierarchal structure
    is stored in the object as such. It generated the IDs for both and uses
    a scheme that encodes the page's location within the tree in the IDs.
    'mm######', each number pair is a level's id so each level can have a
    max of 99 pages. Therefore a page link with an id of 'mm020100' means it
    is the first child of parent of menu 'mm0001' that is the 2nd child of
    'mm02' that is the third child of the root 'mm'. The id is also the key
    in an array of references to each 'leaf' akin to MS's 'all' in their DOM
    for quick lookups.

    Works for me. I can build my breadcrumb trail links and flag each parent
    of a menu with an 'active' class when the menu is created...HTH

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 23, 2006
    #12
  13. Florida Flamingo

    Jim Higson Guest

    Jonathan N. Little wrote:

    > Jim Moe wrote:
    >> Kevin Scholl wrote:
    >>>>> EX: Global tool page included a link to the news page. It is colored
    >>>>> black
    >>>>> like all the othe links listed in the global tool page. Once you have
    >>>>> navigated to the news page, the link for that page has now changed to
    >>>>> red in
    >>>>> the global tool bar. I thought that was what A: active link is used
    >>>>> for but I think I am wrong.
    >>>>>
    >>>> The closest you can get with CSS is a:visited, but it is not unique.
    >>>> If
    >>>> you set it to red, all the other visited links are red as well.
    >>> It actually can be done quite easily with only CSS. There are several
    >>> tutorials for it online; here's a pretty straight forward one:
    >>>
    >>> http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
    >>>

    >> Well, I was not considering having to do it all manually.
    >> The method described above does not scale well; it needs a unique ID
    >> for
    >> every page and menu item, a lot of cruft builds up in the CSS files.
    >> Using SSIs does not scale easily either since a unique file is needed for
    >> each page's menu.
    >>

    >
    > My solution was to build a menu class in PHP. The class contains,
    > organizes and generates my menu and site map. The hierarchal structure
    > is stored in the object as such. It generated the IDs for both and uses
    > a scheme that encodes the page's location within the tree in the IDs.
    > 'mm######', each number pair is a level's id so each level can have a
    > max of 99 pages. Therefore a page link with an id of 'mm020100' means it
    > is the first child of parent of menu 'mm0001' that is the 2nd child of
    > 'mm02' that is the third child of the root 'mm'. The id is also the key
    > in an array of references to each 'leaf' akin to MS's 'all' in their DOM
    > for quick lookups.
    >
    > Works for me. I can build my breadcrumb trail links and flag each parent
    > of a menu with an 'active' class when the menu is created...HTH
    >


    IMO, styling a link differently using CSS for the current page isn't the
    best way because there isn't really any point in a page containing links to
    itself.

    I always prefer to replace links to the current page with span elements. I
    give these the class "nonlink" or something like that so they can be styled
    in a way that suggests they would be a link if they weren't not :)

    --
    Jim
    http://surfcore.co.uk
    Jim Higson, Jun 23, 2006
    #13
  14. Jim Higson wrote:

    > IMO, styling a link differently using CSS for the current page isn't the
    > best way because there isn't really any point in a page containing links to
    > itself.
    >
    > I always prefer to replace links to the current page with span elements. I
    > give these the class "nonlink" or something like that so they can be styled
    > in a way that suggests they would be a link if they weren't not :)
    >


    Actually I do that too. The object does not insert the href on the the
    page that you are currently on. The "active" class is set on the links
    of the parent path to root if the if the page is deep in the menu...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 23, 2006
    #14
  15. Florida Flamingo

    Kevin Scholl Guest

    Jim Higson wrote:

    > IMO, styling a link differently using CSS for the current page isn't the
    > best way because there isn't really any point in a page containing links to
    > itself.


    Unless the site architecture contains multiple levels, in which case the
    nav item with the active state could act as both an indicator of what
    section the user in is AND a quick link back to the sectional index.

    > I always prefer to replace links to the current page with span elements. I
    > give these the class "nonlink" or something like that so they can be styled
    > in a way that suggests they would be a link if they weren't not :)


    --

    *** Remove the DELETE from my address to reply ***

    ======================================================
    Kevin Scholl http://www.ksscholl.com/

    ------------------------------------------------------
    Information Architecture, Web Design and Development
    ------------------------------------------------------
    We are the music makers, and we are the dreamers of
    the dreams...
    ======================================================
    Kevin Scholl, Jun 23, 2006
    #15
  16. Florida Flamingo

    Kevin Scholl Guest

    Jim Moe wrote:
    > Kevin Scholl wrote:
    >>>> EX: Global tool page included a link to the news page. It is colored black
    >>>> like all the othe links listed in the global tool page. Once you have
    >>>> navigated to the news page, the link for that page has now changed to red in
    >>>> the global tool bar. I thought that was what A: active link is used for but
    >>>> I think I am wrong.
    >>>>
    >>> The closest you can get with CSS is a:visited, but it is not unique. If
    >>> you set it to red, all the other visited links are red as well.

    >> It actually can be done quite easily with only CSS. There are several
    >> tutorials for it online; here's a pretty straight forward one:
    >>
    >> http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
    >>

    > Well, I was not considering having to do it all manually.


    Doesn't really involve any more manual coding per page that the PHP
    solution presented on ALA. The only unique aspect is the body class
    declaration.

    > The method described above does not scale well; it needs a unique ID for
    > every page and menu item, a lot of cruft builds up in the CSS files. Using


    True, which is why I specified (in a part of my message that was
    snipped) that this is a POSSIBLE solution for someone who doesn't have
    the programming knowledge or the server capabilities to support it.

    > SSIs does not scale easily either since a unique file is needed for each
    > page's menu.


    --

    *** Remove the DELETE from my address to reply ***

    ======================================================
    Kevin Scholl http://www.ksscholl.com/

    ------------------------------------------------------
    Information Architecture, Web Design and Development
    ------------------------------------------------------
    We are the music makers, and we are the dreamers of
    the dreams...
    ======================================================
    Kevin Scholl, Jun 23, 2006
    #16
  17. Florida Flamingo

    Mark Parnell Guest

    Deciding to do something for the good of humanity, Jim Higson
    <> declared in alt.html:
    > Florida Flamingo wrote:
    >
    >> I am looking for the
    >> ability to change the color of the link in the global tool bar to a
    >> different color if I am actual viewing that page.

    >
    > I don't think this can be done in CSS.


    If you just want to change the colour it can, e.g. by setting a class or
    id on the body tag. To make it so it is just plain text - not a link -
    is certainly well beyond the capabilities of CSS.

    > A scripting language like CSS is a
    > good way to do it though.


    Um, something like PHP or ASP perhaps? ;-)

    --
    Mark Parnell
    My Usenet is improved; yours could be too:
    http://blinkynet.net/comp/uip5.html
    Mark Parnell, Jun 26, 2006
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DaveF

    check if link is active?

    DaveF, May 6, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    1,037
    Peter Rilling
    May 6, 2004
  2. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    795
    Kevin Spencer
    May 17, 2005
  3. Fran Cotton

    Active link problem driving me nuts!

    Fran Cotton, Jul 11, 2003, in forum: HTML
    Replies:
    2
    Views:
    401
    Fran Cotton
    Jul 11, 2003
  4. crispy
    Replies:
    11
    Views:
    12,487
    crispy
    Dec 13, 2003
  5. carlos seramos
    Replies:
    2
    Views:
    462
    carlos seramos
    Aug 1, 2003
Loading...

Share This Page