PDA

View Full Version : Help with CSS Buttons



claytoncasey01
Mar 5th, 2012, 08:45 AM
I have a page and when one hovers over a button, lets say home a little tab appears over that button, done via css with the background-image: using divs. So what I am looking for is if I am on the home page I want the tab to always be there to show that they are on the home page and have it appear on hover on the none selected pages, so when I would hover over about while on the home page, the tab would appear and when I click it the tab would stay on about and be gone off home except on hover. How would I do this. this is what my code looks like for css.



.homeButton {
display: block;
background-image: url(images/nav_home.png);
background-repeat: no-repeat;
width: 119px;
height: 136px;
margin-top: 13px;
}

.homeButton:hover {
background-image: url(images/nav_home_select.png);
background-repeat: no-repeat;
margin-top: 13px;
height: 136px;


}

.homeButton:active {
background-image: url(images/nav_home_select.png);
background-repeat: no-repeat;
margin-top: 13px;
height: 136px;

}

All other buttons have same code but width is differernt depending on image size and they have a different class like .aboutButton etc. I can post pictures if you need a visual example.

http://i240.photobucket.com/albums/ff105/ballzan/Pickone.jpg

So the blue tab over the home, it comes up on hover but I want it to show up on the active page so if home is active it will stay on it and only come up on the rest upon hover.

claytoncasey01
Mar 5th, 2012, 10:07 AM
I solved the problem by adding a separate class for the button corresponding to the page.