Comments on: Image Sprite Navigation With CSS

By: Leo

Leo — Wed, 16 May 2012 13:52:56 +0000

Hey, thanks for this awesome little tutorial. Now, I am running into a bit of a problem when I want it to automatically scale to the web browser window size: I can’t get it to work! Does anyone have any idea on how this could be solved in a good way? Code below:

@charset “UTF-8″;

img {
max-width:100%;
}

#nav {
background:url(“images/navbar.png”) no-repeat;
/*background-size: 100%;*/
max-width:100%;
height:100px;
margin:0;
padding:0;
}

#nav span {
display:none;
}

#nav li, #nav a {
height:87px;
display:block;
}

#nav li {
float:left;
list-style:none;
display:inline;
}

/*#nav-01 {width:16%;}
#nav-02 {width:17%;}
#nav-03 {width:18%;}
#nav-04 {width:18%;}
#nav-05 {width:17%;}
#nav-06 {width:14%;}*/

#nav-01 {width:306px;}
#nav-02 {width:322px;}
#nav-03 {width:343px;}
#nav-04 {width:343px;}
#nav-05 {width:318px;}
#nav-06 {width:267px;}

#nav-01 a:hover {background:url(“images/navbar.png”) 0px -97px no-repeat;}
#nav-02 a:hover {background:url(“images/navbar.png”) -306px -97px no-repeat;}
#nav-03 a:hover {background:url(“images/navbar.png”) -628px -97px no-repeat;}
#nav-04 a:hover {background:url(“images/navbar.png”) -971px -97px no-repeat;}
#nav-05 a:hover {background:url(“images/navbar.png”) -1314px -97px no-repeat;}
#nav-06 a:hover {background:url(“images/navbar.png”) -1632px -97px no-repeat;}

/*#nav-01 a:hover {background:url(“images/navbar.png”) 0px -97px no-repeat;}
#nav-02 a:hover {background:url(“images/navbar.png”) -16% -97px no-repeat;}
#nav-03 a:hover {background:url(“images/navbar.png”) -33% -97px no-repeat;}
#nav-04 a:hover {background:url(“images/navbar.png”) -51% -97px no-repeat;}
#nav-05 a:hover {background:url(“images/navbar.png”) -69% -97px no-repeat;}
#nav-06 a:hover {background:url(“images/navbar.png”) -86% -97px no-repeat;}*/

#banner {
max-width:100%;
}

#wrapper {
max-width:100%;
}

By: jayendra

jayendra — Wed, 25 Apr 2012 09:14:19 +0000

Great tutorial. Now, I can use image spirit in my website.

Thanks

By: DesignElixir

DesignElixir — Sat, 03 Mar 2012 17:44:40 +0000

Great tutorial Alex! I was able to implement CSS Sprites for my menu bar following your tutorial and modifying it a bit – I created a widget box for the menu bar. However, I have a small issue- there is a small sliver of the hover image appearing at the top of my sprite menu bar and I can’t get rid of it. I have tried messing with margins, padding, and display block heights but it is still there. Would you mind cruising over to my site and giving me ideas on how to fix it? I have been at it for a while and just cant figure it out/ I kept the sprite names nav-example and the widget is HTML5. Any help is appreciated!

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