Vivan las tables!!!

[Paramericano]

Hola a todos, CSS me acaba de decepcionar.
Quise hacer una web con 3 columnas líquidas (la anchura que se mueva según porcentaje) usando tanto floats como posicionamientos y me han dado mil problemas (la altura de cada columna no era igual, las imágenes rebosan el límite de las columnas cuando el navegador se encoge...)
En cambio con tables sale tal cual, sencillamente: todas las columnas cogen la altura de la más alta, la anchura de una columna deja de menguar cuando encuentra un elemento mínimo que ya no cabe más...

Viva los tables, VIVA VIVA

Quizás te limita cuando vayas a cambiar las estructuras, pero por lo demás, va de maravilla (y una vez ya has encontrado una estructura es difícil querer cambiarla, con lo que no es un problema: VIVA VIVA.)

¿Alguién tiene algo que declarar?

[Anonimo12]

El caso es que en CSS debes definir más las propiedades de los elementos, sin embargo te da mayor libertad de crear scripts específicos a lo que buscas, pero es solo cuestión de práctica y error.

Saludos.

[lvfp]

Las tablas son para mostrar datos, maquetar con css.

Eso se puede hacer perfectamente con divs y css, otra cosa es que no sepas hacerlo.

:D

[ayukkonen]

Como te dicen ya... Se puede hacer con capas (divs) y CSS.

Si necesitas ayuda, puedes subir una imagen con la disposición que quieres que tengan las capas y te ayudamos con los "floats".

Saludos.

[Paramericano]

Iniciado por lvfp

Las tablas son para mostrar datos, maquetar con css.

Eso se puede hacer perfectamente con divs y css, otra cosa es que no sepas hacerlo.

:D

Un simple ejemplo: con tables la altura de las columnas te sale automática, y en orden a la columna más alta.
En CSS, el mal menor, era configurar manualmente la altura de las columnas (de cada una de ellas y mirar que no se queden cortas al contenido de la más alta, ella inclusive!).

La diferencia entre html(table) y css(floats): table es automático, y css te tienes que tomar la molestia de "medir" la altura cada vez que haces un cambio.

PD: es verdad que CSS será más flexible, claro! Tienes que estar pendiente constantemente de todos los detalles.

Tables forever!

[Paramericano]

Iniciado por ayukkonen

Como te dicen ya... Se puede hacer con capas (divs) y CSS.

Si necesitas ayuda, puedes subir una imagen con la disposición que quieres que tengan las capas y te ayudamos con los "floats".

Saludos.

Yo lo que quiero son 3 columnas las cuales siempre tengan la misma altura, tengan el contenido que tengan cada una.
Y lo bueno del caso: que las columnas sean líquidas, cada una de ellas ocupe SIEMPRE un tercio de la pantalla.

Si me puedes ayudar te lo agradeceré. No sé que más opciones intentar (he probado varias).

[kseso?]

Premisa: he de reconocer que los debe tener como el caballo de Espartero, para soltar en un foro de css semejante perla.
¡Qué jodio! La risa que me ha hecho echar

Iniciado por Paramericano

Hola a todos, CSS me acaba de decepcionar. <-- significa: acabo de darme cuenta de lo mucho que me falta por descubrir y que me rindo a mis carencias
Quise hacer una web con 3 columnas líquidas (la anchura que se mueva según porcentaje) usando tanto floats como posicionamientos y me han dado mil problemas (la altura de cada columna no era igual, las imágenes rebosan el límite de las columnas cuando el navegador se encoge...) <-- ¿significa: quise empezar la casa por el tejado esperando milagros o que en el foro me lo hiciesen y ni a google supe rezar?
En cambio con tables sale tal cual, sencillamente: todas las columnas cogen la altura de la más alta, la anchura de una columna deja de menguar cuando encuentra un elemento mínimo que ya no cabe más... <-- ¿significa: viva mi ignorancia y falta de ganas/capacidad de aprender para mejorar?

Viva los tables, VIVA VIVA<-- ¿significa viva mi rendición, viva el desconocimiento?

Quizás te limita cuando vayas a cambiar las estructuras, pero por lo demás, va de maravilla (y una vez ya has encontrado una estructura es difícil querer cambiarla, con lo que no es un problema: VIVA VIVA.) <-- la misma mismita actitud de los productores del cine mudo cuando apareció el sonoro. ¿Pa´qué cambiar?

¿Alguién tiene algo que declarar?<-- SÍ: que los trolls, flamers y demás especímenes nos hacen pasar muy buenos ratos en el foro de css

Y por favor, recordad aquello de:



O en caso de hacerlo, que nos podamos echar unas risas todos los demás.

