CSS Sprite Button

[davy_yg]

Hi,

I am trying to create a button using css sprite.

buttonnav.css

a.button {
	background: url(../images/buttonnav.png) no-repeat 0 0;
	width: 100px;
	height: 50px;
	display: block;
	text-indent: -9999px;
}


a.button:hover { background-position: 0 -2px; }

a.button:active { background-position: 0 -8px; }

index.php

<div id="button">Button</div>

I do not see the button image, only the text "button". What's wrong with my code ?

Thanks.

[hericles]

You refer to a.button in your CSS when the id is called button. You would access that is the CSS with #button.

[rotten69]

Try changing the code in your HTML file to

<div class="button">Button</div>

and in your CSS file,

.button{  }

Otherwise, follow what hericles has mentioned above to fix your problem.

[davy_yg]

I change it to:

sidebanner.css

@charset "utf-8";
/* CSS Document */

#button {
	background: url(../images/buttonnav.png) no-repeat 0 0;
	width: 100px;
	height: 50px;
	display: block;
	text-indent: -9999px;
}


#button a:hover { background-position: 0 -2px; }

#button a:active { background-position: 0 -8px; }

slideshow2.php

<div id="button">Button</div>

still the image does not appear yet. The image is this big:

buttonnav.png
I-I
I-I