PDA

View Full Version : CSS sprite image cuts off after three sections


melissbrown
Feb 23rd, 2012, 05:58 PM
Hi,
I am trying to get this menu to show all of the links. The sprite image is 900 x122.
It is not showing all of the links, only the first three.

code below, any ideas please?
live link to how it is showing now:
http://foryoudeszines.com/Proofs_2012/AllIn/menu.htm



<html>
<head>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:61px;display:block;}

#home{left:0px;width:101px;}
#home{background:url('allin_menu.jpg') 0 0;}
#home a:hover{background: url('allin_menu.jpg') 0 -61px;}

#about{left:101px;width:88px;}
#about{background:url('allin_menu.jpg') -101px 0;}
#about a:hover{background: url('allin_menu.jpg') -101px -61px;}

#lessons{left:189px;width:88px;}
#lessons{background:url('allin_menu.jpg') -189px 0;}
#lessons a:hover{background: url('allin_menu.jpg') -189px -61px;}


#packages{left:277px;width:88px:}
#packages{background:url('allin_menu.jpg') -277px 0;}
#packages a:hover{background: url('allin_menu.jpg') -277px -61px;}

#clinics{left:365px;width:88px:}
#clinics{background:url('allin_menu.jpg') -365px 0;}
#clinics a:hover{background: url('allin_menu.jpg') -365px -61px;}

#specials{left:453px;width:88px:}
#specials{background:url('allin_menu.jpg') -453px 0;}
#specials a:hover{background: url('allin_menu.jpg') -453px -61px;}

#faqs{left:541px;width:85px:}
#faqs{background:url('allin_menu.jpg') -541px 0;}
#faqs a:hover{background: url('allin_menu.jpg') -541px -61px;}

#news{left:626px;width:86px:}
#news{background:url('allin_menu.jpg') -626px 0;}
#news a:hover{background: url('allin_menu.jpg') -626px -61px;}

#contact{left:712px;width:88px:}
#contact{background:url('allin_menu.jpg') -712px 0;}
#contact a:hover{background: url('allin_menu.jpg') -712px -61px;}

#checkout{left:800px;width:100px:}
#checkout{background:url('allin_menu.jpg') -800px 0;}
#checkout a:hover{background: url('allin_menu.jpg') -800px -61px;}



</style>
</head>

<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="about"><a href="css_intro.asp"></a></li>
<li id="lessons"><a href="css_syntax.asp"></a></li>
<li id="packages"><a href="test.com"></a></li>
<li id="clinics"><a href="test.com"></a></li>
<li id="specials"><a href="test.com"></a></li>
<li id="faqs"><a href="test.com"></a></li>
<li id="news"><a href="test.com"></a></li>
<li id="contact"><a href="test.com"></a></li>
<li id="checkout"><a href="test.com"></a></li>
</ul>
<p>&nbsp;</p>
</body>
</html>
trav5567
Feb 23rd, 2012, 06:45 PM
Try defining a width for you sprite image:)
melissbrown
Feb 23rd, 2012, 06:50 PM
I guess that is where I am lost..
I followed a tutorial to get this far , just using my images and links, as the tutorial had no width settings and I have tried putting in width settings , but regardless of where I place it, nada..

What would you suggest I add and to what part?
SB65
Feb 23rd, 2012, 06:54 PM
Um....


#navlist li {
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
/*position: absolute;
top: 0;*/
width: 88px;
}
melissbrown
Feb 23rd, 2012, 07:06 PM
Thank you! That did it, I appreciate your help very much.
trav5567
Feb 23rd, 2012, 08:07 PM
Sorry for leaving you hanging without posting an example.
I hate it when people do it to me.
glad you got it to work:)