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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Posts
    207
    Thanks
    27
    Thanked 0 Times in 0 Posts

    menu button to be another color when active

    Hello, for the site robotbuy.com left side blue menu buttons, I want the active button to remain as red. Right now only if you hover the mouse it becomes red.

    For the .menu active I tried pasting the

    background:url('http://www.robotbuy.com/pictures/button2.png') no-repeat 0 0;

    which is the red button, but it doesnt work. Please advice.
    Here is the css:

    Code:
    .menu{
    width:100px;
    }
    .menu a{
    display:block;
    width:175px;
    height:48px;
    valign: center;
    background:url('http://www.robotbuy.com/pictures/button1.png') no-repeat 0 0;
    line-height:30px;
    font-family:Arial;
    font-size:12px;
    font-weight: bold;
    color:black;
    text-align:center;
    text-decoration:none; margin-left:0px; margin-right:0px; margin-top:-17px; margin-bottom:0px;
    }
    .menu a:visited{
    color:#white;
    
    }
    .menu a:hover{
    color:white;
    background:url('http://www.robotbuy.com/pictures/button2.png') no-repeat 0 0;
    }
    
    .menu a:active
    {
    
    color:#ffffff;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jul 2009
    Posts
    207
    Thanks
    27
    Thanked 0 Times in 0 Posts
    didn't understand how to use the info in that post in my case...

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Add different ids to your anchors, like
    Code:
    <div class="menu">
    
    <a id="home_link" href="http://www.robotbuy.com/index.php">HOME</a>
    <a id="books_link" href="http://www.robotbuy.com/books.php">BOOKS</a>
    <a id="domestic_link" href="http://www.robotbuy.com/domestic.php">DOMESTIC ROBOTS</a>
    ....
    </div>
    After that add different id's to the body tag of your pages, say
    in index.php, <body id="home">
    in books.php, <body id="books"> etc.

    Now, to show the selected link, you may style your menu items, like
    Code:
    #home #home_link,
    #books #books_links{
    color:white;
    background:url('http://www.robotbuy.com/pictures/button2.png') no-repeat 0 0;
    }
    PS:It's better to use an unordered list to build your list of navigation items, to make your document semantic
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    ketanco (11-07-2009)

  • #5
    Regular Coder
    Join Date
    Jul 2009
    Posts
    207
    Thanks
    27
    Thanked 0 Times in 0 Posts
    thanks it works. appreciate the help....


  •  

    Posting Permissions

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