a:active not what you think it is.

Discussion in 'Web Design and Development' started by Dal123, Sep 5, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    After trying for a few hours on my a:active, couldn't manage to get working (or so I thought). Google search showed about 20 results of people with my exact incorrect prediction of what active means.
    It's only when it is being clicked (pretty pointless cos this is only about 0.1 seconds :p).
    So, what is the way to show what current page is being viewed, by this I mean the link/ anchor (or links/ anchors) to page you're currently viewing so the user knows exactly what they've viewed. Some sill people on google search suggested visited; but we know that's no solution as just shows what they've already viewed.
    www.greentech-solutions.co.uk shows a black arrow, so you know what you're viewing. All I want is a different colour of text. I think this site achieves it via php or something like that.
    I don't know php and really want to try to get my site done by this weekend, are there simple css that can create this for me?
    Any input appreciated.
     
  2. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #2
    I'm assuming that you are already using CSS to style your site so you need to assign an id to the link in your menu system, call it "current" and assign a style to it that's different to the others in the menu. The downside is that you'll have to do this individually to each page, as you say PHP or similar is required to do it automatically, so you won't be able to simply copy and paste it to new pages.

    A lot of people use a list for their top of page menu bars and give it a style of inline so that it doesn't wrap, I'll assume that's what you have.

    <ul id="menu">
    <li>Home</li>
    <li>Family</li>
    <li id="current">Pets</li>
    <li> ...</li>
    </ul>

    Then the CSS can be
    #menu li {color: #999;}
    #menu li#current{color: #333;}

    Or whatever your colour scheme happens to be.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    CSS alone can't tell what link applies to the current page you're on. The a:visited is the closest you can find. You have to use some extra scripting to identify which links apply to your current page. PHP is often the tool of choice. Here's a partial example of the kind of thing I do. Using PHP might be to much for you at the moment though, but gives you at least a glimpse into the type of stuff that can be done.

    PHP:
    <?php
    // Top of PHP page
    $page_id 'home';
    //....
    ?>
    <style type="text/css">
    ...
    #nav a {
     color: #000; background: #fff;
    }
    #nav .current a {
     color: #000; background: #ff0;
     cursor: default;
    }
    ...
    </style>
    </head>
    <body>
    ...
    <ul id="nav">
      <li class="<?php echo ($page_id == 'home') ? 'current' ''?>"><a href="/">Home</a></li>
      <li class="<?php echo ($page_id == 'links') ? 'current' ''?>"><a href="/">Links</a></li>
    </ul>
     
  4. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #4
    Going slightly off-topic as far as the OP is concerned but I'd do the PHP like this (I accept that there's no one "right" way) and include it via the include or require mechanism.

    PHP:
    <?php 
    $pos 
    false;
    $location $_SERVER['SCRIPT_NAME'];
    ?>
    <ul id="navlist">
    <li><a href='../index.php'> Home </a></li>
    <li><a href='../family/index.php' 
    <?php
    $pos 
    strpos($location'family');
    if(
    $pos != false)
    {
      echo 
    "id='current'";
    }
    ?>
    > Family </a></li>
    <li><a href='../pets/index.php'
    <?php
    $pos 
    strpos($location'pets');
    if(
    $pos != false)
    {
      echo 
    "id='current'";
    }
    ?>
    >Pets</a></li>
    </ul>
    ?>
    This will let you move pages around the site if you need to reorganise without having to do anything to the code or page itself.

    Agree that it will be a bit much for the OP to learn PHP in a day or so though:D
     
  5. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #5
    :D Agreed, nice to see how it's done though, hopefully soon I'll be learning about PHP. Just wish I had more time :p. This is so interesting, really don't want to work in the construction game any more :).
    I'm guessing OP is an abbreviation of 'Overall Project' :eek:. Thank you very much for your input anglewatt, Dunmail :).
    Much appreciated :D.
     
  6. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    OP = Original (or Opening) Poster, aka the thread starter. Common Acronyms.

    Edit: Ah, it was you Eraserhead who caused my edit conflict on that guide :)
     
  8. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #8
    I think so. I can't believe OP was missing from that page.
     

Share This Page