Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Apr 2005
    Posts
    23
    Member #
    9543
    Hi, this forum has helped me a lot in the last few days I felt like I ran into almost any browser compatibility prob..

    I finally got my css/htmal menu to function the way I planned on hover. Next step would be to put the menu in all the subpages and that left me wondering how to make the buttons change into a selected state. Lets say you press Link1 and then once you are on the Link1 page the Link changes the backgroundcolor or something. I tried to hard code it into the html tg tag but apparently the css overwrites it? I am not sure though...

    Could someone point me in the right direction? thanks!

    www.designfrollein.com/test
    www.designfrollein.com/test/menutest.css

  2.  

  3. #2
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    div.menu a:hover, div.menu .current {
    border-top: 3px solid #d4d2b4;
    border-bottom: 3px solid #d4d2b4;
    color: #055c23;
    background: #FFFFFF;
    }

    <a class="current" href="menusub2.htm" onfocus="this.blur()"> Link 2</a>

    Something like that might work for you. Just apply a class alike to the a:hover state on the link you want to be different from the others.

  4. #3
    Junior Member
    Join Date
    Apr 2005
    Posts
    23
    Member #
    9543
    sweet,
    I implemented the changes and uploaded them under the same url. it works well with your settings but I want a slightly different effect, one where the background changes for the current state.
    What seems irrational to me is that it now changes the bgcolor on hover and the current state is the two lines despite the fact that I changed the bgcolor for both cases. Could it be that it is overwritten by the other settings? How exactly do I need to stack my script, in what order?

    Code:
    div.menu a {
    color: #333333; 
    background: #ffffff; 
    text-decoration:none; 
    font-size:11px; 
    line-height:16px; 
    padding-left: 35px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: Tahoma, verdana, sans-serif; 
    }
    
    div.menu a:link {
          color: #055c23; 
          background: #FFFFFF;
    	  }
    div.menu a:active { 
          color: #ff0000;
          background: #d4d2b4; }
    	  
    	  
    div.menu a:visited {
          color: #333333; 
          background: #FFFFFF; }
    
    div.menu a:hover, div.menu .current {
    border-top: 3px solid #d4d2b4;
    border-bottom: 3px solid #d4d2b4;
    color: #055c23;
    background: #000000; 
    }

  5. #4
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    [edit] The background on the a:link property should be removed. That's what's causing the problem I believe.

    What's the difference between a and a:link anyway? And what's a:active? When I make div menus I only use 3 properties: a, a:hover, and a:visited.

  6. #5
    Member
    Join Date
    Jan 2005
    Posts
    97
    Member #
    8727
    a:link is a normal state link. a:active is when you've just clicked the link, but it hasn't fully loaded. a:visited is you've been to it before.

  7. #6
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    So, a:link is basically redundant when you already have a, then?

  8. #7
    Member
    Join Date
    Jan 2005
    Posts
    97
    Member #
    8727
    Probably, yes, but maybe you'll want something that'll use both. It's like the C++ thingy, GOTO.

  9. #8
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    Oh yes, I forgot that you can use it as a selector kind of thing.

  10. #9
    Junior Member
    Join Date
    Apr 2005
    Posts
    23
    Member #
    9543
    I fixed it, it was the background on the a:visited that caused the problem. Once a button was pressed, the stylesheet applied both styles to the button .current and visited at once or something to the effect.

    Thanks anyway for your help and for clarifying the a:active for me, I didn'T know what I was doing with it, really.


Remove Ads

Posting Permissions

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

Search tags for this page

css menu selected state
,

selected state on rollovers

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com