¿El diseño imposible?

Estoy empezando a pensar que esto es imposible, pero pensé que les preguntaría chicos.¿El diseño imposible?

Básicamente se trata de un diseño de 2 columnas, pero el "negocio" quiere lo siguiente:

-Siempre ocupar toda la ventana del navegador

cambio de tamaño de la ventana del navegador -Accommodate

columna se -Izquierda ancho fijo, pero ese ancho debe ser flexible de página a página.

-columna izquierda tiene una región en la parte superior con altura fija.

-columna izquierda tiene una región inferior. Debería ocupar el espacio vertical restante de la ventana del navegador. Si el contenido es muy grande, tendrá una barra de desplazamiento solo para esa región.

-La columna derecha debe ocupar el espacio horizontal restante de la ventana del navegador.

-La columna derecha tiene una región en la parte superior con altura fija.

-La columna derecha tiene una región inferior. Debería ocupar el espacio vertical restante de la ventana del navegador. Si el contenido es muy grande, tendrá una barra de desplazamiento solo para esa región.

He intentado todo ... divs, flotando, con posición absoluta, tablas, divs en tablas ...

Es esto posible?

Aquí está una imagen de lo que debe ser similar: http://imgur.com/zk1jP.png

Fuente

2010-05-21 Kyle K

debe ser bastante sencillo, siempre que la izquierda y la derecha puedan ser proporciones del ancho de la pantalla. ¿Puedo ver uno de tus intentos? – edl

¿a qué navegadores estás apoyando? – drusnov

Debería ser bastante fácil si está listo para realizar algún trabajo. – User

No es para nada imposible, y no debería necesitar javascript. Necesitas algunos hacks específicos de IE6 si te preocupa ese navegador.

La clave del diseño es el hecho de que puede establecer una o más posiciones de borde en un elemento absolutamente posicionado. He aquí un buen artículo sobre la técnica: http://www.alistapart.com/articles/conflictingabsolutepositions/

He aquí una demostración: http://www.spookandpuff.com/examples/2col2section.html

