Foros del Web » Creando para Internet » CSS »

Scrooll (overflow: auto) no me funciona correctamente

Estas en el tema de Scrooll (overflow: auto) no me funciona correctamente en el foro de CSS en Foros del Web. Hola a todos los foreros, Quiero hacer una especie de datagrid pero solo con CSS. He creado el siguiente código HTML para crear la "tabla" ...
  #1 (permalink)  
Antiguo 05/03/2010, 03:44
Avatar de danideu  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 212
Antigüedad: 12 años, 9 meses
Puntos: 5
Pregunta Scrooll (overflow: auto) no me funciona correctamente

Hola a todos los foreros,

Quiero hacer una especie de datagrid pero solo con CSS. He creado el siguiente código HTML para crear la "tabla" (solo la cabecera y una fila) pero con Divs:

CODIGO

Código HTML:
Ver original
  1. <div id="datagrid">
  2.             <ul class="cabecera">
  3.                 <li style="width:20px">ID</li>
  4.                 <li style="width:200px">Proveedor</li>
  5.                 <li style="width:150px">Dirección</li>
  6.                 <li style="width:80px">Teléfono</li>
  7.                 <li style="width:80px">Fax</li>
  8.                 <li style="width:80px">E-mail</li>
  9.                 <li style="width:80px">Importe</li>
  10.                 <li style="width:150px">Solicitante</li>
  11.                 <li style="width:40px">Estado</li>
  12.                 <li style="width:60px">Acción</li>
  13.             </ul>
  14.             <br />
  15.             <div class="clear"></div>
  16.             <ul class="info">
  17.                 <li style="width:20px">ID</li>
  18.                 <li style="width:200px">Proveedor</li>
  19.                 <li style="width:150px">Dirección</li>
  20.                 <li style="width:80px">Teléfono</li>
  21.                 <li style="width:80px">Fax</li>
  22.                 <li style="width:80px">E-mail</li>
  23.                 <li style="width:80px">Importe</li>
  24.                 <li style="width:150px">Solicitante</li>
  25.                 <li style="width:40px;background-color: #6BCAE4; color:#000000">Activo</li>
  26.                 <li style="width:60px">
  27.                     <a href="#"><img src="images/iconos/building_edit.png" alt="Modificar"></a>
  28.                     <a href="#"><img src="images/iconos/cancel.png" alt="No autorizar"></a>
  29.                     <a href="#"><img src="images/iconos/accept.png" alt="Autorizar"></a>
  30.                 </li>
  31.             </ul>
  32. </div>


Y mi código CSS es el siguiente, teniendo en cuenta que el tamaño que le he puesto al cuerpo de la web es de width: 900px:

Código CSS:
Ver original
  1. #datagrid{
  2.     overflow: auto;
  3.     width: 900px;
  4. }
  5. #datagrid ul{
  6.     display: block;
  7. }
  8. #datagrid ul li{
  9.     display: inline;
  10.     opacity: 0.6;
  11.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  12.     -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  13.     color: #33617F;
  14.     float: left;
  15.     padding: 6px 14px 6px 14px;
  16.     margin: 0 0 0 2px;
  17.     text-align: left;    
  18. }
  19. .cabecera li{
  20.     background: #C6E5F9 url(../images/bullet.gif) no-repeat 7px 12px;
  21.     font-size: .9em;
  22.     font-weight: bold;    
  23. }
  24. .info li{
  25.         text-align: left;
  26.     border-bottom: 1px solid #C6E5F9;
  27.     margin: 0px;
  28. }


PROBLEMA

El problema es que me descuadra todo .. es decir, si le pongo un overflow: auto, deberia mostrarme un scroll en caso de pasarse el ancho, pero lo que me hace es que me pone lo que sobra debajo, con lo que queda descuadrado el datagrid. Podéis ver una imagen de como ha quedado aquí:





Espero vuestra valioso conocimiento.


Saludos.
  #2 (permalink)  
Antiguo 05/03/2010, 07:42
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Scrooll (overflow: auto) no me funciona correctamente

Hola! si vas a mostrar información tabulada usa una tabla, es justo para eso y además es crossbrowser, porque la u´nica forma en que puedes conseguir lo que quieres, y no es crossbrowser, es jugando con el display:table y derivados.

Pero te aconsejo firmemente una tabla, usar listas para simular tablas es como usar tablas para simular divisiones.

Salud!
  #3 (permalink)  
Antiguo 05/03/2010, 08:01
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Scrooll (overflow: auto) no me funciona correctamente

Coincido con alberto, a propósito aquí tienes un tutorial y aquí unos muy buenos ejemplos para inspirarse.
Saludos!
  #4 (permalink)  
Antiguo 05/03/2010, 15:36
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Scrooll (overflow: auto) no me funciona correctamente

Hola:

También tienes aquí un ejemplo hecho sólo con CSS.

Saludos.

  #5 (permalink)  
Antiguo 05/03/2010, 15:57
Avatar de danideu  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 212
Antigüedad: 12 años, 9 meses
Puntos: 5
Respuesta: Scrooll (overflow: auto) no me funciona correctamente

muchas gracias a todos ... lo he conseguido ya .. pero ahora tengo un problema. Como veis en la imagen lo que hay escrito en las celdas nunca pasa del tamaño de cada una de ellas .. pero lo que me esta pasando es que por ejemplo donde pone Concepto, ahi va un texto grande y claro me escribe en 2 lineas pero me descuadra todo ... no me hace las demas lineas de las filas con el mismo tamaño.

No se si me explico ... como en excel en formato de celdas cuando pones "ajustar a texto" .. que si se pasa el tamaño del texto de la celda .. te hace toda la fila mas ancha .. no solo la celda.

Si no entendeis algo .. decirmelo ..

Saludos y de nuevo gracias.
  #6 (permalink)  
Antiguo 05/03/2010, 21:17
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Scrooll (overflow: auto) no me funciona correctamente

Debo entender la tabla sigue siendo una sucesión de listas, bien, entonces esa fila es una lista, entonces ¿no le puedes dar un alto a esa lista y/o a sus elementos?

Este dolor de cabeza que tienes con esta tabla desaparecería si realmente fuera una tabla.

Salud!

Etiquetas: datagridview, html, overflow
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




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