Tema: problemas con direction: rtl en Google chrome
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 11/10/2011, 18:03
XtremeBook
 
Fecha de Ingreso: julio-2010
Mensajes: 90
Antigüedad: 14 años, 6 meses
Puntos: 0
Pregunta Respuesta: problemas con direction: rtl en Google chrome
no amigo no funciona aqui te dejo el codigo lo que quiero es que el menu se desplegue hacia la izquierda en Google chrome en el resto de los navegadores funciona OPERA, INTERNET EXPLORER, FIREFOX

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. #top-bar-bg{
  5.         position: absolute;
  6.         margin-top: -8px;
  7.         margin-left: -8px;
  8.         margin-right: -13px;
  9.         background-color:#96CE42;
  10.         height: 40px;
  11.         width: 100%;
  12.         box-shadow: 2px 2px 5px #999;       
  13. }
  14.  
  15. #top-bar-log{
  16.         float:left;
  17.         position: absolute;
  18.         margin-top: 0px;
  19.         margin-left:20px;
  20.         padding-right:17px;
  21.         background-image:url(../../images/top-bar/log-top-bar.png);
  22.         background-repeat:no-repeat;
  23.         width: 158px;
  24.         height: 40px;   
  25. }
  26.  
  27. #top-bar-log:hover{
  28.         background-color:#AAEA71;
  29.         
  30. }
  31.  
  32. #top-bar-menu{
  33.         position: relative;
  34.         float:right;
  35.         margin-top: 0px;
  36.         margin-right:20px;
  37.         width: 700px;
  38.         height: 40px;           
  39. }
  40.  
  41.  
  42. #down-arrow{
  43.         position: relative;
  44.         float:right;
  45.         margin-top: 8px;
  46.         margin-right:-10px;
  47.         width:7px;
  48.         height:4px;
  49.         background-image:url(../../images/top-bar/down-arrow.gif);
  50. }
  51.  
  52.  
  53. #down-arrow-log{
  54.         position: relative;
  55.         float:right;
  56.         margin-top: 13px;
  57.         margin-right:-17px;
  58.         width:13px;
  59.         height:13px;
  60.         background-image:url(../../images/top-bar/down-arrow-log.gif);
  61. }
  62.  
  63. #menu-wrapper ul{
  64.         
  65.         padding:0;
  66.         list-style:none;    
  67.         margin-top:0px;
  68.         float:right;
  69.         overflow:auto;
  70.         direction:rtl;      
  71. }
  72.  
  73. #hmenu > li{
  74.         display:inline-block;
  75.         font-family:Myriad pro,Verdana, Geneva, sans-serif;
  76.         text-align:center;
  77.         height:40px;    
  78.         padding-left:5px;
  79.         padding-right:5px;
  80.         margin-right:5px;
  81.         cursor:pointer;
  82. }
  83.  
  84. #hmenu > li:hover{
  85.         background-color:#AAEA71;   
  86.     }
  87.     
  88. #hmenu > li:active{
  89.         background-color:#AAEA71;   
  90.     
  91.     }
  92.     
  93.     #hmenu > li:focus{
  94.         background-color:#AAEA71;   
  95.     
  96.     }
  97.  
  98.  
  99. #hmenu > li > a{
  100.         display:block;  
  101.         padding: 10px 5px;
  102.         padding-left:5px;
  103.         padding-right:5px;
  104.         width: auto;
  105.         text-decoration:none;
  106.         color:#FFF;
  107.         font-size:15px;
  108.         direction:ltr;
  109. }
  110.  
  111. li ul{
  112.         position:absolute;
  113.         display:none;       
  114. }
  115.  
  116. .sub-menu a{
  117.         display:block;
  118.         visibility:visible;
  119.         padding:10px 5px;
  120.         width:130px;
  121.         color:#FFF;
  122.         text-decoration:none;
  123.         text-align:right;
  124.         padding-left:10px;
  125.         font-size:15px;
  126.         direction:ltr;
  127.         margin-right:0px;       
  128. }
  129.  
  130. .sub-menu{
  131.  
  132.         margin-right:-5px;          
  133. }
  134.  
  135. .sub-menu a:hover{
  136.     
  137.         background-color:#96CE42;   
  138. }
  139.  
  140. #menu-wrapper li ul{
  141.         background-color:#AAEA71;
  142.         
  143.                         
  144. }
  145.  
  146. #menu-wrapper ul li:focus ul, #menu-wrapper ul li:active ul  {
  147.         background-color:#AAEA71;
  148.         display: block;                 
  149. }



Código HTML: 
Ver original
  1. <div id="top-bar-menu">
  2.  
  3.     <div id="menu-wrapper">
  4.  
  5.         <ul id="hmenu">
  6.  
  7.           <li tabindex="1"><a>Inicia&nbsp;Sesión
  8.           <div id="down-arrow">
  9.              </div>
  10.           </a>
  11.           
  12.                 <ul class="sub-menu">
  13.             
  14.                     <li><a href="#">prueba!</a></li>
  15.                     <li><a href="#">probandito</a></li>
  16.                     
  17.                     </ul>
  18.                 </li>
  19.         
  20.           <li tabindex="2"><a>¡Regístrate!
  21.           <div id="down-arrow">
  22.              </div>
  23.           </a>
  24.              
  25.              
  26.                 <ul class="sub-menu">
  27.             
  28.                     <li><a href="#">prueba!</a></li>
  29.                     <li><a href="#">probandito</a></li>
  30.                     
  31.                     </ul>
  32.                 </li>
  33.                 
  34.                 
  35.                 <li><a>Videotutoriales</a></li>
  36.         
  37.                 <li><a>Artículos</a></li>
  38.         
  39.                 <li><a>Noticias </a></li>
  40.         
  41.                 <li><a>Inicio </a></li>
  42. </ul>
  43. </div>