8 Replies - 669 Views - Last Post: 25 February 2014 - 06:49 PM

#1 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

CSS/HTML Syntax for Simple Sprite Image Links

Posted 24 February 2014 - 09:12 PM

Greetings Dream in Coders,

Hope you are doing well this fine evening. I have to say, since I began my current website project, you folks have been amazingly gracious and helpful. My problems so far have been mostly beginner's errors and I've learned a lot here so far. I hope I can return the favor one of these days.

So here's my very simple problem for today.

Problem
I'm trying to use a sprite to create three image links with two states: link and hover. The image links aren't displaying. I suspect I may be handling the classes and attribute selectors all wrong here. I've looked at some sample code in several articles and tried to use the principles I see there - but so far, no cigar.

  • I'm using a separate style sheet which works fine.
  • The XY coordinates for the sprite are correct. I'm only concerned here with the first three buttons. See attachment.
  • I'm placing each link image inside its own <div> so I can use floats and apply a right margin to each. Is there a simpler way to do this?
  • Can anyone spot my errors in this code?


Any and all responses are much appreciated.

Here's the stripped-down code I've written

<!-- main.css -->

.linkButtonBox {
	width: auto;
	display: block;
	float: left;
	background-color: #FF0000;
}
a.linkButton {
	clear: both;
	background-image: url(../_image/_main/productSprite.png) no repeat 0 0;
	display: block;
	width: auto;
}
a.linkButton.button1 {
	background-position: 0px 0px;
	width: 180px;
	height: 112px;
}
a.linkButton.button2 {
	background-position: -180px 0px;
	width: 180px;
	height: 112px;
}
a.linkButton.button3 {
	background-position: -360px 0px;
	width: 180px;
	height: 112px;
}
a.linkButton.button1:hover {
	background-position:  0px  112px;
}
a.linkButton.button2:hover {
	background-position: -180px  112px;
}
a.linkButton.button3:hover {
	background-position: -360px 112px;
}

<!-- index.php -->


<body>
  <div class="linkButtonBox">
    <a href="_page/page1.php"><img class="linkButton button1"></a>
    <a href="_page/page2.php"><img class="linkButton button2"></a>
    <a href="_page/page3.php"><img class="linkButton button3"></a>
  </div>
</body>



Thanks in Advance,
Mick

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: CSS/HTML Syntax for Simple Sprite Image Links

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3806
  • View blog
  • Posts: 13,499
  • Joined: 12-December 12

Re: CSS/HTML Syntax for Simple Sprite Image Links

Posted 25 February 2014 - 12:04 AM

The classes are applied to the img tags, not the a-tags.
Was This Post Helpful? 1
  • +
  • -

#3 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: CSS/HTML Syntax for Simple Sprite Image Links

Posted 25 February 2014 - 07:18 AM

You are not actually displaying an image element, the sprites appear via CSS. Like andrewsw stated, you are applying your class to a image element instead of your anchor element which is why you are not seeing any results. Also, if you want to be extra fancy you can use some CSS3 transition effects to really make your menu look great.

<div class="linkButtonBox">
    <a class="linkButton Button1"></a>
    <a class="linkButton Button2"></a>
    <a class="linkButton Button3"></a>
</div>


Was This Post Helpful? 1
  • +
  • -

#4 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: CSS/HTML Syntax for Simple Sprite Image Links

Posted 25 February 2014 - 01:44 PM

Thanks guys. It works perfectly!

Now, I've got two related questions.

  • At first the sprite image wasn't displaying at all as the background image. I experimented with it and discovered that if I removed the "no repeat" property, it displayed just fine. Can you explain what was going on there and why some tutorials recommend applying "no repeat" to the background image when using sprites?
  • I'd really like to play around with transitions. Does anyone here have any links to resources and examples of what's possible now with CSS3?


Again, many thanks.

Mick

This post has been edited by agent46: 25 February 2014 - 01:45 PM

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3806
  • View blog
  • Posts: 13,499
  • Joined: 12-December 12

Re: CSS/HTML Syntax for Simple Sprite Image Links

