Foros del Web » Creando para Internet » CSS »

Layout estilo tablas pero con CSS

Estas en el tema de Layout estilo tablas pero con CSS en el foro de CSS en Foros del Web. 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= ...
  #1 (permalink)  
Antiguo 30/10/2010, 19:32
 
Fecha de Ingreso: octubre-2010
Mensajes: 31
Antigüedad: 7 años, 1 mes
Puntos: 0
Layout estilo tablas pero con CSS

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 original
  1. body {margin:0;
  2.           padding:0;
  3. }
  4.  
  5. #contenedor {display: table;
  6.                         width: 100%;
  7.                         }
  8.  
  9. #contenidos {display: table-row; }
  10.  
  11. #columna_1, #principal, #columna_3 {display: table-cell; }
  12.  
  13. #principal {width: 66%;
  14.                   padding: 100px 45px; }
  15.  
  16. #columna_1, #columna_2 {width: 17%;
  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.
  #2 (permalink)  
Antiguo 31/10/2010, 01:10
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Layout estilo tablas pero con CSS

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!
  #3 (permalink)  
Antiguo 31/10/2010, 02:08
 
Fecha de Ingreso: octubre-2010
Mensajes: 31
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Layout estilo tablas pero con CSS

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
  #4 (permalink)  
Antiguo 31/10/2010, 04:09
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Layout estilo tablas pero con CSS

Hola:

Primero ¿Donde tienes la columna_3?

Código CSS:
Ver original
  1. #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.

  #5 (permalink)  
Antiguo 31/10/2010, 17:36
 
Fecha de Ingreso: octubre-2010
Mensajes: 31
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Layout estilo tablas pero con CSS

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
  #6 (permalink)  
Antiguo 31/10/2010, 18:15
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Layout estilo tablas pero con CSS

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

y me encargo de ayudarte a maquetar.

Saludos!
  #7 (permalink)  
Antiguo 01/11/2010, 03:42
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Layout estilo tablas pero con CSS

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.


Etiquetas: estilo, layout, tablas
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 18:33.