Help with basic issue/sprite

HTML & CSS
1

Hi there. I’m new to CSS and trying to achieve a fairly simple effect.

Here is the site:

http://www.tadpolemarketing.ca/

I have a frog logo (that I’ve setup to be a sprite). Basically I want the frog logo in the upper left part of the page and I want it to turn from green to red when you hover over it (I also eventually want to link it to a page).

Here’s the relevant code so far, sorry- I know it’s probably atrocious but I’m really new.



.borderradius  .slides-container { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
	.slides-container { padding: 10px; position: relative; }

.froglogo { padding-bottom:262px; width:371px; background:url(http://www.tadpolemarketing.ca/wp-content/uploads/2011/10/frog3.png) no-repeat 0 bottom;}

#biglogo {background-position:0  bottom }

And HTML:

<!-- START .slider -->

 	<section class="slider grid_12 group">

		    	<div class="slides-container" >
<div class="froglogo" id="biglogo">
</div>
	  

	    	</div>

 		
    </section>

    <!-- END .slider -->

And image for logo:

http://www.tadpolemarketing.ca/wp-content/uploads/2011/10/frog3.png

Any help appreciated! Eventually I want to have text floating to the right of the image, but I’m really new to all CSS so even simple tasks are really difficult for me.

thanks

2

You do it basically like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
.borderradius  .slides-container { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.slides-container { padding: 10px; position: relative; }
.froglogo, .froglogo a, .froglogo span { height:262px; width:371px; display: block;;}
.froglogo a span {background:url(http://www.tadpolemarketing.ca/wp-content/uploads/2011/10/frog3.png) no-repeat 0 0; position: absolute; left: 0; top: 0;}
.froglogo a:hover span {background-position: 0 -261px}
.groglogo {position: relative;}
.froglogo a {margin-left: -9999px;}
</style>
</head>


<body>
<!-- START .slider -->
<section class="slider grid_12 group">
  <div class="slides-container" >
    <div class="froglogo">
    <a href="#">Link<span></span></a>
    </div>
  </div>
</section>
<!-- END .slider -->
</body>
</html>

This method means the link text is there but covered by the sprite image, with is placed over the top of it inside a span element.

But, ideally, the background of the frog image should be opaque (if, say the site bg is white, make the image bg white) and then you can get rid of this role for maximum accessibility:

.froglogo a {margin-left: -9999px;}

However, your frog image is not evenly balanced, so the hover doesn’t work properly. Make sure the dimensions of each half of the image are exactly the same so the the hover works seamlessly.

3

Thanks for the response.

Where am I going wrong:

Here’s my CSS:

 .borderradius  .slides-container { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.slides-container { padding: 10px; position: relative; }
.froglogo, .froglogo a, .froglogo span { height:261px; width:371px; display: block;;}
.froglogo a span {background:url(http://www.tadpolemarketing.ca/wp-content/uploads/2011/10/frog3.jpg) no-repeat 0 0; position: absolute; left: 0; top: 0;}
.froglogo a:hover span {background-position: 0 -261px}
.groglogo {position: relative;}

And my HTML:

<!-- START #content -->
	<div id="content" class="container_12 group">	

	 

	

 	<!-- START .slider -->
<section class="slider grid_12 group">
  <div class="slides-container" >
    <div class="froglogo">
    <a href="#">Link<span></span></a>
    </div>
  </div>
</section>
<!-- END .slider -->

thanks again

4

That’s pretty close. The slight jump is due to the top and bottom parts of the image not being exactly the same size. Is there anything else you think is not working?

5

This is all I’m getting in Chrome browser (deleted cache as well):

6

You haven’t updated your style sheet. The CSS is not in there yet.

Also, you could fix your image a bit, as the two frogs are overlapping a bit. Give them a little more space between, like here:

http://pageaffairs.com/sp/froggy.jpg

7

Here’s the stylesheet, I updated at the very bottom:

http://www.tadpolemarketing.ca/wp-content/themes/echo/style.css

8

There are some errors in the style sheet that may be messing it up. Add the red and remove the blue and see if that works.

#main-nav a {
font: 15px Helvetica, Arial, Georgia, Times, serif;
color: #889397;
[COLOR="#FF0000"]}[/COLOR]

.borderradius  .slides-container { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.slides-container { padding: 10px; position: relative; }
.froglogo, .froglogo a, .froglogo span { height:261px; width:371px; display: block;[COLOR="#0000CD"];[/COLOR]}
.froglogo a span {background:url(http://www.tadpolemarketing.ca/wp-content/uploads/2011/10/frog3.jpg) no-repeat 0 0; position: absolute; left: 0; top: 0;}
.froglogo a:hover span {background-position: 0 -261px}
.froglogo {position: relative;}
9

great, thanks so much Ralph. Just gotta tweak the image now.

thanks again

10

Great, glad that fixed it. I think the image is OK, except that there is a slight overlap of frogs. If you put a bit more space between it should be OK. You’ll just have to adjust the negative top setting on hover:

.froglogo a:hover span {background-position: 0 -[COLOR="#FF0000"]261[/COLOR]px}

When I make sprites, I create one image, then duplicate and color the duplicate differently. Then I know each image is exactly the same size. Then I create a new Ps file twice the height of the originals, place the two images in there top and bottom, and then I’m sure the measurements are all right.