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); } Link to comment https://forums.phpfreaks.com/topic/234623-css-button-image-hovering/ Share on other sites More sharing options...
soltek Posted April 25, 2011 Share Posted April 25, 2011 User the :active selector, mate, Link to comment https://forums.phpfreaks.com/topic/234623-css-button-image-hovering/#findComment-1205739 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. Link to comment https://forums.phpfreaks.com/topic/234623-css-button-image-hovering/#findComment-1205740 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) Link to comment https://forums.phpfreaks.com/topic/234623-css-button-image-hovering/#findComment-1205750 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.