Hi guys, I got a problem with header menu. I'm building a site which is currently uploaded here http://leadchannel.info/gary/index.php I would like when you click on the page menu picture changes and stays on the page which is currently viewed. It is my css code for header and I cannot see where is my mistake to get image 'button1.png' to stay on the current page. Please help!!! And thanks in advance #header ul { margin:0px; padding-top:237px; padding-right:110px; padding-left:0px; height:40px; } #header ul li{ display:inline; float:right; font:12px Arial; font-weight:bold; text-transform:uppercase; } #header ul li a{ display:block; text-decoration:none; padding:20px; color:#000000; font-weight:bold; background:url(../images/button.png); top:40px; left:0px; width:100px; height:0px; } #header ul li a:hover{ background:url(../images/button1.png); color:#000000; } #header ul li.currentpage{ background-image:url(../images/button1.png); }
Easy. Look at mot.php. You still have this code (because you copied the index.php): <li class="currentpage"> <a href="index.php">Home</a></li> Code (markup): It should look like this: <li> <a href="index.php">Home</a></li> Code (markup): and this code here: <li> <a href="mot.php">MOT</a></li> Code (markup): has to be <li class="currentpage"> <a href="mot.php">MOT</a></li> Code (markup): By the way... why php? It's pure HTML, nothing dynamic inside. I did not check or corrected the CSS.
Thanks a lot for the answer. I'm using template which is written in php. My header.php code is: <ul> <li<?php if ($thisPage=="Contact Us") echo " class=\"currentpage\""; ?>> <a href="contactus.php">Contact Us</a></li> <li<?php if ($thisPage=="Listings") echo " class=\"currentpage\""; ?>> <a href="listings.php">Vehicle Sales</a></li> <li<?php if ($thisPage=="Body Shop") echo " class=\"currentpage\""; ?>> <a href="bodyshop.php">Body Shop</a></li> <li<?php if ($thisPage=="Servicing") echo " class=\"currentpage\""; ?>> <a href="servicing.php">Servicing</a></li> <li<?php if ($thisPage=="MOT") echo " class=\"currentpage\""; ?>> <a href="mot.php">MOT</a></li> <li<?php if ($thisPage=="About Us") echo " class=\"currentpage\""; ?>> <a href="aboutus.php">About Us</a></li> <li<?php if ($thisPage=="Home") echo " class=\"currentpage\""; ?>> <a href="index.php">Home</a></li> </ul> I think there problem in css that picture doesn't stay on current page as when you go with mouse over it it displays correctly 'button1.png' but when you click on it it shows 'button.png' image and I need to display 'button1.png' picture. Thanks in advace
You have: #header ul li.currentpage{ background-image:url(../images/button1.png); } Code (markup): I added a space between li.currentpage ... dunno if this helps #header ul li .currentpage{ background-image:url(../images/button1.png); } Code (markup):