[danneg]

pues simple

Código HTML:

<div id="contenedor">
 
   <div class="capa">
   </div>
 
   <div class="capa">
   </div>
 
   <div class="capa">
   </div>
 
</div>
 

Edito: FDW tiene un bug al mostrar los porcentajes, el primer simbolo de porcentaje no lo muestra bien, los siguientes los muestran bien, seleccionen mas abajo para descubrir como lo repare, al menos en mi post

Selecciona espacio en blanco -------> %

Código CSS:

#contenedor {
   width:  100%;
   height: 500px;
}
 
.capa {
   float: left;
   width: 33%;
   height: 100%;
   border: 1px solid #000;
}
 

asi o mas sencillo??

no me crees?? miralo tu!!




Viva las capas!!! CSS nunca falla!!

No alimenten al troll, pero no me aguantaba las ganas de restregar como si se pueden hacer esas cosas con mucho menos codigo que con las tablas XD

[PrendekZ]

Iniciado por danneg

pues simple

Código HTML:

<div id="contenedor">
 
   <div class="capa">
   </div>
 
   <div class="capa">
   </div>
 
   <div class="capa">
   </div>
 
</div>
 

Edito: FDW tiene un bug al mostrar los porcentajes, el primer simbolo de porcentaje no lo muestra bien, los siguientes los muestran bien, seleccionen mas abajo para descubrir como lo repare, al menos en mi post

Selecciona espacio en blanco -------> %

Código CSS:

#contenedor {
   width:  100%;
   height: 500px;
}
 
.capa {
   float: left;
   width: 33%;
   height: 100%;
   border: 1px solid #000;
}
 

asi o mas sencillo??

no me crees?? miralo tu!!




Viva las capas!!! CSS nunca falla!!

No alimenten al troll, pero no me aguantaba las ganas de restregar como si se pueden hacer esas cosas con mucho menos codigo que con las tablas XD

Muy bien!

y En realidad estoy con vos! CSS no tiene limites, los limites se lo pone cada quién.

@Paramericano Me dio alegría por vos "Aunque no creas" que crearas algo como lo de las cajas, pero .. ¿Sabes? me sorprendió ver este tema y más creado por Usted!

espero no ofender, solo pregunta si tienes dudas, muchas veces las respuestas no están en nuestra cabeza pero seguramente si estarán en cabeza de otros, comparte lo sabido para aprender lo que nos falta.

Saludos!

[jomaruro]

Hola:

Iniciado por PrendekZ

comparte lo sabido para aprender lo que nos falta.

Saludos.

[Paramericano]

Tranquilos, amigos, no me ofendo. Al contrario, son ratos divertidos.

Pero sigo sin conseguir lo que busco. Si alguien puede compartir sus conocimientos a los que a mí me faltan, se lo agradeceré.

De momento, estoy en mi derecho de "sospechar" que CSS es incapaz de hacerlo:
que la alltura de columnas sea automática en relación a la más larga.

De momento, la solución de Danneg no me sirve, veanlo ustedes mismos:



...y es que fijar la altura de las columnas, ya sea en otro elemento que las contiene es "limitarlas" por debajo de su contenido potencial. (Cosa que las tables SSSSIIIIII respetan).

No pretendo ser ningún troll, no me malinterpreten. Lo que pido es ayuda para ver si alguien sabe algún truquito (que siempre lo hay).

De momento, jejeje: VIVAN LAS TABLES!!!

[danneg]

umm.. creo que no me aclare

al height de tu capa contenedorale di tamaño fijo para mostrar que todo quede igual del mismo tamaño, lo puedes cambiar por auto

para esos desbordes utiliza overflow

puedes hacer que la primera capa tenga tambien un alto automatico, que cresca conforme su contenido, asi las otras al tnener el 100% se autoajustan al tamaño de la capa contenedora

[danneg]

Seria algo asi

%

Código CSS:

#contenedor {
   width:  100%;
   height: 500px;
   overflow: hidden;
}
 
.capa {
   float: left;
   width: 33%;
   height: 100%;
   border: 1px solid #000;
   overflow: hidden;
}
 
#contenedor .capa:first-child {
   height: auto;
}
 

[jomaruro]

Hola:

Para que veas que se puede hacer lo que quieres y no solo con tres sino con 5 columnas, mira este ejemplo

Saludos.

[DragonX]

Iniciado por kseso?

Premisa: he de reconocer que los debe tener como el caballo de Espartero, para soltar en un foro de css semejante perla.
¡Qué jodio! La risa que me ha hecho echar

