4 Replies - 487 Views - Last Post: 18 October 2013 - 02:56 PM

#1 ISimplyFallenI  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 18-October 13

Need help with CSS sprites.

Posted 18 October 2013 - 02:12 PM

I have no idea what I'm doing wrong, to me the code seems right but I guess it's not or else it would be working. The actual sprite button isn't showing up in the browser, I can click on the invisible button but I'm unable to see it, and I have no idea how to fix it. Help is needed.

Here's the CSS
a.button
{
	height: 48px;
	background-image: url("images/Home.png");
	text-indent: -9999px;
	display: inline-block;
}

a#home
{
	width: 186px;
	background-position: 0px 0px;
}

a#home-hover :hover
{
	background-position: 0px -40px;
}

a#home-active :active
{
	background-position: 0px -80px;
}



Here's the HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
<a href="#" class="button" id="home">Home</a>
</body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: Need help with CSS sprites.

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3243
  • View blog
  • Posts: 10,882
  • Joined: 12-December 12

Re: Need help with CSS sprites.

Posted 18 October 2013 - 02:23 PM

You are specifying ids of home-hover and home-active which don't exist on the page. There also shouldn't be a space before :hover or :active.

a#home:hover
{
	background-position: 0px -40px;
}

a#home:active
{
	background-position: 0px -80px;
}

BTW You don't actually need to put the 'a' before a#home because ids must be unique on the page, so there mustn't be any other element(s) with this id. Having said this though, I do find it useful sometimes to include the tag-name; I find it makes the css easier to follow, particularly for large files.

This post has been edited by andrewsw: 18 October 2013 - 02:28 PM

Was This Post Helpful? 0
  • +
  • -

#3 ISimplyFallenI  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 18-October 13

Re: Need help with CSS sprites.

Posted 18 October 2013 - 02:43 PM

So I should remove the spaces before :hover and :active, remove the a from the #home id, and put the home-hover and home-active on the page?

This post has been edited by andrewsw: 18 October 2013 - 02:47 PM
Reason for edit:: Removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3243
  • View blog
  • Posts: 10,882
  • Joined: 12-December 12

Re: Need help with CSS sprites.

Posted 18 October 2013 - 02:53 PM

View PostISimplyFallenI, on 18 October 2013 - 09:43 PM, said:

So I should remove the spaces before :hover and :active,

Yes.

Quote

remove the a from the #home id,

As I explained, it is not essential, so it's up to you if you want to keep it.

Quote

and put the home-hover and home-active on the page?

Why? Perhaps you should re-read my post. #home-hover is looking for an element with id 'home-hover', your current element has id 'home'.
Was This Post Helpful? 0
  • +
  • -

#5 ISimplyFallenI  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 18-October 13

Re: Need help with CSS sprites.

Posted 18 October 2013 - 02:56 PM

I'm sorry I've only had 2 weeks of CSS so I'm still very new to it. Okay I'll adjust the id's.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1