Layout estilo tablas pero con CSS

Mariela_Fiad · #1 (**permalink**) 30/10/2010, 18:32

Hola, este es mi primer diseño utilizando este mecanismo la estructura resumiendo es lo siguiente:

xhtml

Código HTML:

<body>
<div id="contenedor">
<div id="contenidos">
<div id="columna_1">
contenido de la columna 1
</div>
<div id="principal">
contenido central de la pagina
</div>
<div id="columna_2">
contenido de la columna 2
</div>

Código CSS:

Ver originalbody {margin:0;
          padding:0;
}
 
#contenedor {display: table;
                        width: 100%;
                        }
 
#contenidos {display: table-row; }
 
#columna_1, #principal, #columna_3 {display: table-cell; }
 
#principal {width: 66%;
                  padding: 100px 45px; }
 
#columna_1, #columna_2 {width: 17%;
                                            padding: 23px 20px}

Lo que yo quiero es que la columna central tenga un padding-top mayor que el de las otras dos columnas y lo que hice fue agregar por separado los paddding correspondientes, pero no respeta la diferencia y agrega a todas la medida mayor en este caso a la de la columna central. Intente agregando otro div a cada columna y extender el selector a un selector descendiente, pero de todos modos no respeta el padding que le indico. Recién se me ocurre mientras escribo esto que a la columna centra podría poner white-space: pre-wrap y agregar al html unos saltos de linea o sino hacer un div y en columna central y ponerle esta propiedad y así no todo el contenido de central heredaría lo de " white-space: pre-wrap" aún no lo probé a esto, pero creo que si funcionará. De todos modos existe una forma de que las columnas sean independientes y pueda personalizar el relleno de cada una. Saludos.

PrendekZ · #2 (**permalink**) 31/10/2010, 00:10

En realidad no entiendo su código CSS, en una imagen puedes mostrar que quieres lograr?

y si es posible colocar divs con colores diferentes y colocando el nombre para saber a que quieres llegar.

Saludos!

Mariela_Fiad · #3 (**permalink**) 31/10/2010, 01:08

No, no es una imagen estoy haciendo que cada div se comporte como un elemento de una tabla, por ejemplo div id="contenedor" es el <table> que con {display: table} hago que se comporte así, div id="contenidos" es el <tr> (el que hace las filas en este caso es de una sola fila), lo consigo dando a contenido {display: table-row}. Y por último las dos columnas laterales y el contenido principal serían las columnas <td> que lo logro con agregando {display: table-cell}, ajusto el ancho de las tres (div id="columna_1", div id="principal", div id="columna_2") para que quepan cómodamente, uso porcentajes en éste caso.
Si del mismo modo que yo todo es una gran tabla de una sola fila, tres columnas y cada contenido (en mi caso tres) son grandes celdas,
lo hago para que todo tenga un aspecto homogéneo, esté alineado verticalmente. Que cada columna llegue hasta el final de la columna más extensa. O si el contenido principal es muy extenso, que las columnas lleguen hasta el final del contenido principal. La única desventaja es que las tres columnas (en éste caso) comparten el mismo padding-top. No puedo personalizar desde padding el espacio quiero vaya entre el contenido y borde de la caja, pero ya encontré otra forma de sustituirlo. De todos modos si sabes/n una forma de anular este comportamiento (que las celdas de una tabla compartan padding-top), agradecería que me lo hagan saber.

El modo de sustitución que use fue el que comenté antes. Mi objetivo es que el contenido central comience más abajo que el de las columnas, ósea que tenga un mayor padding-top así que agregué al xhtml dentro de el div="principal" otro div que por contenido tiene saltos de linea lo cerré y en el css le puse por declaración { white-space: pre-wrap}, también podría haber usado <br /> o <p></p>. Pero creo que esta es mejor.

Aquí puedes ver como hacer la estructura general de una web estilo tablas pero usando CSS.
http://www.librosweb.es/css_avanzado/capitulo1/elementos_de_la_misma_altura.html
Saludos

jomaruro · #4 (**permalink**) 31/10/2010, 03:09

Hola:

Primero ¿Donde tienes la columna_3?

Código CSS:

Ver original#columna_1, #principal, #columna_3 {display: table-cell; }

Si no he entendido mal lo que pretendes hacer se conoce como columnas equilibradas.

Aquí tienes un ejemplo de 3 columnas

Aquí tienes un ejemplo de 5 columnas

Espero que te sirva.

Saludos.

Mariela_Fiad · #5 (**permalink**) 31/10/2010, 16:36

La tercera columna vendría a ser la que dice columna_2. La primera columna que se muestra desde izquierda a derecha se llama. Columna_1, la segunda columna que se muestra siguiendo esta orientación es la que se llama principal (es donde está el contenido principal de la web y no podría llamarla de otra manera, además no es una columna, simula ser una columna dentro de la tabla pero no es una columna vista desde el diseño.) y la tercera es la que se llama columna_2.

Existen muchas maneras de ajustar el alto de las columnas para que se vean parejas, pero ahora estoy probando con ésta técnica. Y lo que quiero saber es como personalizar o hacer independiente el padding-top de cada una, como dije antes. De todos modos gracias por los enlaces. Saludos

PrendekZ · #6 (**permalink**) 31/10/2010, 17:15

En photoshop puedes hacer el Boceto de cómo quieres que quede?

y me encargo de ayudarte a maquetar.

Saludos!

jomaruro · #7 (**permalink**) 01/11/2010, 02:42

Hola:

No me has entendido lo de la columna_3, es que en tu CSS tienes definas propiedades para la columna_3 que no existe en tu HTML, que le llamas columna_2.

Creo que lo que quieres hacer no podrás hacerlo si le das atributos de tabla puesto que los div's te simulan una tabla, si te fijas en el ejemplo que te pasé, el código no tiene esos atributos (table, table-row y table-cell).

Saludos.