y fuente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <title>2 col, 2 section layout.</title> 

    <style type="text/css" media="screen"> 
    #leftColumn { 
     position:absolute; 
     top:10px; 
     bottom:10px; 
     left:10px; 
     width:400px; 
    } 

    #rightColumn { 
     position:absolute; 
     top:10px; 
     bottom:10px; 
     right:10px; 
     left:410px;/* This must equal the total width of the #leftColumn, incl padding, border, margin, etc. */ 
    } 

    .topSection{ 
    position:absolute; 
    top:10px; 
    height:120px; 
    left:10px; 
    right:10px; 
    padding:10px; 
    } 

    .bottomSection{ 
    position:absolute; 
    bottom:10px; 
    top:160px; /* This must equal the total height of the .topSection, incl padding, border, margin, etc. */ 
    left:10px; 
    right:10px; 
    padding:10px; 
    overflow-y:auto; 
    } 

    /* Debug styles */ 
    body {background-color:#CCC;} 
    div {border:1px solid #FFF;} 

    #leftColumn {background-color:#7EF4B0;} 
    #rightColumn {background-color:#EEF4A7;} 
    #leftColumn .topSection{background-color:#56A97A;} 
    #rightColumn .topSection{background-color:#D6D06D;} 

    </style> 

</head> 

<body> 
    <div id="leftColumn"> 
     <div class="topSection"> 
     <p>Left column, top section.</p> 
     </div> 

     <div class="bottomSection"> 
     <p>Left column, bottom section.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 

    <div id="rightColumn"> 
     <div class="topSection"> 
     <p>Right column, top section.</p> 

     </div> 

     <div class="bottomSection"> 
     <p>Right column, bottom section.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 
</body> 
</html>

Hay algunos trucos: En primer lugar, sólo probado esto en Firefox para darle la idea general: hay algunas correcciones necesarias para IE que no he agregado: consulte la lista aparte del artículo arriba para más detalles.

He permitido 10px de espacio adicional alrededor de todas las casillas solo para ilustrar la idea; probablemente las haya puesto a 0 en un diseño real.

Puede ajustar la altura de .topSection diferente entre las columnas con algunas reglas como:

#leftColumn .topSection {height:xxx} 
#leftColumn .bottomSection {top:xxx} 

#rightColumn .topSection {height:yyy} 
#rightColumn .bottomSection {top:yyy}

me gustaría utilizar un recipiente con una clase (o una clase sobre el cuerpo de la etiqueta) para especificar el ancho de la columna izquierda, algo así como:

#container.narrow #leftColumn {width:100px} 
#container.medium #leftColumn {width:200px} 
#container.wide #leftColumn {width:400px}

Eso le permite definir un conjunto de 'plantillas' de ancho que puede cambiar.

Fuente

2010-05-21 16:25:02 Beejamin

+1: ¡muy bien! – ANeves

Esto es asombroso. ¡Gracias! –

Wow, nunca pensé en intentar eso. atornillar mi sugerencia javascript - ¡Esto es increíble! +1 – Addsy

Podría valer la pena considerar el uso de algunos javascript para ayudarle con sus problemas de diseño. Aunque sé que esto no es ideal, es una solución que he utilizado con éxito antes al tratar de lidiar con diseños de altura completa.

Debería estar bien para obtener el diseño que usted describe, sin toda la altura de desplazamiento columnas a continuación, sólo tiene que utilizar un poco de javascript para mantenerlos llenar la altura del navegador

Fuente

2010-05-21 15:47:30 Addsy

¿Tiene algún ejemplo? –

Creo que esto es bastante fácil de hacer si puede darse el lujo de utilizar el marco ext.js. Se actualizará con el código si nadie más ofrece una mejor respuesta y si está interesado.

Actualización: Aquí está el código. Probado y funciona muy bien incluso con IE6. El drawback en comparación con la solución solo de css es (i) requiere JavaScript (lo más probable es que la aplicación ya use JS); (ii) Requisito de Ext.js (que puede ser o no demasiado viable):

Observe el uso de style = "height: 100px;" int html y autoScroll: true en el código JavaScript. Esto permite la altura fija de los 2 paneles superiores y el desbordamiento con barras de desplazamiento en los pares inferiores.

Ext.onReady(function(){ 

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 

    var viewport = new Ext.Viewport({ 
     layout: 'border', 
     resizable: false, 
     items: [ 
      { 
       region: 'west', 
       id: 'west-panel',      
       split: false, 
       width: 300,           
       margins: '0 0 0 0', 
       layout: 'border',      
       items: [{ 
        region: 'north', 
        contentEl: 'west1',            
        border: false 
       },{ 
        region: 'center', 
        contentEl: 'west2',       
        border:false, 
        autoScroll: true 
       }] 
      }, 
      { 
       region:'center', 
       id:'center-panel',      
       split:false,      
       margins:'0 0 0 0', 
       layout:'border',      
       items: [{ 
        region: 'north', 
        contentEl: 'center1',       
        border:false 
       },{ 
        region: 'center', 
        contentEl: 'center2',       
        border:false, 
        autoScroll: true 
       }] 
      }         
     ] 
    });   
});

y el html:

<div id="west1" style="height: 70px;background-color: #AAA;"> 
    <p>Hi. I'm fixed.</p> 
</div> 
<div id="west2"> 
    <p> long content goes here</p> 
</div> 
<div id="center1" style="height: 100px;background-color: #333;color: #FFF;"> 
    <p>Hi. I'm fixed too.</p>    
</div> 
<div id="center2">   
<p> long content goes here</p> 
</div>

demo estará disponible más adelante, una vez más, si usted o alguien está interesado. Por favor, indíquelo si pudiera.

Fuente

2010-05-21 15:53:52

El problema con el uso de ExtJS es que mueve mucho de su diseño a Javascript, cuando debería definirse lo más posible en una hoja de estilo. Realmente no hay necesidad de usar javascript en un diseño como este, excepto tal vez como un poco de brillo extra. – Beejamin

@Beejamin: esté de acuerdo con lo que ha dicho y no negará que su solución exclusiva de css solo es inteligente. Yo también prefiero el diseño de CSS, pero no encontré una solución inteligente como la tuya. Extjs tiene su lugar y tal vez no en este caso. En el momento en que sus clientes o usted quieran un divisor vertical (entre el panel izquierdo y derecho), Extjs ya lo tiene mientras que con la solución de CSS solo, uno debería comenzar a buscar un complemento de panel dividido de jQuery o algo así. Luego pestañas, luego barra de herramientas, etc., la lista continúa. ExtJS lo hace fácil entonces. No negaré que aprendí un buen truco de CSS hoy –

Llegará allí con faux columns.

Puede usar esa técnica para hacer las dos separaciones verticales.
Si desea barras de desplazamiento separadas (no lo haga, hará que el gatillo de usabilidad llore) puede hacer que cada una de las separaciones verticales tenga max-height: 100%; overflow: auto; para hacer que obtengan desplazamiento si alcanzan el 100% de altura.

Para las barras azules "flotantes", puede dar la separación padre position: relative; padding-top: 150px;, y luego dar la barra azul position: absolute; top: 0px; left: 0px; width: 100%; height: 150px; overflow: hidden;. (No estoy seguro del ancho del 100%).
Entonces el contenido verde y amarillo no se superpondrá.

Fuente

2010-05-21 16:27:21 ANeves

Respuesta

Cuestiones relacionadas