Página con 3 columnas (2 estáticas y una dinámica)

rhp07 · #1 (**permalink**) 12/09/2011, 15:35

Hola a todos, hoy traigo un especial rompecabezas que me ha llevado a mis limites a lo que va el CSS. Resulta que últimamente he descubierto el potencial de AJAX junto con PHP y lo único que me frena es el diseño que necesito.

Se trata de un diseño de 3 columnas con una barra arriba y otra barra abajo.

Las barras azules tienen una altura de 25 pixeles cada uno pero el ancho siempre se mantiene al tamaño de la ventana.

El diseño de las 3 columnas tenga las dos primeras columnas (amarillo y rosa) que sean de un tamaño estático (El amarillo de 25 pixeles de ancho y el rosa de 200 pixeles). y el contenido (lo que se muestra de color blanco) debe de usar todo el resto del espacio que queda.

Ahora viene el problema:
Resulta que mediante Javascript hago colapsar el sidebar (de color rosa). Ésto hace que de repente aparezca un espacio sin nada ya que el contenido (de color blanco) es de posición absoluta. He conseguido tener un efecto parecido al que deseo usando el atributo Relative y Block en las 3 columnas, sin embargo ésto tan solo arregla el problema horizontal y trae con sigo un nuevo problema, que es el vertical, que ya no ocupa el 100% de espacio entre la barra superior y la inferior.

La barra amarilla tambien puede ser colapsada mediante javascript, con lo que el contenido (color blanco) puede terminar ocupando el 100% del ancho.

Sería fácil decir que se pueden ajustar las 3 columnas tocando el codigo CSS directamente desde javascript, pero ésto es intensivo de CPU y un metodo bastante rústico y prefiero usar CSS antes que javascript para realizar éstas tareas.

Que puedo hacer? Agradezco todas las ideas y soluciones. Un saludo, Robert.

[url=http://postimage.org/image/44d1zw10/][img]http://s2.postimage.org/1vxbwwfl5/Captura.jpg[/img][/url]

Aquí el código de muestra:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
    <style type="text/css"> 
    /* BARRA SUPERIOR */
    .barra_arriba{
        min-width: 550px;
        top: 0px;
        left: 0px;
        right: 0px;
        position: relative;
        background: blue;
        height:25px;
        border-bottom:1px solid #B5B5B5;
    }
    
    /* BARRA DE ABAJO */
    .barra_abajo{
        min-width: 550px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        position: absolute;
        background: blue;
        height:25px;
        border-top:1px solid #B5B5B5;
    }
 
    /* BARRA IZQUIERDA */
    .barra_izquierda{
        top: 25px;
        float: left;
        left: -1px;
        bottom: 25px;
        position: absolute;
        display: block;
        background: yellow;
        border-right:1px solid #B5B5B5;
        border-bottom:1px solid #B5B5B5;
        width: 25px;
    }
 
    /* BARRA MENU IZQUIERDA */
    .menu{
        top: 26px;
        bottom: 25px;
        left: 25px;
        float: left;
        position: absolute;
        display: block;
        background: pink;
        z-index: 10000;
        border-right:1px solid #B5B5B5;
        border-bottom:1px solid #B5B5B5;
    }
 
    .menu_contenido{
        top: 0px;
        bottom: 0px;
        position: relative;
        height: 100%;
        background: rgba(255, 255, 255, 0.7);
        margin-right: 0px;
        width: 200px; /* TAMAÑO DEL SIDEBAR */
        visibility: visible;
    }
 
    /* CONTENIDO */
    .contenido{
        top: 26px;
        right: 0px;
        bottom: 25px;
        position: absolute;
        background: rgba(255, 255, 255, 0.2);
        z-index: 1;
        left: 225px;
        overflow: auto;
    }
    </style> 
</head>
<body>
    <div class="barra_arriba">Barra de arriba</div>
    
    <div class="barra_izquierda">B</br>a</br>r</br>r</br>a</br></br>i</br>z</br>q</br>u</br>i</br>e</br>r</br>d</br>a</div>
 
    <div class="menu">
        <div class="menu_contenido">    
        <b>Sidebar Menu</b><br>
        Opcion 1<br>
        Opcion 2<br>
        Opcion 3<br>
        </div>
    </div>
 
    <div class="contenido">Esto es basicamente como un iframe, solo que su contenido es cargado mediante AJAX</div>
    
    <div class="barra_abajo">Barra de abajo</div>
</body>
</html>

RafaRG · #2 (**permalink**) 12/09/2011, 16:09

¿has probado a ponerle un width a "menu"?

rhp07 · #3 (**permalink**) 13/09/2011, 06:56

Cita:

Iniciado por RafaRG

¿has probado a ponerle un width a "menu"?

el div de menu adquiere el width de contenido_menu (se puede comprobar poniendole un color diferente a menu y veremos que cambia de tamaño. Tambien pude haber puesto solo el menú y poner su width (me hace falta el div de contenido por que el contenido del menú se carga mediante AJAX tambien).

He probado ambos casos pero sigue sin funcionar.

RafaRG · #4 (**permalink**) 13/09/2011, 07:04

¿has probado también a poner un div con un determinado white que contenga a <div class="contenido">? mi idea es que pongas los div de fondo con el ancho elegido y luego pongas encima de cada uno los div que cargan el AJAX