CSS Sprite Menu

[Susie]

Is there anyone here that is good with CSS sprite menus? I need help with one (I've never done one before). I may even just want to hire it done, so if any of the regulars are free today, let me know. I don't really have time to deal with it today because I have to go with my mom to her first chemo treatment today.

 

Anyway, I've attached the menu image and here is what I have so far: http://tinyurl.com/29wlcbb . I'm not doing so well here.

 

Edited August 2, 2010 by Susie

[Wickham]

I can see your problem. The sprite image is 990px wide; so if you make your ul tag 990px wide all you need is the -47px vertical background position and a suitable width for each item. The sprite works well in the vertical direction.

 

You seem to be trying to squeeze them up so that they are closer together, but when you do that for one item with a negative left position, all the others move along so you see bits twice or missed out, so you will just have to fiddle with the offsets until you get it right.

 

This uses the full 990px width and notice that the total widths add up to 990px and if you drag you mouse along the menu, the sprite changes at the half way point between each menu item:-

 

ul#nav {   background-image: url(images/nav.png);
position: relative; 
width: 1036px; 
list-style: none;
margin: 0 auto;
z-index: 100;
}

ul#nav li { display: inline; }

ul#nav li a {
display: block; float: left; height: 47px;
background-image: url(images/nav.png); text-indent: -9999px;
}

ul#nav li a.home {
	width: 100px; background-position: 0 0;	
}

ul#nav li a.menu {
	width: 120px; background-position: -100px 0;/*-110px 

0;*/	
}

ul#nav li a.franchise-info {
	width: 210px; background-position: -220px 0;/*-204px 

0;*/	
}

ul#nav li a.locations {
	width: 140px; background-position: -430px 0;/*-301px 

0;*/	
}

ul#nav li a.company {
	width: 150px; background-position: -570px 0;	
}

ul#nav li a.coupons {
	width: 130px; background-position: -720px 0;
}

ul#nav li a.contact-us {
	width: 140px; background-position: -850px 0;
} /*the offset plus its own width of 140px = 990px*/

ul#nav li a.home:hover, ul#nav li a.home:focus { 
	background-position: 0 -47px; 
}

ul#nav li a.menu:hover, ul#nav li a.menu:focus {
	background-position: -100px -47px;	
}

ul#nav li a.franchise-info:hover, ul#nav li a.franchise-info:focus {
	background-position: -220px -47px;	
}

ul#nav li a.locations:hover, ul#nav li a.locations:focus {
	background-position: -430px -47px;/*-301px -47px;	

*/
}

ul#nav li a.company:hover, ul#nav li a.company:focus {
	background-position: -570px -47px;	
}

ul#nav li a.coupons:hover, ul#nav li a.coupons:focus {
	background-position: -720px -47px;	
}

ul#nav li a.contact-us:hover, ul#nav li a.contact-us:focus {
	background-position: -850px -47px;	
}

 

Or split the sprite into individual sprites.

Edited August 2, 2010 by Wickham

[PicnicTutorials]

Here is my code http://www.visibilityinherit.com/code/sprites.php

[virtual]

I have PM'd you the css.

Edited August 2, 2010 by virtual

[administrator]

Susie,

 

PM me and I will create a Killersites University account for you ... we have a video course on creating CSS sprites in there - source files included.

 

I don't really have time to deal with it today because I have to go with my mom to her first chemo treatment today.

 

Sorry to hear that she is not feeling well. I once had to deal with serious illness and was able to beat it by eating well, staying relaxed and generally leading a stress free, well rested lifestyle. Remember that stress has a HUGE impact on recovery.

 

... Chinese herbs helped a lot too.

 

Stefan

[Susie]

Thanks for your help, everyone. I really appreciate it. I'll keep you posted on my progress.

 

Stef, I already have a KU account, so I'll take a look at the videos when I get a moment. Thanks!

 

And thanks for your thoughts about my mom. My mom was just diagnosed with lung cancer on July 16th and it's been a whirlwind of doctor appointments, a hospitalization, etc. since then. I've been helping her a lot during the days, so needless to say, I'm a bit behind on my work. Her first chemo went well today (as well as these things can go).

 

Anyway, sorry to ramble. I seem to be doing that a lot lately (in real life).

 

Thanks again, everyone.

[administrator]

Ok then.

 

Stefan