How To Make a CSS Sprite Rollover List Part 2


October 20, 2009 By

Jonathan Crowe

I know there have been many people anxiously waiting for Part 2 of How To Make a CSS Sprite Rollover List. Didn't read part 1 yet?  Well before you learn how to make a CSS Sprite, why don't you head over to part 1 and learn Why Use CSS Sprites.


View the working DEMO

Now let's get to work.  Follow these easy three instructions on producing a cross browser compatible list with a CSS sprite and rollover functionality!  

1) Create your image
First thing is first.  Go ahead and create your CSS sprite image.  Make sure you keep each icon the same size and the same distance away.  In my case, I have each icon 54 x 54 pixel.  Here is my image.


2) Create the HTML

Next step is to create the HTML.  My HTML is listed below:


<div id="container">
<h1>CSS Sprite Example</h1>
<ul>
<li class="item1"><a href="#">List Item 1</a></li>
<li class="item2"><a href="#">List Item 2</a></li>
<li class="item3"><a href="#">List Item 3</a></li>
<li class="item4"><a href="#">List Item 4</a></li>
</ul>

</div>

3) Create the CSS
Next step is to create the CSS.  My CSS is listed below:


div#container {
width: 400px;
padding:30px;
}
div#container h1 {
font-family:arial;
color:#222;
font-size:18px;
}
a {
color:#006CB5;
text-decoration:none;
}
#container li{
height:54px;
list-style-type:none;
display:block;
margin:3px 0 3px 0px;
font-size: 46px;
}
li.item1 a{
background:url('csssprites.jpg') no-repeat;
background-position:0px 0px;
padding-left:58px;
}
li.item1 a:hover {
background:url('csssprites.jpg') no-repeat 0px -54px;
color:#F3AE08;
}
li.item2 a  {
background:url('csssprites.jpg') no-repeat 0px -108px;
padding-left:58px;
}
li.item2 a:hover {
background:url('csssprites.jpg') no-repeat 0px -162px;
color:#F3AE08;
}
li.item3 a  {
background:url('csssprites.jpg') no-repeat 0px -216px;
padding-left:58px;
}
li.item3 a:hover {
background:url('csssprites.jpg') no-repeat 0px -270px;
color:#F3AE08;
}
li.item4 a  {
background:url('csssprites.jpg') no-repeat 0px -324px;
padding-left:58px;
}
li.item4 a:hover {
background:url('csssprites.jpg') no-repeat 0px -378px;
color:#F3AE08;
}

Voila!  Easy as 1, 2, 3.  I hope you enjoyed it and you learned from this quick tutorial.  Please comment if you have any questions! 

Sales & Marketing Technologies is Central Florida's most established Digital marketing and web development company. Contact us today to see how we can unlock your potential online.

Did you like this post?

Sign up for our Tips and Trends list and we'll let you know each week when we have a new one.

12 Ways to Get Your Business Growing Again

Categories

Web Design (15)
Web Development (20)
Misc. Website (18)
Search Engine Optimization (76)
Social Media Marketing (80)
Local Search Marketing (14)
Content Marketing (15)
PPC Advertising (14)
Digital Marketing (79)
Marketing Automation (10)
Sales Automation (8)
Company News (10)
Other (11)

Archives

Feeds




Get in touch
with us
Submit
... or call us at 407.682.2222
Sales & Marketing Technologies
© Copyright 2018 Sales & Marketing Technologies, Ltd. All rights reserved.