Foros del Web » Creando para Internet » CSS »

Barra de scroll dinámica [SOLUCIONADO]

 Estas en el tema de Barra de scroll dinámica [SOLUCIONADO] en el foro de CSS en Foros del Web. Hola, buenos días. Os pongo en situación. Tengo que conseguir el siguiente efecto: dado un marco dónde existen dos bloques encapsuladores, insertar tres bloques nuevos ...
  #1 (permalink)  
Antiguo 10/08/2012, 02:06
 
Fecha de Ingreso: junio-2008
Ubicación: Madrid
Mensajes: 73
Antigüedad: 16 años, 5 meses
Puntos: 1
Barra de scroll dinámica [SOLUCIONADO]
Hola, buenos días.

Os pongo en situación.
Tengo que conseguir el siguiente efecto: dado un marco dónde existen dos bloques encapsuladores, insertar tres bloques nuevos flotando a izquierdas, y al reducir la ventana de tamaño, que aparezca la barra de desplazamiento horizontal sin que los bloques flotantes cambien su posición.

Llevo varios días con este problema, y sin solución. Creo que no se puede hacer de esta forma, pero antes de darlo por imposible y remitirme al cliente para poder cambiar la estructura HTML quería buscar si alguien sabe como solucionar este evento.

Los códigos que tengo son:

HTML (pasará a ser un XHTML)
Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>test</title>
  5.   
  6.     <link rel="stylesheet" type="text/css" href="style.css">
  7.   
  8.   </head>
  9.   <body>
  10.  
  11.     <div id="wrapper">
  12.      <div id="scroll">
  13.         <a href="#" class="link_w_img"></a>
  14.         <a href="#" class="link_w_img"></a>
  15.         <a href="#" class="link_w_img"></a>
  16.         <div id="dClear"></div>
  17.      </div>
  18.     </div>
  19.  
  20.   </body>
  21. </html>

CSS
Código CSS: 
Ver original
  1. #wrapper
  2. {
  3.    width: 100%;
  4.    overflow: hidden;
  5. }
  6.  
  7. #scroll
  8. {
  9.   overflow-x: auto;
  10.   width: 100%;
  11.   display: inline;
  12. }
  13.  
  14. #dClear
  15. {
  16.   clear: both;
  17.   width: 100%;
  18. }
  19.  
  20. .link_w_img
  21. {
  22.    background: url('01.JPG') no-repeat;
  23.    margin-left: 2px;
  24.    width: 40px;
  25.    height: 40px;
  26.    float: left;
  27. }

Por si no queda claro el objetivo de mi problema.
Al hacer "float: left;" todos los bloques internos (<a ...></a>), cuándo cambio el tamaño del explorador, estos bloques ocupan ancho y alto del contenedor "scroll" posicionándose y apilándose de izquierda arriba a derecha abajo.
Yo lo que pretendo es que no se "auto-ajusten" y siempre se queden en línea.

PD: he cambiado el comportamiento "display" del contenedor "scroll", pero sigue sin funcionar.

_actualización 01 :: explicación + pd
_actualización 02 :: nuevo código
_actualización 03 :: solucionado :: ver respuesta
Última edición por Wolfchamane; 10/08/2012 a las 04:12 Razón: _actualización 02
  #2 (permalink)  
Antiguo 10/08/2012, 04:13
 
Fecha de Ingreso: junio-2008
Ubicación: Madrid
Mensajes: 73
Antigüedad: 16 años, 5 meses
Puntos: 1
Respuesta: Barra de scroll dinámica
Ya tengo solucionado mi problema.
He aquí el código:

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>test</title>
  5.   
  6.     <link rel="stylesheet" type="text/css" href="style.css">
  7.   
  8.   </head>
  9.   <body>
  10.  
  11.     <div id="wrapper">
  12.      
  13.         <!-- incluyo muchos enlaces para provocar el efecto al cambiar el tamaño -->
  14.         <a id="link01" class="link_w_img"></a>
  15.         <a id="link02" class="link_w_img"></a>
  16.         <a id="link03" class="link_w_img"></a>
  17.         <a id="link04" class="link_w_img"></a>
  18.         <a id="link05" class="link_w_img"></a>
  19.         <a id="link06" class="link_w_img"></a>
  20.         <a id="link07" class="link_w_img"></a>
  21.         <a id="link08" class="link_w_img"></a>
  22.         <a id="link09" class="link_w_img"></a>
  23.         <a id="link10" class="link_w_img"></a>
  24.         <a id="link11" class="link_w_img"></a>
  25.         <a id="link12" class="link_w_img"></a>
  26.         
  27.         <a id="link13" class="link_w_img"></a>
  28.         <a id="link14" class="link_w_img"></a>
  29.         <a id="link15" class="link_w_img"></a>
  30.         <a id="link16" class="link_w_img"></a>
  31.         <a id="link17" class="link_w_img"></a>
  32.         <a id="link18" class="link_w_img"></a>
  33.         <a id="link19" class="link_w_img"></a>
  34.         <a id="link20" class="link_w_img"></a>
  35.         <a id="link21" class="link_w_img"></a>
  36.         <a id="link22" class="link_w_img"></a>
  37.  
  38.         <div id="clear"></div>
  39.     </div>
  40.  
  41.   </body>
  42. </html>