Posted 25 February 2014 - 01:52 PM

Repeating the image is not usually appropriate for a sprite as you are not typically covering a large area. You just want a single image, of a specific size, to display, then use css to move this background a specific distance so that the image above (or below) it displays.

I don't know what your revised html and css are, but if the image doesn't display then either the element containing it has limited, or no, height, or you have pushed the background too far or in the wrong direction. If removing no-repeat fixed it then this indicates that the image was in the wrong position, but repeating it above and/or below brought a repeated image-copy into view.

Ther are many good sites if you search "css3 transitions"; CSS-Tricks is an excellent site.

This post has been edited by andrewsw: 25 February 2014 - 01:54 PM

Was This Post Helpful? 0
  • +
  • -

#6 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: CSS/HTML Syntax for Simple Sprite Image Links

Posted 25 February 2014 - 03:03 PM

If you are using background-image attribute, you can only specify an image, any other properties will invalidate the attribute. That's why when you remove the property, the image appears.

This post has been edited by FerretHolmes: 25 February 2014 - 03:03 PM

Was This Post Helpful? 1
  • +
  • -

#7 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: CSS/HTML Syntax for Simple Sprite Image Links

Posted 25 February 2014 - 03:29 PM

Thanks for your reply. I need to get this right if I'm going to improve my skills. Thanks for your patience. Here's the code with the "no repaet 0 0" included. I've double checked everything and it seems right to my mind, but the sprite doesn't display.

Here's what I got:

  • productSprite.png = 1091 x 225
  • I determined the XY pixel coordinates for each image using the guideline function in Photoshop, so it's pretty accurate.
  • in the CSS rules, I'm shifting the background image in a negative direction in order to display the segment I want, so the image coordinates are negative, as you'll see in the code.
  • I'm using two divs for positioning: .linkButtonBox and .linkButton.
  • There are three occurrences of .linkButton in the .linkButtonBox div.
  • Each .linkButton div contains an anchor link but no content.
  • I included "width: 180px;" and "height: 112px;" in the .linkButton class, but that doesn't help the display issue.
  • For the purposes of this post, I've stripped down the classes to bare essentials for readability.
  • If you like, you can also refer to the sprite image I attached to my opening post.


Here's the code I have now:
<!-- main.css -->

.linkButtonBox {
	width: auto;
	display: block;
	float: left;
}
.linkButton {
	float: left;
	background-image: url(../_image/_main/productSprite.png) no repeat 0 0;
	display: block;
}
<!-- these are the sprite image coordinates-->
.flake {
	background-position: 0px 0px;
	width: 180px;
	height: 112px;
}
.rattlebomb {
	background-position: -180px 0px;
	width: 180px;
	height: 112px;
}
.pearl {
	background-position: -545px 0px;
	width: 180px;
	height: 112px;
}
.flake:hover {
	background-position:  0px  112px;
}
.rattlebomb:hover {
	background-position: -180px  112px;
}
.pearl:hover {
	background-position: -545px 112px;
}


<!-- index.php -->

  <div class="linkButtonBox">
    <a class="linkButton flake" href="_page/metalflake_launch.php"></a>
    <a class="linkButton rattlebomb" href="_page/rattlebomb_launch.php"></a>
    <a class="linkButton pearl" href="_page/pearlfactory_launch.php"></a>
  </div>




I hope this is enough information to help get to the bottom of this mystery.

Thanks,
Mick

This post has been edited by agent46: 25 February 2014 - 03:42 PM

Was This Post Helpful? 0
  • +
  • -

#8 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: CSS/HTML Syntax for Simple Sprite Image Links

Posted 25 February 2014 - 03:44 PM

As I stated earlier, background-image only takes one property. Simply change background-image to background and you should be good to go.
Was This Post Helpful? 1
  • +
  • -

#9 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: CSS/HTML Syntax for Simple Sprite Image Links

Posted 25 February 2014 - 06:49 PM

Thank you, FerretHolmes.

I hadn't seen your post before now.

Mick
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1