Crear columnas "adaptables" responsive design o diseño fluido?

[resback]

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

[Alex Rodríguez]

Hola, has definido bien un problema común en la programación web. El problema, más que de la programación web, es de los jefes, que quieren que se construyan páginas web que se vean bien tanto en un iphone como en una pantalla de 42" y eso es como querer aplastar un huevo sin que se rompa (es broma). Hay diferentes técnicas para darle solución, una de ellas responsive design. Aunque algunos lo consideren la panacea, la realidad es que será raro que veas una página que se vea muy bien en un iphone y en una pantalla de 42" porque eso conlleva bastante trabajo (hacerse, se puede hacer). Quizás leer esto te ayude algo (aunque lo que se explica ahí es bastante básico): http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=758:diseno-liquido-css-fluido-frente-a-responsive-design-max-width-min-width-max-height-min-height-cu01053d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203

Saludos

[resback]

El problema es que son tablas...... si revisaste la captura pude modificar todo el css menos eso, las tablas por el codigo aspx

[Alex Rodríguez]

Pega el código como se indica aquí https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0, de forma que el código se pueda copiar y pegar, en imágenes es difícil revisar código. Un diseño en tablas lo puedes transformar en un diseño en contenedores div flotantes, por ejemplo, aunque tienes que pensar si realmente es necesario. La cuestión es crear una maquetación adecuada. Para referencia de CSS (tutorial básico): http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

Saludos

[resback]

Código: [Seleccionar]


<%@ control language="c#" inherits="ERP2Web.e2wTopSellingItemsHome, CDI.ERP2Web.Web" enableviewstate="false" %>
<%@ OutputCache Duration="3600" VaryByCustom="culture;user" VaryByParam="None" Shared="true" %>
<asp:Panel ID="Panel1" runat="server" Visible="false">
    <div class="webpart_title round">
        <asp:Label ID="lbl1_topsellingitems_home" runat="server"></asp:Label></div>
    <asp:Panel ID="pnlFlashItems" runat="server" Visible="false">
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
            name="carousel" width="580" height="300" align="middle" id="carousel">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="carousel.swf" />
            <param name="quality" value="high" />
            <param name="menu" value="false" />
            <param name="bgcolor" value="#ffffff" />
            <param name="wmode" value="transparent">
            <embed src="carousel.swf" wmode="transparent" quality="high" menu="false" bgcolor="#ffffff"
                width="580" height="300" name="carousel" align="middle" allowscriptaccess="sameDomain"
                type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>
    </asp:Panel>
    <asp:DataList ID="DataList2" runat="server" RepeatColumns="4" RepeatDirection="Horizontal"
        SkinID="Horizontal" CssClass="topAlign" Visible="false">
        <ItemTemplate>           
            <div style="text-align: center; padding-bottom: 0px; width: 140px;"><br/>
                <asp:HyperLink ID="Image2" runat="server" NavigateUrl='<%# DataBinder.Eval(Container.DataItem, "NavigateUrl") %>'>
                    <asp:Image ID="Image3" runat="server" Width="90px" Height="90px" AlternateText='<%# DataBinder.Eval(Container.DataItem, "ImgAltTag") %>'
                        ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Image") %>'></asp:Image>
                </asp:HyperLink><br/>
  <span style="text-align: center;font-weight:bold; padding: 10px 0 10px 0; width: 140px;">
                <%# DataBinder.Eval(Container.DataItem, "Item") %><br/>
</span>
                <span  style="text-align: center;font-weight:normal;font-size:10px; padding: 10px 0 10px 0; width: 140px;">
                    <%# DataBinder.Eval(Container.DataItem, "Desc") %></span>
            </div>
        </ItemTemplate>
    </asp:DataList>
   <div class="webpart_button_div">
        <asp:HyperLink ID="lnk1viewmore" runat="server" CssClass="linkButton">
            <asp:Label ID="lbl1_viewmore" runat="server"></asp:Label></asp:HyperLink></div>
</asp:Panel>



[resback]

Es que el codigo esta asi, las tablas me las inserta automaticamente el codigo ASPx, que ya inserte la captura en mi primer mensaje, quiero quitar esas tablas pero como?

[Mastermind]

Hola, ¿puedes poner la url de la página web donde tienes esto, o pegar el código html que obtienes al pedir el código fuente al navegador?