Código CSS: 
Ver original
  1. #wrapper
  2. {
  3.    /* el div wrapper ha de tener un tamaño fijo */
  4.    width: 1000px; 
  5.    height: 50px;
  6.    display: inline-block;
  7.    overflow: auto;
  8. }
  9.  
  10. #clear
  11. {
  12.   clear: both;
  13.   width: 100%;
  14. }
  15.  
  16. .link_w_img
  17. {
  18.    background: url('01.JPG') no-repeat;
  19.    margin-left: 2px;
  20.    width: 40px;
  21.    height: 40px;
  22.    float: left;
  23.    cursor: pointer;
  24. }
Última edición por Wolfchamane; 10/08/2012 a las 05:19
  #3 (permalink)  
Antiguo 10/08/2012, 05:26
 
Fecha de Ingreso: junio-2008
Ubicación: Madrid
Mensajes: 73
Antigüedad: 16 años, 5 meses
Puntos: 1
Pregunta Respuesta: Barra de scroll dinámica [SOLUCIONADO]
Ahora se me presenta un segundo problema.
Os he puesto unas capturas para poder entenderlo mejor.




Intento configurar las barras de desplazamiento con el siguiente estilo, pero no funciona:
Código CSS: 
Ver original
  1. clase
  2. {
  3.    overflow-y: hidden;
  4.    overflow-x: auto;
  5. }

Al final sólo me interesa mantener la barra de desplazamiento horizontal.
¿Alguna idea?
¿Sólo podría hacerse con JS o jQuery?
  #4 (permalink)  
Antiguo 10/08/2012, 06:29
 
Fecha de Ingreso: junio-2008
Ubicación: Madrid
Mensajes: 73
Antigüedad: 16 años, 5 meses
Puntos: 1
De acuerdo Respuesta: Barra de scroll dinámica [SOLUCIONADO]
SOLUCIÓN FINAL

Aquí los códigos de la plantilla que da solución a este "dilema".

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>test wTable</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css" />
  6.   </head>
  7.   <body>
  8.     <div id="container">
  9.       <table id="tablaDatos">
  10.         <tbody>
  11.           <tr>
  12.             <td class="data">celda 1</td>
  13.             <td class="data">celda 2</td>
  14.             <td class="data">celda 3</td>
  15.             <td class="actions">                                      
  16.               <div id="wrapper">
  17.                 <a id="link_00" class="link_w_img"></a>
  18.                 <a id="link_01" class="link_w_img"></a>
  19.                 <a id="link_02" class="link_w_img"></a>
  20.                 <div id="clear"></div>
  21.               </div>                
  22.             </td>
  23.           </tr>
  24.         </tbody>
  25.       </table>
  26.     </div>
  27.   </body>
  28. </html>

Código CSS: 
Ver original
  1. #tablaDatos
  2. {
  3.   width: 100%;
  4. }
  5.  
  6. #tablaDatos tr td
  7. {
  8.   border: 1px solid #000000;
  9.   min-width: 40px;
  10.   min-height: 40px;
  11.   max-width: 25%;
  12.   max-height: 40px; 
  13. }
  14.  
  15. #container
  16. {
  17.   width: 100%;
  18.   height: 50%;
  19. }
  20.  
  21. #wrapper
  22. {
  23.    /* el div wrapper ha de tener un tamaño fijo */
  24.    width: 100%;
  25.    min-width: 126px;
  26.    max-width: 126px;                                  
  27.    height: 100%;
  28.    
  29.    border: 1px solid #FFFFFF;
  30.    border-collapse: collapse;
  31.    
  32.    position: relative;
  33.    left: 0px;
  34.    top: 0px;   
  35. }
  36.  
  37. #clear
  38. {
  39.   clear: left;
  40. }
  41.  
  42. .link_w_img
  43. {
  44.    background: url('../01.JPG') no-repeat;
  45.    margin-left: 2px;
  46.    width: 40px;
  47.    height: 40px;
  48.    float: left;
  49.    cursor: pointer;
  50. }
  51.  
  52. .actions
  53. {
  54.   text-align: left;
  55.   
  56.   overflow: auto; 
  57.   overflow-y: hidden;
  58.   
  59.   display: block; 
  60. }
  61.  
  62. .data
  63. {
  64.   text-align: center;
  65. }

Saludos!

Etiquetas: divs, scroll
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:25.