0

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.

3
Contributors
3
Replies
4
Views
5 Years
Discussion Span
Last Post by davy_yg
0

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

0

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.

0

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

Edited by davy_yg: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.