Vertical Sliding Doors Sprite Menu

**mitcho** · Jun 21, 2006, 20:02

Hi,

i have given the vertical sliding doors a crack here http://www.mitchellpage.com.au/temp/style/ but it doesnt seem to work at all. i followed the 'a list apart' horizontal sprite sliding door tute (http://www.alistapart.com/articles/sprites/) and modified it for vertical but ive done something wrong. can anyone spot why this doesnt work. zip here (http://www.mitchellpage.com.au/temp/style/testr.zip)

thanks

**Tyssen** · Jun 21, 2006, 20:19

#skyline should only be 200px so it doesn't show both states of the image and you've got one too many values for your background-position: you've got three and there should only be two for horizontal (first) and vertical.

**mitcho** · Jun 21, 2006, 21:42

Ok ive made those changes.

stil some problems, it doesnt register the individual buttons, only one big button.

Links same as above

**Tyssen** · Jun 21, 2006, 22:28

This is only tested in FF:

Code:

 
 #skyline {
 width: 200px; height: 266px;
 background: url(images/main_nav.gif);
 margin: 10px auto; padding: 0;
 position: relative;
 }
 #skyline li {
 margin: 0; 
 padding: 0; 
 list-style: none;
 }
 #skyline a { 
 width: 200px; 
 position: absolute; 
 left: 0; 
 display: block;
 }
 
   #panel1b a { top: 0; height: 28px; }
   #panel2b a {top: 28px; height: 54px; }
   #panel3b a {top: 82px; height: 43px; }
   #panel4b a {top: 125px; height: 58px; }
   #panel5b a {top: 183px; height: 52px; }
   #panel6b a {top: 235px; height: 31px; }
   
   /* left top right bottom*/
    #panel1b a:hover {
 	background: transparent url(images/main_nav.gif) -200px 0 no-repeat;}
   #panel2b a:hover {
 	background: transparent url(images/main_nav.gif) -200px -28px no-repeat;}
   #panel3b a:hover {
 	background: transparent url(images/main_nav.gif) -200px -82px no-repeat;}
   #panel4b a:hover {
 	background: transparent url(images/main_nav.gif) -200px -125px no-repeat;}
 	 #panel5b a:hover {
 	background: transparent url(images/main_nav.gif) -200px -183px no-repeat;}
 	 #panel6b a:hover {
 	background: transparent url(images/main_nav.gif) -200px -235px no-repeat;}