• Locked
4 replies [Last post]
Sun, 2012-02-26 11:51
mrmaxo3000
mrmaxo3000's picture
Offline
newbie
Last seen: 10 years 22 weeks ago
Joined: 2012-02-26
Posts: 3
Points: 4

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

Top
Tags:
Sun, 2012-02-26 21:27
#1
purvesweb
purvesweb's picture
Offline
Regular
Scotland
Last seen: 10 years 9 weeks ago
Scotland
Timezone: GMT+1
Joined: 2011-02-15
Posts: 13
Points: 27

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

Top
Mon, 2012-02-27 18:38
#2
mrmaxo3000
mrmaxo3000's picture
Offline
newbie
Last seen: 10 years 22 weeks ago
Joined: 2012-02-26
Posts: 3
Points: 4

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???

Top
Mon, 2012-02-27 19:06
#3
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Top
Mon, 2012-02-27 19:34
#4
mrmaxo3000
mrmaxo3000's picture
Offline
newbie
Last seen: 10 years 22 weeks ago
Joined: 2012-02-26
Posts: 3
Points: 4

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!!!

Top
  • Locked