Hola a todos, CSS me acaba de decepcionar. <-- significa: acabo de darme cuenta de lo mucho que me falta por descubrir y que me rindo a mis carencias
Quise hacer una web con 3 columnas líquidas (la anchura que se mueva según porcentaje) usando tanto floats como posicionamientos y me han dado mil problemas (la altura de cada columna no era igual, las imágenes rebosan el límite de las columnas cuando el navegador se encoge...) <-- ¿significa: quise empezar la casa por el tejado esperando milagros o que en el foro me lo hiciesen y ni a google supe rezar?
En cambio con tables sale tal cual, sencillamente: todas las columnas cogen la altura de la más alta, la anchura de una columna deja de menguar cuando encuentra un elemento mínimo que ya no cabe más... <-- ¿significa: viva mi ignorancia y falta de ganas/capacidad de aprender para mejorar?

Viva los tables, VIVA VIVA<-- ¿significa viva mi rendición, viva el desconocimiento?

Quizás te limita cuando vayas a cambiar las estructuras, pero por lo demás, va de maravilla (y una vez ya has encontrado una estructura es difícil querer cambiarla, con lo que no es un problema: VIVA VIVA.) <-- la misma mismita actitud de los productores del cine mudo cuando apareció el sonoro. ¿Pa´qué cambiar?

¿Alguién tiene algo que declarar?<-- SÍ: que los trolls, flamers y demás especímenes nos hacen pasar muy buenos ratos en el foro de css

Y por favor, recordad aquello de:



O en caso de hacerlo, que nos podamos echar unas risas todos los demás.

lejos lo más inteligente que he leido.

[danneg]

¬¬ no puedo editar mis mensajes

[Paramericano]

Iniciado por jomaruro

Hola:

Para que veas que se puede hacer lo que quieres y no solo con tres sino con 5 columnas, mira este ejemplo

Saludos.

Mmmmh, ñam! ñanm! Éste parece prometer...., mañana le haré pasar mis más extrictas pruebas. A ver qué tal. Megsi!

[DragonX]

Iniciado por Paramericano

Mmmmh, ñam! ñanm! Éste parece prometer...., mañana le haré pasar mis más extrictas pruebas. A ver qué tal. Megsi!

@kseso? agarrate....ya estás nervioso ¿no?... si, te imagino.

[danneg]

Iniciado por DragonX

@kseso? agarrate....ya estás nervioso ¿no?... si, te imagino.

jaja.. yo si tiemblo, y mira que ni una de mis soluciones le sirvio jaja

[Paramericano]

Ya está, probado, que nadie se ponga nervioso, jaja, se trata de buscar soluciones entre todos (o mejor dicho: una ayudita para mí -aunque si sacamos lo que queremos seremos famosos, chicos-)

...

Se acerca pero no: respeta la altura de la columna central (precisamente la que no tiene float) a base de "comerse" lo que sobre en las columnas laterales.
Lo ideal sería que la columna más larga, sea la que fuere, fijase el alto de las otras 2.

Voy a hacer mis pruebas personales en estos días, pero creo que no es posible. Si no, ya lo sabríamos todos. Pero quién sabe! CSS tiene mucho potencial aún por descubrir sólo con las reglas que ya nos han sido dadas, se trata de "inventar" una combinación ideal posible.

PD: he visto que hay display:table, display:cell, display:row...., pero éstas no valen para ie6. Además, lo que quiero es investigar el alcance de los floats por sí mismos.

[danneg]

umm... pues la solucion ya esta, es dependiendo tu contenido y tu diseño, como la solucion que ya te di, puedes ordenar que la columa de en medio cresca, tal como la primera, o si no la ultima

todo con css se puede, ya que si de plano te quieres ahorrar dolor de cabeza, pensaro intentar css, utiliza algun js, que ese te servira perfecto, pero sera mas pesado

[Paramericano]

Iniciado por danneg

umm... pues la solucion ya esta, es dependiendo tu contenido y tu diseño, como la solucion que ya te di, puedes ordenar que la columa de en medio cresca, tal como la primera, o si no la ultima

todo con css se puede, ya que si de plano te quieres ahorrar dolor de cabeza, pensaro intentar css, utiliza algun js, que ese te servira perfecto, pero sera mas pesado

Vale, pero todo eso ya es mucho más complicado que los tables: VIVA los T-A-B-L-E-S!

[danneg]

umm... complicado??

un codigo de a lo mucho 10 lineas contando css, html y js??

que con los tables??, declarar tabla, declarar lineas y declarar columa, mas aparte el estilo, son mas 10 lineas, si seguro, mas complicado

capas:

Código CSS:

