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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    problems to keep the buttons color changed once active

    hi,
    i am trying to make a website where the buttons should turn from white to blue on hover and when they are active to remain blue.
    so here is my problem:
    i did it and it works fine a s long as my hyperlink are defined as "#"
    when i give the links the addresses, the buttons turn back to white when they are active.

    here is the html, when it works :

    Code:
    <tr>
        <td height="89" colspan="2"><div align="center"><img src="images/logo.jpg" width="235" height="89"></div></td>
        <td><div id="container"><a href="#" class="btn">Picture Gallery</a></div></td>
        <td><div id="container2"><a href="#" class="btn2">Customed Cards</a></div></td>
        <td><div id="container3"><a href="#" class="btn3">Archive</a></div></td>
        <td><div id="container4"><a href="#" class="btn4">Session Details</a></div></td>
        <td><div id="container5"><a href="#" class="btn5">Contact</a></div></td>
        <td>&nbsp;</td>
      </tr>
    and the css codes:

    #container {
    height:53px;
    width:137px;
    text-align:center;
    margin:0,auto;
    }

    a.btn {
    display: block;
    background:url("../images/picture_gallery.jpg");
    height:53px;
    width:137px;
    text-indent: -9999px;
    }
    a.btn:hover, a.btn:focus {
    background:url("../images/picture_gallery_blue.jpg");
    }

    a.btn.active {
    background:url("../images/picture_gallery_blue.jpg");
    }

    #container2 {
    height:53px;
    width:150px;
    text-align:center;
    margin:0,auto;
    }
    a.btn2 {
    display: block;
    background:url("../images/customed_cards.jpg");
    height:53px;
    width:150px;
    text-indent: -9999px;
    }
    a.btn2:hover, a.btn2:focus {
    background:url("../images/customed_cards_blue.jpg");
    }

    a.btn2.active {
    background:url("../images/customed_cards_blue.jpg");
    }

    #container3 {
    height:53px;
    width:91px;
    text-align:center;
    margin:0,auto;
    }
    a.btn3 {
    display: block;
    background:url("../images/archive.jpg");
    height:53px;
    width:91px;
    text-indent: -9999px;
    }
    a.btn3:hover, a.btn3:focus {
    background:url("../images/archive_blue.jpg");
    }

    a.btn3.active {
    background:url("../images/archive_blue.jpg");
    }

    #container4 {
    height:53px;
    width:151px;
    text-align:center;
    margin:0,auto;
    }
    a.btn4 {
    display: block;
    background:url("../images/session_details.jpg");
    height:53px;
    width:151px;
    text-indent: -9999px;
    }
    a.btn4:hover, a.btn4:focus {
    background:url("../images/session_details_blue.jpg");
    }

    a.btn4.active {
    background:url("../images/session_details_blue.jpg");
    }

    #container5 {
    height:53px;
    width:102px;
    text-align:center;
    margin:0,auto;
    }
    a.btn5 {
    display: block;
    background:url("../images/contact.jpg");
    height:53px;
    width:102px;
    text-indent: -9999px;
    }
    a.btn5:hover, a.btn5:focus {
    background:url("../images/contact_blue.jpg");
    }

    a.btn5.active {
    background:url("../images/contact_blue.jpg");
    }
    but when i give the hyperlinks the addresses it dose not work anymore:

    <tr>
    <td height="89" colspan="2"><div align="center"><img src="images/logo.jpg" width="235" height="89"></div></td>
    <td><div id="container"><a href="Templates/picture_gallery.htm" class="btn">Picture Gallery</a></div></td>
    <td><div id="container2"><a href="Templates/customed_cards.htm" class="btn2">Customed Cards</a></div></td>
    <td><div id="container3"><a href="Templates/archive.htm" class="btn3">Archive</a></div></td>
    <td><div id="container4"><a href="Templates/session_details.htm" class="btn4">Session Details</a></div></td>
    <td><div id="container5"><a href="Templates/contact.htm" class="btn5">Contact</a></div></td>
    <td>&nbsp;</td>
    </tr>
    can anyone tell me what did i do wrong and why that happened
    any advice...

    thanks in advance
    here is the website i am working on http://kindersurf.com

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    I am suprised the active is working at all... the pseudo class for active is exacltly like hover
    Code:
    :active
    you have it as .active
    I could be wrong but from my understanding of active is that you actually will not really see it- by the time it processes you would have never seen it (ie the active state resolves before it is rendered in most circumstances) *but I could have the wrong understanding of :active- I have stepped pretty far from client side code as of late

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    ainca (01-30-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks.

    i changed it but still not working

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    For something to be active it either needs the mouse cursor hovered over it with a mouse button depressed or for it to have the keyboard focus with the enter key depressed.

    As soon as the button or key is released it is no longer active and will return to the hover or focus appearance.

    If you are trying to style references to the current page differently then the easiest way to do that is to add class="currnet" to that element and then apply the style to .current in the CSS. It will be confusing if you call it active as active means that a button or key is depressed.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    ainca (01-30-2012)

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    it is actually my first website so i am new in all this stuff. I found a tutorial saying that what i want can be done that way... can you please give me an example to pull this thru how to add the class "currnet" and what should i apply to it in css.
    i would really appreciate it.
    thanks

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    what felgall is saying is in line with what I was saying (or at least confirms my thoughts) the active pseudo class
    :active
    is really only visible for a microsecond (in most cases)... I think what you want is :visited which will change the link you just clicked... if you are trying to do something more fancy like.... remember what link you clicked and then have that link highlighted in a nav bar for example- you will need to have js or serverside script... you cannot do that with CSS alone unless you make a new nav bar for each page....

    in short though without knowing "what" it is you are trying to achieve it is very difficult to advise
    Can you describe what you are trying to accomplish in more detail?

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    http://www.kindersurf.com/new.html#
    this the initial page, with out hyperlink addresses

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    ok, so now what are you trying to do on that page with all this "active" stuff?

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #9
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i want to do a simple menu, and when you are for example on "picture gallery" i would like it to turn blue, to be different from the other, and so on with the other menu button

  • #10
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    http://kindersurf.com when you press the menu button they turn back to white, when i want the one that i am on to be blue

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    You need to set a class on the one that you want to be different so that you can style that class.

    With static pages just add class="current" to the one that needs to be different. If the pages are generated using a server side language then use that language to add the class to the appropriate entry.

    Then add the styles you need to .current in the stylesheet.

    :active has no more o do with what you want to do than :hover does since :active is the subset of hover while a mouse button is depressed and has nothing to do with which page is current.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    ok- there are two ways to handle the changing of the nav bar colors-
    A) javascript
    B) serverside script

    to handle changing the others to black while you are actively clicking a link (ie holding the mouse button down) you can use the :active pseudo class (ref - see point 5.11.3)

    what you can do is set so that when link id "demo1" is active, "demo2" is black and vise versa
    Code:
    <a href="#" id="demo1"> Demo One </a>
    <a href="#" id="demo2"> Demo Two </a>
    CSS
    Code:
    a {color:white;}
    #demo1:active #demo2{color:black;}
    #demo2:active #demo1{color:black;}

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

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