Jump to content

please help we with CSS sprite menu!


SirLindleywood
 Share

Recommended Posts

I am trying to create a sprite menu bar with this image:http://smftutorials.com/testing/phpUpdate/...Menu-sprite.pngAll the files are in this directory:http://smftutorials.com/testing/phpUpdate/I dont know what I am doing wrong and this is driving me CRAZY! after reading every tutorial on the net I could find on the first 10pages of google Im still confused!thank you in advance!

Link to comment
Share on other sites

how about some code or a live link to the actual page in question?
no problem!Here is the code:
#mainMenu {	overflow:hidden; /* wrap floats */	height:35px; /* trip haslayout, wrap floats IE */	list-style:none;	text-transform:uppercase;	font:24px/55px arial,helvetica,sans-serif;}#mainMenu li {	display:inline; /* don't even waste time trying to do more with these */}#mainMenu a {	position:relative;	float:left;	display:inline; /* fix IE float oddities */	overflow:hidden;	height:55px;	text-align:center;	text-decoration:none;	color:#FFF;	background:#F80;}#mainMenu a:active,#mainMenu a:focus,#mainMenu a:hover {	background:#18F;}#mainMenu .home a {	width:91px;}#mainMenu .soap a {	width:65px;}#mainMenu .candles a {	width:95px;}#mainMenu .bath-body a {	width:140px;	}#mainMenu .forum-tips {	width:129px;	}#mainMenu .faq a {	width:61px;	}#mainMenu .links a {	width:100px;	}#mainMenu .forum a {	width:100px;	margin-right:-8px; /* prevent IE from incorrectly wrapping these */}#mainMenu a span {	position:absolute;	top:0;	left:0;	width:751px;	height:67px;	background:url(images/mainMenu-sprite.png) 0 0 no-repeat;}#mainMenu a:active span,#mainMenu a:focus span,#mainMenu a:hover span {	top:-56px;	display:inline; /* IE7 won't render state change without display status change */}#mainMenu .homea span {	background-position:-56px 0;}#mainMenu .soap a span {	background-position:-91px 0;}#mainMenu .candles a span {	background-position:-156px 0;}#mainMenu .bath-body a span {	background-position:-251px 0;}#mainMenu .forum-tips a span {	background-position:-391px 0;}#mainMenu .faq a span {	background-position:-520px 0;}#mainMenu .links a span {	background-position:-581px 0;}#mainMenu .forum a span {	background-position:-651px 0;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta	http-equiv="Content-Type"	content="text/html; charset=utf-8"/><meta	http-equiv="Content-Language"	content="English"/><meta	name="description"	content="#######"/><meta	name="keywords"	content="######7 Keywords#######"/><link	rel="shortcut icon"	href="http://www.smftutorials.com/favicon.ico"/><link	type="text/css"	rel="stylesheet"	href="screen.css"	media="screen,projection,tv"/><!--	Don't forget to implement these later!<link	type="text/css"	rel="stylesheet"	href="print.css"	media="print"/><link	type="text/css"	rel="stylesheet"	href="handheld.css"	media="handheld"/>--><title>My New Page</title></head><body><div id="wrap"><div id="banner"></div><ul id="mainMenu"> 		<li class="home"> 			<a href="/" class="home">Home<span></span></a> 		</li> 		<li class="soap"> 			<a href="#">Soap<span></span></a> 		</li> 		<li class="candles"> 			<a href="#">candles<span></span></a> 		</li> 		<li class="bath-body"> 			<a href="#">Bath & Body<span></span></a> 		</li> 		<li class="forum-tips"> 			<a href="#">Forum Tips<span></span></a> 		</li> 		<li class="faq"> 			<a href="#">FAQ<span></span></a> 		</li> 		<li class="links"> 			<a href="#">Links<span></span></a> 		</li> 		<li class="forum"> 			<a href="#">Forum<span></span></a> 		</li> <!-- #mainMenu --></ul><hr /> <div id="lnav"></div><div id="content"></div><div id="rnav"></div><div id="footer"></div></div></body></html>

Live links:The image I want to use as sprite:http://www.smftutorials.com/testing/phpUpd...Menu-sprite.pngthe page:http://www.smftutorials.com/testing/phpUpdate/menu.htmlI want to create something like this menu found here:http://www.cutcodedown.com/for_others/MrMoolah/template.htmlhttp://www.cutcodedown.com/for_others/MrMoolah/Thank you for helping!

Edited by SirLindleywood
Link to comment
Share on other sites

Your stylesheet is sprite.css and you are linking to screen.css.Also, when the correct style is applied you get weird behaviour on hover because you set 'top' as too low (-56px where -32px would be just right).And forum-tips is too wide.

Link to comment
Share on other sites

The span elements you're trying to set the background on are inline elements. Inline elements adjust their width to fit the text/content inside them. Since your spans have no content, they don't have a width either. Try setting their display to block.You might also be able to just remove the spans altogether and set the background images on the anchors (the <a> tags) instead.

Link to comment
Share on other sites

The spans are used instead of the anchors, to force a overlap of the anchor text, the use of position: absolute with define width, and height produces the same result as using display block for the span elements.you just have to zero padding: margin: text-indent: on ul li elements then sort out the correct width, height and top properties on hover to get the desired effect.

#mainMenu, #mainMenu ul, #mainMenu li {list-style-type:none; text-indent:0; margin:0; padding:0;}#mainMenu {	overflow:hidden; /* wrap floats */	height:34px; /* trip haslayout, wrap floats IE */	list-style:none;	text-transform:uppercase;	font:18px arial,helvetica,sans-serif;}#mainMenu li {	display:inline; /* don't even waste time trying to do more with these */}#mainMenu a {	position:relative;	float:left;	display:inline; /* fix IE float oddities */	overflow:hidden;	height:34px;	text-align:center;	text-decoration:none;	color:#FFF;	/*background:#F80;*/}/*#mainMenu a:active,#mainMenu a:focus,#mainMenu a:hover {	background:#18F;}*/#mainMenu .home a {	width:91px;}#mainMenu .soap a {	width:65px;}#mainMenu .candles a {	width:95px;}#mainMenu .bath-body a {	width:140px;	}#mainMenu .forum-tips {	width:129px;	}#mainMenu .faq a {	width:61px;	}#mainMenu .links a {	width:70px;	}#mainMenu .forum a {	width:100px;	 /*margin-right:-8px; prevent IE from incorrectly wrapping these */}#mainMenu a span {	position:absolute;	top:0;	left:0;	width:751px;	height:67px;	background:url(images/mainMenu-sprite.png) 0 0 no-repeat;}#mainMenu a:active span,#mainMenu a:focus span,#mainMenu a:hover span {	top:-33px;	display:inline; /* IE7 won't render state change without display status change */}#mainMenu .home a span {	background-position: 0 0;}#mainMenu .soap a span {	background-position:-91px 0;}#mainMenu .candles a span {	background-position:-156px 0;}#mainMenu .bath-body a span {	background-position:-251px 0;}#mainMenu .forum-tips a span {	background-position:-391px 0;}#mainMenu .faq a span {	background-position:-520px 0;}#mainMenu .links a span {	background-position:-581px 0;}#mainMenu .forum a span {	background-position:-651px 0;}

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...