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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    163
    Thanks
    10
    Thanked 0 Times in 0 Posts

    CSS Button Image Hovering

    I'm working on creating a top Navigation that has 6 Buttons along the top.
    Home - Account - FAQs - Tips - Forum - Contact.

    Each of the buttons are PNG images. The original image displayed is Orange. When hovered over, it turns Blue.
    I now need to figure out how to keep one of the buttons Blue IF on that current page. So for example:

    The user is on the Home page. This "Home" button should be the blue image while on the page.

    You can see the example page I'm working on here:
    http://tinyurl.com/44dzkwf

    And my code here:
    -- HTML below --

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Language" content="en" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title> Test </title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    
    <div id="menu">
    <div id="menu_l"></div>
    <div id="menu_r"></div>
      <ul>
    	<li><a class="homebutton" href="index.php">Home</a></li>
    	<li><a href="members.php">Account</a></li>
    	<li><a href="faq.php">FAQs</a></li>
    	<li><a href="tips.php">Tips</a></li>
    	<li><a href="forum.php">Forum</a></li>
    	<li><a href="contact.php">Contact</a></li>
      </ul>
    </div>
    
    </body>
    </html>
    -- CSS below --
    Code:
    #menu{
    	height:37px;
    	margin:0 8px;
    	background:url(images/menu_bg.png);
    	position:relative;
    }
    #menu_l, #menu_r{
    	position:absolute;
    	width:8px;
    	height:37px;
    	top:0;
    }
    #menu_l{
    	left:-8px;
    	background:url(images/menu_l.png);
    }
    #menu_r{
    	left:100%;
    	background:url(images/menu_r.png);
    }
    #menu ul{
    	margin-left:170px;
    	list-style:none;
    }
    #menu li{
    	display:inline;
    }
    #menu a{
    	float:left;
    	line-height:37px;
    	height:37px;
    }
    #menu .current a{
    	
    	border:none !important;
    }
    .homebutton {
    	display: block;
    	width: 101px;
    	height: 37px;
    	background: url('images/home_orange.png') bottom;
    	text-indent: -99999px;
    }
    .homebutton:hover {
    	background-position: 0 0;
    	background:url(images/home_blue.png);
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Smudly,
    Have a look at this example - http://nopeople.com/CSS%20tips/h_ul_...ges/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this demo as a guide.

    It sets the background colour of the current page's <li> to red. You can change the style to whatever you like.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                window.onload=function(){
                    var fileName = window.location.pathname.substring(window.location.pathname.lastIndexOf('\/')+1).split('.');
                    var menuLinks = document.getElementById('menuBar').getElementsByTagName('a');
                    for(i=0; i < menuLinks.length; i++){
                        if(menuLinks[i].href.indexOf(fileName[0]) != -1){
                            menuLinks[i].parentNode.style.backgroundColor = 'red'; //set current page style
                            i = menuLinks.length;
                        }
                    }
                }
            </script>
        </head>
        <body>
            <ul id="menuBar">
                <li><a href="index.php">Home</a></li>
                <li><a href="members.php">Account</a></li>
                <li><a href="faq.php">FAQs</a></li>
                <li><a href="tips.php">Tips</a></li>
                <li><a href="forum.php">Forum</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
        </body>
    </html>

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to create the following class

    #home_b. active{
    background: url(images/home_blue.png);
    width: 101px;
    height: 37px;
    display: block;
    background-position: 0 0;
    }


    And call in the lists as:

    <li><a href="index.php" class="active">Home</a></li>


  •  

    Posting Permissions

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