SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Sliding Doors Sprite Menu

    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

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #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.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok ive made those changes.

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

    Links same as above

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;}

  5. #5
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes appears to work excellent in FF,

    Is it too much to ask why it doesnt work in IE? the last 4 buttons work in IE but the first 2 dont.

  6. #6
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed it. its working now in both. ive updated into into proper layout! thanks

  7. #7
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can i get it so the text doesnt appear over the buttons - see http://www.mitchellpage.com.au/temp/style/

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •