Foros del Web » Creando para Internet » CSS »

Estudiando artículo de las FAQ: Columnas equilibradas

Estas en el tema de Estudiando artículo de las FAQ: Columnas equilibradas en el foro de CSS en Foros del Web. Buenas! Tratando de estudiar cómo funciona el tema de maquetar con varias columnas a través de DIVs y no de TABLEs, he empezado por estudiar ...
  #1 (permalink)  
Antiguo 30/06/2009, 04:22
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Estudiando artículo de las FAQ: Columnas equilibradas

Buenas!
Tratando de estudiar cómo funciona el tema de maquetar con varias columnas a través de DIVs y no de TABLEs, he empezado por estudiar el artículo de las FAQ, pensando es que ese caso sería el más estable/elegante/compatible.
Bien, parto de este código (le he quitado paddings, etc, para simplificarlo más):
Código:
<!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" lang="es-es">
<head>
    <title>Columnas equilibradas</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        body {
        	margin: 0px;
        	background-color: #dddddd;
        }
        #caja_izq {
        	width: 850px;
            margin: 20px auto;
            background-color: #4c9ab1;
            overflow: auto;
        }
        #caja_der {
        	width: 500px;
            float: right;
            background-color: #82b04d;
            border-left: solid 30px #fff;
        }
        #columna_izquierda {
        	width: 320px;
            float: left;
            position: relative;
            margin-left: -350px;
            color: #fff;
        }
        #columna_derecha {
        	width: 500px;
            float: left;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="caja_izq">
    
        <div id="caja_der">

            <div id="columna_izquierda">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
            </div>

            <div id="columna_derecha">
                Hasta ahora todo muy sencillo. Como ambas cajas están todavía abiertas, lo que pongamos dentro aparecerá confinado en la columna derecha. Vamos a añadir pues dos bloques de texto en dos cajas diferentes para ver qué ocurre.
            </div>

        </div>
    </div>
</body>
</html>
La primera imposibilidad que veo en este código, es el hecho de para separar un DIV del otro, se usa la propiedad BORDER-LEFT.
Se me ocurre que el fondo de la página fuera una imagen, en vez de un color. ¿En ese caso ya la hemos liado?
¿Qué cambios harían en el código para conseguir eso?
Gracias.
__________________
..:: moNTeZIon ::..

Última edición por moNTeZIon; 30/06/2009 a las 05:41 Razón: Falta de ortografía.
  #2 (permalink)  
Antiguo 30/06/2009, 05:11
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

En tal caso le pones a la caja izquierda de fondo una imagen:

#caja_izq {
width: 850px;
margin: 20px auto;
background-color: #4c9ab1;
overflow: auto;
backgrund: url (ruta a la imagen);
}

Y a las otras cajas no le pones un fondo y entonces utilizarán el de la capa que englobe a las demás, en este caso la caja izquierda.

Saludos!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #3 (permalink)  
Antiguo 30/06/2009, 05:39
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Hola Aresillo.
Gracias por tu respuesta.
La verdad es que no me expliqué demasiado bien, volviendo a leer mis palabras.
A lo que me refería, es que si por ejemplo, como background del BODY tenemos una imagen, y dejamos un margen de separación entre las columnas, en ese margen debería poderse observar parte de la imagen de fondo, puesto que ese espacio no forma parte ni de una columna, ni de la otra.
Pero como esa separación la estamos realizando mediante la propiedad BORDER-LEFT, le estamos dando un color a ese borde, y por lo tanto no se puede ver la imagen de fondo del body.
Creo que ahora si me expliqué!
Gracias.
__________________
..:: moNTeZIon ::..
  #4 (permalink)  
Antiguo 30/06/2009, 05:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Si lo estás estudiando, como dices, verás que las columnas en realidad no están separadas, sino que para conseguir el efecto, lo que hacemos es que la segunda esté dentro de la primera, luego el fondo de la columna izquierda es en realidad el fondo del contenedor, y el de la derecha el suyo propio.
¿Has leído el .DOC que adjunto en el .ZIP?

Como te dije, esta es una solución para un caso específico: hay muchas más, y para lo que tú buscas (porque imagino que lo de la imagen de fondo será un caso real y no hipotético, si no no tendría mucho sentido plentearlo), seguro que hay alguna otra más adecuada, como la del padding 10000px y cosas de esas.
Alguien enlazó no hace mucho otro método interesante, pero no recuerdo dónde. A ver si das con él.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 30/06/2009, 06:17
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Si Mik, como digo, lo estoy estudiando, a medida que encuentro huecos de tiempo.
De hecho, claro que me he leído ese DOC adjunto, para entender precisamente eso, y pude ver, como bien dices, que la columna de la derecha está metida dentro de la izquierda, y por ese motivo, me saltó la alarma (y si en el fondo tengo una imagen.. ya la hemos liado).
De hecho, para que veas que soy un estudiante aplicado , he conseguido hacer con este ejemplo, que todos los FLOAT sean LEFT, y tener un diseño a 3 columnas en vez de 2, usando el mismo mecanismo.. Y LO HE CONSEGUIDO!
Código:
<!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" lang="es-es">
<head>
    <title>Columnas equilibradas</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        body {
        	margin: 0px;
        	background-color: #dddddd;
        }
        
        #Pagina {
        	width: 980px;
        	margin: 20px auto;
        }
        
        #Columna1 {
            background-color: #4c9ab1;
            overflow: auto; /* Importante para que esta columna se alargue en funcion de su contenido */
        }
        #Columna2 {
        	width: 420px;
            float: left;
            margin-left: 250px;
            border-left: solid 30px #fff;
            background-color: #82b04d;
        }
        #Columna3 {
        	width: 250px;
            float: left;
            margin-left: 420px;
            background-color: #aa0000;
            border-left: solid 30px #fff;
        }
        #Columna1Contenido {
        	width: 250px;
            float: left;
            margin-left: -730px;
            color: #fff;
        }
        #Columna2Contenido {
        	width: 420px;
            float: left;
            margin-left: -450px;
            color: #fff;
        }
        #Columna3Contenido {
        	width: 250px;
            float: left;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="Pagina">
        
        <div id="Columna1">
            <div id="Columna2">
                <div id="Columna3">

                    <div id="Columna1Contenido">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
                    </div>

                    <div id="Columna2Contenido">
                        Hasta ahora todo muy sencillo. Como ambas cajas están todavía abiertas, lo que pongamos dentro aparecerá confinado en la columna derecha. Vamos a añadir pues dos bloques de texto en dos cajas diferentes para ver qué ocurre.
                    </div>
                    
                    <div id="Columna3Contenido">
                        Hasta ahora todo muy sencillo. Como ambas cajas están todavía abiertas, lo que pongamos dentro aparecerá confinado en la columna derecha. Vamos a añadir pues dos bloques de texto en dos cajas diferentes para ver qué ocurre.
                    </div>
                    
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>
Pero claro, sigo viendo el mismo problema que no me gusta:
- Conseguir los márgenes entre las columnas a través de BORDER, porqué entonces perdemos de vista lo que hay en el fondo.
Busco alguna solución que pueda realizar 2 o 3 columnas, con DIVs, y que realmente entre medio de ellas se observe lo que haya en el fondo del body.
Claro está que sigo teniendo el requerimiento de que las columnas se alarguen hasta la que tiene más contenido.
Por último, para aclarar más mis intenciones, dejo un código hecho con TABLE de lo que me gustaría conseguir con DIV:

Código:
<!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" lang="es-es">
<head>
    <title>Tres Columnas con CSS</title>
    <style type="text/css">
        body { margin: 0px; background-color: #ddd; }
        #Pagina { margin: 20px auto; }
        #Tabla1 { width: 100%; }
        #Col1 { width: 200px; background-color: #a00; }
        #Col2 { background-color: #00a; }
        #Col3 { width: 200px; background-color: #a00; }
        .Separacion { width: 20px; }
    </style>
</head>
<body>
    <div id="Pagina">
        <table id="Tabla1" cellpadding="0" cellspacing="0"><tr>
            <td id="Col1">COLUMNA 1</td>
            <td class="Separacion">&nbsp;</td>
            <td id="Col2">COLUMNA 2</td>
            <td class="Separacion">&nbsp;</td>
            <td id="Col3">COLUMNA 3</td>
        </tr></table>
    </div>
</body>
</html>
Gracias por vuestra ayuda.
Mik: Qué importancia tiene si el caso es real o hipotético? Como te dije, intento aprender cómo hacer eso porqué quiero mejorar esa parte (en mi). Así que si el caso me lo invento, vería la consulta igual de válida. Pero la verdad es que no, que lo quiero para un proyecto que estoy empezando ahora, y me gustaría no usar las TABLE para hacer el diseño. Pero si el tiempo apremia, y no me acaba de quedar claro cómo hacerlo, tendré que tirar por ahí.
Gracias por la comprensión.
Un saludo.
__________________
..:: moNTeZIon ::..

Última edición por moNTeZIon; 30/06/2009 a las 06:35 Razón: Agregar código con TABLE
  #6 (permalink)  
Antiguo 30/06/2009, 06:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Cita:
Iniciado por moNTeZIon Ver Mensaje
Mik: Qué importancia tiene si el caso es real o hipotético? Como te dije, intento aprender cómo hacer eso porqué quiero mejorar esa parte (en mi).
Bueno, quería decir que en general, puedo afrontar este problema por divertimento, por investigar o por un caso real. En este caso, me parecía que tenías necesidad acuciante de resolver un asunto, y por eso decía que necesitarías ir al grano y no buscar complicaciones hipotéticas donde no las hay, sino buscar cómo aplicar la solución a tu caso real.
Al parecer estaba equivocado y realmente lo estás haciendo por investigar y aprender, con lo que mi comentario que citas sobra, claro.

Por resumir, diría que con este método no es posible hacer que se vea el fondo, pero bueno, no puedo hablar sin mirarlo. Cuando tenga rato miro tu modificación y si veo posible hacer lo que buscas.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 30/06/2009, 06:41
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Gracias Mik.
He pensado que, quizá sin colorear la primera Columna, y sin tenerla en cuenta como columna, sino solamente como contenedor del resto de columnas, quizá si pueda hacerse.
Voy a ver si lo consigo.
Gracias por tu ayuda!
__________________
..:: moNTeZIon ::..
  #8 (permalink)  
Antiguo 30/06/2009, 06:51
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Efectivamente! Si nadie ve ningúna "cosa" incompatible o extraña, creo que he conseguido mi propósito con el siguiente código:
Código:
<!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" lang="es-es">
<head>
    <title>Columnas equilibradas</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        body {
        	margin: 0px;
        	background-color: #aa0;
        }
        #Pagina {
        	width: 980px;
        	margin: 20px auto;
        }
        #ColumnaContenedor {
            overflow: auto; /* Importante para que esta columna se alargue en funcion de su contenido */
        }
        #Columna1 {
            width: 250px;
            float: left;
            margin-left: 0px;
            background-color: #4c9ab1;
        }
        #Columna2 {
        	width: 420px;
            float: left;
            margin-left: 280px;
            background-color: #82b04d;
        }
        #Columna3 {
        	width: 250px;
            float: left;
            margin-left: 450px;
            background-color: #aa0000;
        }
        #Columna1Contenido {
        	width: 250px;
            float: left;
            margin-left: -730px;
            color: #fff;
        }
        #Columna2Contenido {
        	width: 420px;
            float: left;
            margin-left: -450px;
            color: #fff;
        }
        #Columna3Contenido {
        	width: 250px;
            float: left;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="Pagina">
        
        <div id="ColumnaContenedor">
            <div id="Columna1">
                <div id="Columna2">
                    <div id="Columna3">
                        
                        <div id="Columna1Contenido">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
                        </div>
                        
                        <div id="Columna2Contenido">
                            Hasta ahora todo muy sencillo. Como ambas cajas están todavía abiertas, lo que pongamos dentro aparecerá confinado en la columna derecha. Vamos a añadir pues dos bloques de texto en dos cajas diferentes para ver qué ocurre.
                        </div>
                        
                        <div id="Columna3Contenido">
                            Hasta ahora todo muy sencillo. Como ambas cajas están todavía abiertas, lo que pongamos dentro aparecerá confinado en la columna derecha. Vamos a añadir pues dos bloques de texto en dos cajas diferentes para ver qué ocurre.
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>
Si la ayuda de tu código inicial no lo hubiera conseguido Mik.
Gracias una vez más.
Tengo una duda. Se trata del overflow: auto que me ha quedado en la ColumnaContenedor. La verdad es que quitando o manteniendo esa línea, el resultado es el mismo, por lo menos para mis ojos. ¿Faltaría algún arreglo más para acabar de simplificarlo?
Saludos.
__________________
..:: moNTeZIon ::..

Última edición por moNTeZIon; 30/06/2009 a las 07:00 Razón: El tema del overflow
  #9 (permalink)  
Antiguo 30/06/2009, 08:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Ha sido un gran intento, de verdad, pero te debías estar preguntando (supongo) por qué siendo tan fácil la gente tenía tantos problemas para hacerlo

Pues bien, como de costumbre nos hemos topado con IE6, en el que tu propuesta se convierte un auténtico desastre (vamos, que nada fundiona como debe), y no es cosa de tu propuesta, es que como siempre, lo más complicado es hacer algo compatible, si no, usaríamos display: table y todos tan amigos.

Como te decía, para cada tipo de necesidad se puede encontrar una solución.
Para este caso concreto, mira una solución mucho más limpia, sencilla y compatible:

http://www.araudi.net/forosdelweb/montezion.html

Ya me contarás.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 01/07/2009, 04:13
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Hola Mik!
Disculpa el retraso. La verdad, me está siendo imposible ver nada con Explorer 6. En estos momentos tengo instalado un Windows Vista, y no me es posible meterle un Explorer 6 de ninguna forma. He tratado de descargar una aplicación que corre por ahí llamada "Multiple IE" que te permite trabajar con varias versiones de IE a la vez... Pero un poco más tarde leí que sólo funcionaba en XP. Que están intentando desarrollar una para Vista.
Entonces, tienes tu o alguien, alguna forma de poder ejecutar Explorer 6 en un Windows Vista?
Me iría muy bien, porqué desde que puse Vista no he podido checar mis trabajos con Explorer 6.

Y volviendo al tema que estábamos, a nivel de código si que veo más simple este último ejemplo que pusiste, pero veo "extraño" la forma de aplicarle el background. Me gustaría poder especificarlo por separado, en cada columna, aunque este tampoco parece un gran inconveniente. Simplemente hay que modificar un fichero imagen cada vez que quieras cambiar el fondo.
Y por último, me podrías explicar eso del height: 1%? Odio las cosas ilógicas (aunque estoy seguro que hay algún motivo, en este caso, y dejará de ser ilógico...)
Thanks man!
__________________
..:: moNTeZIon ::..
  #11 (permalink)  
Antiguo 01/07/2009, 05:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Pues no, no es nada lógico, sino un error más de IE. Seguramente te intersará leer sobre el "haslayout", por ejemplo en este artículo.

El IE 6 lo tengo en un XP, y no creo que funcione en vista (no se iban a molestar en migrarlo). Además, si consigues el Multiple IE, has de saber que no funciona exactamente igual que IE, y añade fallos nuevos a los fallos de IE6 (increíble y aberrante )
Si te vas a dedicar a esto necesitarás tener más de una máquina, y te recomiendo que una de ellas sea un XP con IE6 y FF2, por lo menos, y quizá un VirtualBox con algún sabor de Linux.

La solución que te he puesto es la típica para cuando sabes la anchura exacta, los colores de las columnas, etc. Si no es para esa situación concreta, no sirve de nada.

Como decía, como habrás visto era un asunto más complicado de lo que parece a simple vista.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 01/07/2009, 06:02
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Pues tienes toda la razón, en que esto es complicado.
La verdad, un diseño que muchas (muchísimas) veces ocupo, es el que puse con TABLE, ya sea para hacer 2 o 3 columnas.
Y lo cierto es que siempre hay una de ellas que no tiene width, puesto que se trata de la columna que adapta su ancho, según el tamaño de la ventana del navegador.
O según el ancho de su contenedor de nivel superior.
Se puede conseguir el mismo ejemplo, sin que la columna central tenga especificado un ancho, sino que se adapte al ancho de la capa que contiene las 3 columnas, por ejemplo?
Resumiendo: 3 columnas, la central sin especificar Width, coloreadas hasta abajo del todo las tres, permitiendo ver parte del body entre las columnas.
(Parece un reto... Pero el diseño que expongo es bastante "normal" a mi modo de ver, y parece que tenga que ser bastante complicado conseguirlo con DIVs)
Agradezco a quien se tome el tiempo.
Gracias!

P.D.: Intentaré conseguir una máquina con un XP y Explorer 6... vaya "jodienda", con perdón
__________________
..:: moNTeZIon ::..
  #13 (permalink)  
Antiguo 01/07/2009, 06:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

Como ya te comenté, en realidad es facilísimo, porque tenemos los displays table, table-cell, etcétera, con lo que se consigue eso muy fácilmente. Pero ahí está el navegador de los amores de algún que otro "·$%& (porque dibuja mucho mejor las cosas), que no entiende esos displays y nos obliga a hacer filigranas. Qué desgracia.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 01/07/2009, 09:05
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Estudiando artículo de las FAQ: Columnas equilibradas

La verdad es que no he usado nunca estos displays: table, table-cell, etcétera...
Voy a estudiarlo e intento hacer un diseño utilizando estos displays, lo más parecido a lo que necesito.
Luego si el resultado no se ve bien con Explorer 6, me echas una mano con los "truquitos", vale?
Gracias por toda tu atención ( ahí ya no te cabe más karma, verdad? )
Un saludo.
__________________
..:: moNTeZIon ::..
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 11:23.