SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Hybrid View
-
Jun 21, 2006, 21:02 #1
- 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
-
Jun 21, 2006, 21:19 #2
- 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.
-
Jun 21, 2006, 22:42 #3
- 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
-
Jun 21, 2006, 23:28 #4
- 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;}
-
Jun 21, 2006, 23:37 #5
- 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.
-
Jun 21, 2006, 23:53 #6
- 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
-
Jun 22, 2006, 03:35 #7
- 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/
-
Jun 22, 2006, 04:40 #8
Bookmarks