Crear columnas "adaptables"
Hola buen día, mi duda es que en la página de la empresa que trabajo es una tienda e-commerce y el listado de productos esta en 4 columnas usando un DataList, el problema viene que el ancho total de la página es de 950px y mi jefe que tiene monitores de 30" y resulución arriba de 2,000 px, por lo tanto tiene demasiado espacio en blanco a los lados, mis conocimientos en ASP.net/C# son básicos por no decir nulos.
Anexo captura del codigo:
http://i.imgur.com/liHl3Yy.jpg
He logrado modificar el ancho total de toda la página mediante CSS y todo funciona perfecto, excepto por los productos que estan en una tabla y en 4 columnas.
Anexo captura del cambio que hice:
http://i.imgur.com/WT2WFxt.jpg
A lo mucho puedo aumentarle el ancho a la div que contiene la tabla pero es feo esa solucion, cuando la ideal seria mostrar productos en mas columnas
Anexo captura del cambio que hice y no me gusta:
http://i.imgur.com/N81gQPr.jpg
echando un vistazo a los archivos ascx veo que esta programado para esas 4 columnas, hay alguna forma de que muestre los productos en divs, o listas, o simplemente en ciertas columas de acuerdo a la resolución?
Y si alguien aunque no me pueda dar la solucion en si, si es posible corregir este problema a futuro con algun otro metodo/solucion ?
Saludos y gracias por adelantado :D
resback
Hola la solución era simple, en mi controlador DataList había que poner la propiedad: RepeatLayout="Flow", para que generara unicamente contenedores span en lugar de una tabla y td's
pedro-lopez-andradas
Lo idea es que cada caja sea un <table>, y que estén todas al mismo nivel dentro del <td> padre. A esas tablas puedes dar la propiedad align="left", que es como un "float" pero para tablas.
azuriguel
Puedes hacer las tablas en porcentajes tambien
resback
el problema que las divs son las que tienen esas propiedades, no las tablas. Cada div esta dentro de una celda de una tabla :S
azuriguel
Float:left y el widht en porcentaje, con un max-width y min-width.
Por lo menos yo lo haría asi xD
resback
Quiero que aumenten los productos a la derecha si hay espacio, si no hay espacio que se recorran en otro fila....
azuriguel
Tendrá un width fijo tendrás que ponerlo en porcentajes.
resback
Es que el codigo esta asi, las tablas me las inserta automaticamente el codigo ASPx, que ya inserte la captura.
http://i.imgur.com/rD9QRtc.png
D:
resback
Eso lo se hacer en DIVS, pero en tablas? :S
pedro-lopez-andradas
Lo ideal sería eliminar esa configuración por columnas, darles un ancho fijo y un "display: inline-block", o un "float:left", para que ocupasen todo el ancho y salten a al siguiente línea cuando ya no quepan más.
Si tienes más tiempo, energía y ganas, y quieres uan web responsive, deberías ir modificando el ancho de las cajas en porcentajes, para que quepan 6, 4, 2, ó 1 según el ancho de la ventana, y que se ajusten a todo el ancho disponible.