Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    signify active link when page is shown

    Hey Guys,

    Having some minor problems.
    I have a menu (my second link style) and currently when they click the link it goes to the page it is highlighted, but when you go somewhere else, it stays highlighted. I would like it to go back to normal.. so that only one page is 'underlined' at a time.. does that make sense?

    a.menu:link {
    font-family: Verdana,sans-serif;
    color: #006699;
    font-size: 11px;
    text-decoration: underline;
    }
    a.menu:active {
    font-family: Verdana,sans-serif;
    color: #006699;
    font-size: 11px;
    text-decoration: underline;
    }

    a.menu:hover {
    font-family: Verdana,sans-serif;
    color: #006699;
    font-size: 11px;
    text-decoration: underline;
    }

    a.menu:visited {
    font-family: Verdana,sans-serif;
    color: #006699;
    font-size: 11px;
    }
    I can't quite figure out whats wrong.. IDEAS?

    THANKS!

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Didn't quite understand what you meant but shouldn't you take out the 'text-decoration: underline' for the active part? (Change to 'text-decoration: none')

    You can also make that code alot shorter...

    a.menu {
    font-family: Verdana, sans-serif;
    color: #069;
    font-size: 11px;
    text-decoration: underline;
    }

    a.menu:active {
    text-decoration: none;
    }
    Last edited by mark87; 08-24-2005 at 12:20 AM.

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I'm not quite sure what you mean but I do know this... it matters what order the pseudo-classes are in:

    a:link
    a:visited
    a:hover
    a:active

    Some people use the mnemonic "a LoVe HAte relationship" but I swear I always remember it with "Lewd, Vicious, Hamster Attacks." Go figure.

  • #4
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    On the topic of hamsters....
    Go for the eyes Boo!

    And just to be curious, could we see your code for the menu?

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Still having problems..

    Hey Guys,

    Thanks for your super quick replies.

    The order the pseudo-classes were somewhat to blame (THX mark87) but Im still having some problems. I didn't explain it very well before.

    Here is the page: (STILL IN TEST MODE!)
    http://www.vivraterra.com/screenshots.html

    The two problems are:
    1#: the 'active' state when they click the link (ie, contact us or about vivraterra) is not staying underlined once clicked and the new page loads. I would like the underline to stay on until anoher link is clicked.

    #2: In Safari, Firefox the top menu aligns left perfectly. In IE 5 & 6 it has like a 10px space to the left that I can't figure out how it got there. (This is for the main blue menu at the top).

    Any help would be great.
    (Yes, I know CSS is the way of the future, but I haven't quite gransped it yet.. but I promise, Im working on it) So, please ignore my tabled layout for now.

    THANKS!
    Tamarab

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Hi,

    What you need to do is to tell the active link that it is active. So if your Home Page is active then, on the Home Page assign a class of perhaps, active, to its link and assign that class some values. do the same for all the other links on their respective pages.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Here's something I posted elsewhere…
    Quote Originally Posted by Me (Elsewhere)


    The method I prefer uses css and relies on adding custom id or class attributes to the body element (tag) and each of the menu items.
    This can potentially be done with some degree of automation (using PHP) on a larger site (by tapping into the directory or file name), but can easily be done manually on smaller sites.

    By adding a custom id or class to a page's body element, you can then create custom css selectors to specify how a certain link should appear when viewed on certain pages.

    e.g.

    css
    Code:
    a {
    background: red;
    }
    
    body#home a#m-home,
    body#info a#m-info {
    background: yellow;
    }
    
    …

    home page
    Code:
    …
    
    <body id="home">
    
    …
    
    <li><a href="/" id="m-home">Home</a></li>
    <li><a href="info.html" id="m-info">Info</a></li>
    
    …

    info page
    Code:
    …
    
    <body id="info">
    
    …
    
    <li><a href="/" id="m-home">Home</a></li>
    <li><a href="info.html" id="m-info">Info</a></li>
    
    …

    This enables you to repeat the same menu markup on every page (server-side include?) and use the external css to group and manipulate how links appear when on that page.
    HTH
    Last edited by Bill Posters; 08-29-2005 at 11:15 AM.

  • #8
    New Coder
    Join Date
    Jul 2005
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OOOH thanks!

    This really helps - I will try it out.

    THANKS SO MUCH!
    Tamarab


  •  

    Posting Permissions

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