Jump to content

CSS Sprite Menu


Susie

Recommended Posts

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.

 

:)

nav.png

Edited by Susie
Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...