Smudly Posted April 25, 2011 Share Posted April 25, 2011 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 -- <!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 -- #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); } Quote Link to comment Share on other sites More sharing options...
soltek Posted April 25, 2011 Share Posted April 25, 2011 User the :active selector, mate, Quote Link to comment Share on other sites More sharing options...
Smudly Posted April 25, 2011 Author Share Posted April 25, 2011 Actually, I'm not trying to make it turn blue when I am clicking on it. It needs to stay blue when I am on that current page. Quote Link to comment Share on other sites More sharing options...
soltek Posted April 25, 2011 Share Posted April 25, 2011 Dunno if there's a better way, but I use :active for that. Take a look here (kinda messed up, but, again, I dont know another way) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.