Please help I need a home button to appear in the navigation bar when viewing the home page. (using CSS and HTML)
Here is the CSS code for the hover state which works fine, so can i replicate it to work for when the page is selected rather then hovered over???...
#navigation-Home { width: 70px; }
#navigation-Home a:hover { background:url("Home.png") 0px 15px no-repeat; }
Here is the HTML code for the hover state:
<div id="navigation"> <li id="navigation-Home"><a href="THE LINK TO HOMEPAGE">Home</a></li> </div>
Cheers
Hi Mrmaxo Do you mean that
Hi Mrmaxo
Do you mean that you would like the button to show the hover image constantly when someone is on that page?
If so what you will want to do is give your ahref a class, for example;
<div id="navigation"> <li id="navigation-Home"><a href="THE LINK TO HOMEPAGE" class="active">Home</a></li> </div>
When you do this you can reference it in the CSS as follows:
.active {background:url("Home.png") 0px 15px no-repeat;}
If this is not what your looking for letting us know and we will do our best to help further.
Cheers
Stevie
Thanks for your help however
Thanks for your help
however when I use that code it works but the home button shows for every page I am on, not just the homepage, so do I need some sort of referencing in the css or something???
Please check the 'How To'
Please check the 'How To' section of the forum where you will find a guide to doing this using just CSS.
Hi Great tutorial, but
Hi
Great tutorial, but becuase I am new to CSS and html could you help me out because when I put in your code it didn't work, am I doing something wrong???
I am using weebly and then editing the css and html as needed so put the code that was in the body tag in the content in an html file.
This is the rest of my HTML navigation:
<div id="navigation"> <li id="navigation-Home"><a href="http://jagonapps.weebly.com/index.html" class="active">Home</a></li> </div>
And this is my CSS navigation code, (including a hover state which works fine)
#navigation { background:url("navigationnew.png") no-repeat; width: 1263px; height: 134px; margin: 0; padding: 0px 350px; } #navigation { colour: #000000; width: 100%; height: 134px; margin: 0; padding: 0px 350px; colour: #000000; } #navigation li, #navigation a { height: 134px; display: block; } #navigation li { float: left; list-style: none; display: inline; text-indent: -9999em; } #navigation-Home { width: 70px; } #navigation-YouTube { width: 70px; } #navigation-App-library { width: 70px; } #navigation-How-to-make-an-app { width: 70px; } #navigation-Linked-sites { width: 70px; } #navigation-Contact-us { width: 70px; } #navigation-Home a:hover { background:url("Home.png") 0px 15px no-repeat; } #navigation-YouTube a:hover { background:url("YT.png") 0px 15px no-repeat; } #navigation-App-library a:hover { background:url("App.png") 0px 15px no-repeat; } #navigation-How-to-make-an-app a:hover { background:url("Hammer.png") 0px 15px no-repeat; } #navigation-Linked-sites a:hover { background:url("Link.png") 0px 15px no-repeat; } #navigation-Contact-us a:hover { background:url("Contact.png") 0px 15px no-repeat; } <ul> <li><a href="#"Home</a></li> <li class="Home"><a href="#">Home</a></li> <li class="contact"><a href="#">contact</a></li> </ul> #Home .Home { background:url("Home.png"; }
Many thanks to all that have helped so far!!!