<div>
 
   <div>
   </div>
 
   <div>
   </div>
 
   <div>
   </div>
 
</div>
 

tablas

Código HTML:

<table>
 
   <tbody>
 
      <td>
 
         <tr>
         </tr>
 
         <tr>
         </tr>
 
         <tr>
         </tr>
 
      </td>
 
   </tbody>
 
</table>
 

¿Cual parece mas complicado??

[Paramericano]

Mi querido danneg, un poco de trampa sí que haces: falta definir los estilos de cada div, y retocar los detalles con js. Todo ello hay que añadirlo pues los tables te lo hacen todo eso sólos ya como lo muestras (y tbody, ni th hacen falta, en todo caso 1 tr, y 3 tds (con sus respectivos cierres).

Efectivamente! Me parece mucho mayor embrollo!

Código:

<table width="95%"><tr>
<td width="33%"></td>
<td width="33%"></td>
<td width="33%"></td>
</tr><table>

...con sólo esto ya está hecho todo, en cambio a los divs que presentaste faltan todos los estilos y un plus de js.

[danneg]

Mi querido Paramericano, lo que pasa aqui es que ademas de usar tablas (mala practica de html) tampoco respetas los entandares web (W3C), ya que es necesario tu tbody, y declarar todo como es

el uso de tablas esta supuesto para mostrar datos de una forma ordenada y coerente, como calendarios, tablas periodicas, facturas, listas, etc, no para maquetar una pagina completa

te invito a leer un manueal practico de xhtml y css, y veras a lo que refiero, y despues te invito a pasar tu sitio por el validador de W3C

me contaras que pasa!!

[danneg]

Por cierto, js no esta hecho para dar estilos, los puedes manipular, pero es un leguaje de programacion no de maquetacion, y solo una salida rapida a lo que pides, por que todo puede ser perfecto con css

por cierto me equvoque en el codigo de las tablas XP (se notara que no las uso??)

[danneg]

Iniciado por paramericano

Código:

<table width="95%"><tr>
<td width="33%"></td>
<td width="33%"></td>
<td width="33%"></td>
</tr><table>

33% + 33% + 33% != 95% (?)

[Paramericano]

Iniciado por danneg

Por cierto, js no esta hecho para dar estilos, los puedes manipular, pero es un leguaje de programacion no de maquetacion, y solo una salida rapida a lo que pides, por que todo puede ser perfecto con css

por cierto me equvoque en el codigo de las tablas XP (se notara que no las uso??)

Veré si lo puedo hacer perfecto tal como quiero. Me voy ya.
Gracias por tu atención.

PD: el 33% és respecto al 95%, no hay ningún problema, Danneeeeeeeg

[kseso?]

Iniciado por jomaruro

Hola:

Para que veas que se puede hacer lo que quieres y no solo con tres sino con 5 columnas, mira este ejemplo

Saludos.

Iniciado por Paramericano

Mmmmh, ñam! ñanm! Éste parece prometer...., mañana le haré pasar mis más extrictas pruebas. A ver qué tal. Megsi!

Iniciado por DragonX

@kseso? agarrate....ya estás nervioso ¿no?... si, te imagino.

Iniciado por Paramericano

Se acerca pero no: respeta la altura de la columna central (precisamente la que no tiene float) a base de "comerse" lo que sobre en las columnas laterales.
Lo ideal sería que la columna más larga, sea la que fuere, fijase el alto de las otras 2.

Voy a hacer mis pruebas personales en estos días, pero creo que no es posible. Si no, ya lo sabríamos todos. Pero quién sabe! CSS tiene mucho potencial aún por descubrir sólo con las reglas que ya nos han sido dadas, se trata de "inventar" una combinación ideal posible.

Sólo me queda rendirme ante su sin par descubrimiento, pidiendo humildemente perdón por hacer perder tiempo y dedicación en pruebas tan completas y complejas sobre una realización tan nimia, que ni las merece ni amerita, en detrimento de causas más excelsas y beneficiosas para toda la humanidad, como podría ser
Naaah!!!
Pensándolo mejor, creo que aquí se necesita

[daPhyre]

Yo lo que se, es que las tablas son bastante más lentas en renderizar que los divs, y que los interpretadores interpretan las tablas como lo que son: Tablas.

Quizá una no está mal, pero así se comienza, y siempre las páginas grandes terminan con un montón de tablas anidadas que hacen todo enrrollado y problemático.

Hasta el momento, no he tenido un problema de columnas iguales que unos divs anidados no hayan arreglado, anidando siempre del menor al de mayor contenido. Y en caso de columnas dinámicas con PHP, todo se arregla con un sencillo min-height.