Comments on: Image Sprite Navigation With CSS

By: RizoRex

RizoRex — Sun, 15 Jan 2012 12:51:47 +0000

This tutorial was posted back in 2007 and it is still applicable to this day. Thank you Mr. Mr. Alex Hackbart your tutorial is so awesome that I was able to use it on my Footer Navigation thereby saving me some Javascript on my website. Your method wasn’t even mentioned in my book “Web Design All in One for Dummies. Long live to you sir.

By: nicky

nicky — Sun, 11 Dec 2011 17:41:37 +0000

i learned alot about working with sprites reading this great tutorial , thanks

By: Oslei

Oslei — Sat, 12 Nov 2011 00:22:02 +0000

Great , just great !!!
Thanks for this tutorial. Works like a charm in Firefox.

By: victoriano2010

victoriano2010 — Thu, 10 Nov 2011 00:51:00 +0000

It was good and I got to know few good things.

By: Crumbz

Crumbz — Wed, 28 Sep 2011 19:32:16 +0000

I am having a little trouble getting this to work… I am doing a variation of the tutorial using four smal images that change positions only on the y axis.
Here’s my HTML:

ABOUT
RESOURCES
AREAS OF PRACTICE
CONTACT

and Heres my css:
@charset “UTF-8″;
/* CSS Document */

#navigation {
margin: 0px;
padding: 0px;
height: 40px;
width: 1024px;
list-style-type: none;
}
#navigationli, #about {
height: 40px;
width:256px;
display: inline;
background-image:url(../images/spritenavigation_01.gif);

}
#navigationli, #resources {
height: 40px;
width:256px;
display: inline;
background-image:url(../images/spritenavigation_02.gif);
}

#navigationli, #areasofpractice {
height: 40px;
width:256px;
display: inline;
background-image:url(../images/spritenavigation_03.gif);
}

#navigationli, #contact {
height: 40px;
width:256px;
display: inline;
background-image:url(../images/spritenavigation_04.gif)
}

#navigation li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
#contact li a:hover {
background-image: url(../images/spritenavigation_04.gif);
background-position: 0px +40px;
}

By: Pranjal

Pranjal — Fri, 23 Sep 2011 21:48:39 +0000

Can someone share a link with more details to integrate it with WordPress?

By: Pranjal

Pranjal — Fri, 23 Sep 2011 21:46:07 +0000

Now i can say what is CSS sprite and how to use it…thanks for sharing

By: faysy

faysy — Wed, 21 Sep 2011 23:14:59 +0000

Really awesome… helped a lot..thanx man!!!

By: atw3

atw3 — Fri, 09 Sep 2011 09:54:14 +0000

NEED FREE WEB HOSTING…?

Get Free Web Hostings at http://atw3.com/

By: atw3

atw3 — Fri, 09 Sep 2011 09:53:41 +0000

Get Free Web Hostings at http://atw3.com/