Forums

deerby

Hello,

I'll make this as quickly as possible. I am basically tryuing to get each of my Nav button to be on down state when the user go to each individual page. My hover works, but as soon as I put in the active state obviously all the Nav button gets active. The site is not live as of this time but I have provided the code below.

Thanks Guys

      <div id=\"nav\">
        <a href=\"index.html\" id=\"homeBTN\"  title=\"Home\">Home</a>
        <a href=\"about.html\" id=\"aboutBTN\" title=\"About us\">About</a>
        <a href=\"products.html\" id=\"productsBTN\" title=\"Products&Services\">Products and Services</a>
        <a href=\"contact.html\" id=\"contactBTN\" title=\"Contact us\">Contact</a>
      </div>


#nav{
	float : left;
	width : 895px;
	margin-top : 0px;
	margin-left : 0px;
	background-color: #fff;
	}
#homeBTN {
	float : left;
	width : 175px;
	height : 50px;
	text-indent : -9999px;
	overflow : hidden;
	display : block;
	background : transparent url(images/home.jpg) no-repeat 0 0;
	}
	
#homeBTN:hover {
	background-position : bottom left;
	}

#homeBTN:active {
	background-position: bottom left;
       }
	
#homeBTN:focus {
	background-position : bottom left;
       }

ikthius

link please to see what you mean, it may not be live, but you should have it on the net to test at times

and welcome

deerby

Here is the site ikthius

http://eclipxeconsulting.com/

apostrophe

Just give each page body its own unique id.
eg.

<body id=\"home\">
<body id=\"about\">

Then set the rule in your css for the corresponding nav button on each page:

body#home #homeBTN {
   background-position:left bottom;
}

body#about #abouBTN {
   background-position:left bottom;
}

etc.

deerby

Thanks apostrophe. Works like a Charm! Something so simply yet so daunting. :)

deerby

sorry about that apostrophe. I jump the gun on this one. I tried your solution but I was getting the same issue. After scratching my head for a few minutes, I came up with a solution which Worked. I basically Gave each nav button a class name for each individual page and then just apply my css function to get my down state button
See code below:


<div id=\"nav\">
        <a href=\"index.html\" id=\"homeBTN\" class=\"home\" title=\"Home\">Home</a>
        <a href=\"about.html\" id=\"aboutBTN\" title=\"About us\">About</a>
        <a href=\"products.html\" id=\"productsBTN\" title=\"Products&Services\">Products and Services</a>
        <a href=\"contact.html\" id=\"contactBTN\" title=\"Contact us\">Contact</a>
      </div>


      <div id=\"nav\">
        <a href=\"../index.html\" id=\"homeBTN\" title=\"Home\">Home</a>
        <a href=\"../about.html\" id=\"aboutBTN\" class=\"about\" title=\"About us\">About</a>
        <a href=\"../products.html\" id=\"productsBTN\" title=\"Products&Services\">Products and Services</a>
        <a href=\"../contact.html\" id=\"contactBTN\" title=\"Contact us\">Contact</a>
      </div>


#nav{
	float : left;
	width : 895px;
	margin-top : 0px;
	margin-left : 0px;
	background-color: #fff;
	}
	#homeBTN {
	float : left;
	width : 175px;
	height : 50px;
	text-indent : -9999px;
	overflow : hidden;
	display : block;
	background : transparent url(images/home.jpg) no-repeat 0 0;
	}
	
	#homeBTN:hover {
	background-position : bottom left;
	}
	
	#homeBTN:active {
	background-position : bottom left;
	}
	
	#nav .home {
    background-position: bottom left;
	}


#aboutBTN {
	float : left;
	width : 202px;
	height : 50px;
	text-indent : -9999px;
	overflow : hidden;
	display : block;
	background : transparent url(images/about.jpg) no-repeat 0 0;
	}
	#aboutBTN:hover {
	background-position : bottom left;
	}
	
	#aboutBTN:active {
	background-position : bottom left;
	}
	
	#nav .about {
    background-position: bottom left;
	}

this is the website again: http://eclipxeconsulting.com/index.html

treehouse : what would you like to learn today?

Forums

Nav Active State Button