473,397 Members | 1,950 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,397 software developers and data experts.

css problem with the scroll bar

hello guys,
i have problem in the scroll bar on my css code , i am trying to use that css menu from that link http://www.cssplay.co.uk/menus/slide_fly.html

it actually works very good but i want to use it on the right side from my site not in the left side so i edited the ccs code but the scroll bar didnt works really good ,it scroll so much on the left side ,
here is screen shot http://qbael.com/upload/mn/screen.JPG

and here is my full css and html code after the editing.


Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" xml:lang="en">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <title> Stu Nicholls | CSSplay | Vertical slide </title>
  8. <meta name="Author" content="Stu Nicholls" />
  9. <style type="text/css">
  10.  
  11.  
  12. #menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:right; height:360px; background:#000;}
  13. #menu ul {list-style-type:none; padding:0; margin:0;}
  14. #menu li {float:left; background:#fff url(slide/slide_0.gif) no-repeat;}
  15.  
  16. #menu li.sub {background:#fff url(slide/slide_0.gif) no-repeat;}
  17.  
  18. #menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
  19.  
  20. #menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
  21.  
  22. #menu ul,
  23. #menu :hover ul ul,
  24. #menu :hover ul :hover ul ul {position:absolute; right:-9999px; width:150px;}
  25.  
  26. #menu :hover {color:#ff0; background:#fff url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
  27.  
  28. #menu :hover > a {color:#ff0; background:#fff url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
  29.  
  30. #menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
  31. #menu :hover ul :hover ul,
  32. #menu :hover ul :hover ul :hover ul {display:block; position:absolute; right:130px; top:0; height:auto; z-index:500; border:1px solid #fff;}
  33.  
  34. #menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:right; text-indent:10px; }
  35. #menu :hover ul li.fly a {background: #383838 url(slide/arrow.gif) no-repeat 20px center;}
  36. #menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
  37. #menu a:hover ul li.fly a:hover {background:#255fa3 url(slide/arrow.gif) no-repeat 20px center; color:#ff0;}
  38. #menu :hover ul li.fly:hover > a {background:#255fa3 url(slide/arrow.gif) no-repeat 20px center; color:#ff0;}
  39.  
  40. #menu :hover ul :hover ul li,
  41. #menu :hover ul :hover ul li a
  42. {background:#666;}
  43. #menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}
  44.  
  45. #menu :hover ul :hover ul li.fly a {background: #626262 url(slide/arrow.gif) no-repeat 20px center;}
  46. #menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
  47. #menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(slide/arrow.gif) no-repeat 20px center; color:#ff0;}
  48. #menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(slide/arrow.gif) no-repeat 20px center; color:#ff0;}
  49.  
  50. #menu :hover ul :hover ul :hover ul li,
  51. #menu :hover ul :hover ul :hover ul li a {background:#tease.gif;}
  52.  
  53. #menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
  54. #menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
  55.  
  56. </style>
  57. </head>
  58.  
  59. <body>
  60. <ul id="menu">
  61. <li><a href="#nogo">Home</a></li>
  62. <li><a href="#nogo">Privacy Policy</a></li>
  63. <li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
  64.                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  65.                         <li><a href="#nogo">European</a></li>
  66.                         <li><a href="#nogo">Indian</a></li>
  67.                         <li><a href="#nogo">North Africa</a></li>
  68.                         <li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
  69.                                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  70.                                         <li><a href="#nogo">South American</a></li>
  71.                                         <li class="fly"><a href="#nogo">North American<!--[if gte IE 7]><!--></a><!--<![endif]-->
  72.                                                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  73.                                                         <li><a href="#nogo">Grey tree frog</a></li>
  74.                                                         <li><a href="#nogo">Green tree frog</a></li>
  75.                                                         <li><a href="#nogo">Spring peeper</a></li>
  76.                                                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  77.                                         </li>
  78.                                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  79.                         </li>
  80.                         <li><a href="#nogo">Japanese</a></li>
  81.                         <li><a href="#nogo">Chinese</a></li>
  82.                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  83. </li>
  84. <li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
  85.                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  86.                         <li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
  87.                                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  88.                                         <li><a href="#nogo">Cyclorana</a></li>
  89.                                         <li><a href="#nogo">Litoria</a></li>
  90.                                         <li><a href="#nogo">Nyctimystes</a></li>
  91.                                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  92.                         </li>
  93.                         <li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
  94.                                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  95.                                         <li><a href="#nogo">Agalychnis</a></li>
  96.                                         <li><a href="#nogo">Cruziohyla</a></li>
  97.                                         <li><a href="#nogo">Hylomantis</a></li>
  98.                                         <li><a href="#nogo">Pachymedusa</a></li>
  99.                                         <li><a href="#nogo">Phasmahyla</a></li>
  100.                                         <li><a href="#nogo">Phrynomedusa</a></li>
  101.                                         <li><a href="#nogo">Phyllomedusa</a></li>
  102.                                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  103.                         </li>
  104.                         <li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
  105.                                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  106.                                         <li><a href="#nogo">Cryptobatrachus</a></li>
  107.                                         <li><a href="#nogo">Flectonotus</a></li>
  108.                                         <li><a href="#nogo">Gastrotheca</a></li>
  109.                                         <li><a href="#nogo">Hemiphractus</a></li>
  110.                                         <li><a href="#nogo">Stefania</a></li>
  111.                                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  112.                         </li>
  113.                         <li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
  114.                                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  115.                                         <li><a href="#nogo">Acris</a></li>
  116.                                         <li><a href="#nogo">Anotheca</a></li>
  117.                                         <li><a href="#nogo">Bokermannohyla</a></li>
  118.                                         <li><a href="#nogo">Corythomantis</a></li>
  119.                                         <li><a href="#nogo">Ecnomiohyla</a></li>
  120.                                         <li><a href="#nogo">Hyloscirtus</a></li>
  121.                                         <li><a href="#nogo">Megastomatohyla</a></li>
  122.                                         <li><a href="#nogo">Osteocephalus</a></li>
  123.                                         <li><a href="#nogo">Pseudacris</a></li>
  124.                                         <li><a href="#nogo">Sphaenorhynchus</a></li>
  125.                                         <li><a href="#nogo">Trachycephalus</a></li>
  126.                                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  127.                         </li>
  128.                         <li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
  129.                                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  130.                                         <li><a href="#nogo">Boophis</a></li>
  131.                                         <li><a href="#nogo">Callixalus</a></li>
  132.                                         <li><a href="#nogo">Chiromantis</a></li>
  133.                                         <li><a href="#nogo">Cryptothylax</a></li>
  134.                                         <li><a href="#nogo">Mantidactylus</a></li>
  135.                                         <li><a href="#nogo">Rhacophorus</a></li>
  136.                                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  137.                         </li>
  138.                         <li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
  139.                                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  140.                                         <li><a href="#nogo">Buergeria</a></li>
  141.                                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  142.                         </li>
  143.                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  144. </li>
  145. <li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
  146.                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  147.                         <li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
  148.                         <li><a href="#nogo11">Encyclopedia</a></li>
  149.                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  150. </li>
  151. <li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
  152.                 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  153.                         <li><a href="#nogo">Complete treefrog</a></li>
  154.                         <li><a href="#nogo">Old World treefrogs</a></li>
  155.                         <li><a href="#nogo">Amphibian Species</a></li>
  156.                 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  157. </li>
  158. </ul>
  159.  
  160. </body>
  161. </html>
  162.  
  163.  
so please help me to fix it .

thanks
Nov 4 '08 #1
1 2269
David Laakso
397 Expert 256MB

so please help me to fix it .
So please provide a clickable link to it in your post. And someone may or may not have time to help you fix it.
Nov 5 '08 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

12
by: Arlie Rahn | last post by:
I would like to ad a custom scroll bar control to my app that has a customizable and "flat" look to it (not the normal VB look). Does anyone have any ideas on where to find a good one?
2
by: zwylle | last post by:
Hi all, to avoid a nervous breakdown I finally decided to seek help :D I have a table defined with plain color background and in some cells I show pictures to frame my site. The problem I...
2
by: Nishant | last post by:
I have a combo box with a horizontal scroll bar. (Used SetHorizontalExtent) The dropdown with horizontal scroll bar works fine when I have more items in the dropdown list. However when the...
25
by: Michael Schuerig | last post by:
I'm trying to do something seemingly very simple, but it's brought me close to crushing my head on the keyboard. All I want is a table where the head row is fixed and the body columns below are...
2
by: Jason Chu | last post by:
Simple compatibility question, I have this: <table height="100%" width="50%" border="1"> <tr height="50%"> <td> <asp:Panel id="Panel1" runat="server" Height="100%" Width="100%"...
2
by: Chris Calzaretta | last post by:
How would I go about getting windows display size for the scroll bar in all windows? Is it in the registery?? Thanks Chris
7
by: James | last post by:
Hi, I have a Windows Forms application which uses multiple child forms (MDI interface). The height of one of the child forms is larger than the height of the MDI client area, so when this...
6
by: =?Utf-8?B?U2hhcm9u?= | last post by:
I'm using the VScrollBar and set it as follow: m_vScrollBar.Minimum = -19602; m_vScrollBar.Maximum = 0; m_vScrollBar.SmallChange = 1; m_vScrollBar.LargeChange = 1089; m_vScrollBar.Value =...
0
by: hokeyplyr48 | last post by:
This is my first flash project and i've been doing it all of tutorials. working in Flash CS3 windows xp pro actionscript 2.0 the website can be found here:...
3
by: bgold12 | last post by:
How can I test if a vertical scroll bar is at the bottom of the range? I know that... document.getElementById('mydiv').scrollHeight ....returns the range, and... ...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.