Cómo hacer que una division con <DIV> se alargue a la misma altura que la de al lado?

[programeitor]

Iniciado por tigervlc

Con divs puedes poner las divisiones donde te plazca de forma que te ayude en la legibilidad, con tablas no

¿ me pregunto. ,si te refieres a esto ?

<table border=1 style="position:relative;top:50%;left:50%">
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr style="position:relative;top:-100%;">
<td>c</td>
<td style="position:relative;left:-100%;">d</td>
</tr>
</table>

baccxus , .¿ podrias aplicarle a tus ejemplos el tema que estamos tratando. ?

Lo de la semantica ,perdona , ¿ pero que tiene que ver con una pagina web ?.
Y para el caso ,no veo porque una tabla no puede ser tan semantica o mas que un puñado de capas.

[baccxus]

No te fijaste?, puse un ejemplo en mi post anterior, sin embago, aquí hay un artículo (que por cierto también está en un post aquí mismo) de www.disenorama.com que te sería bastante explicativo (SEMANTICA), y un ejemplo que no tiene REFUTACIÓN en cuanto a lo que tratamos está en el Proyecto Camaleon, si te fijas puedes cambiar el diseño de la página sin necesidad de cambiar el contenido ("aplicarle a tus ejemplos el tema que estamos tratando").

Por último este artículo http://www.effectivetranslations.com/stupidtables/, sólo por si te interesa ver más allá del fascinante mundo del "<table><tr><td>".

Saludos.

[RoQ]

Iniciado por programeitor

Lo de la semantica ,perdona , ¿ pero que tiene que ver con una pagina web ?.
Y para el caso ,no veo porque una tabla no puede ser tan semantica o mas que un puñado de capas.
[/SIZE]

Diseño Semántico: El medio y el mensaje
leelo y si despues de hacerlo no te interesa o piensas que no importa en lo absoluto la semantica en el codigo, pues bien cada uno tiene su manera, pero en este foro se promueve el uso de css y el diseño semantico, y dar una solucion usando tablas es algo que todo el mundo sabe y que no tendria lugar.

[programeitor]

.

Por favor, baccxus, ese tipo de enlaces no me parece serio, yo podria tambien llamar estupidos a los divs y las estupideces que se hacen con ellos, que son muchas.

El css no es una exclusividad de las capas, sino de todos los elementos HTML, incluidas las tablas ,si ,las tablas.
¿ porque seguis ligando el uso del css solo a las capas y argumentandolo como una ventaja frente a las tablas ? y en cuanto a la semantica, veo mucho mas semantico usar tablas en el ejemplo de la comparacion que puse mas arriba, todo depende del contexto.

Iniciado por roq

se promueve el uso de css y el diseño semantico

entre otras muchas cosas mas.

A mi, y no es que esté en contra, me da sana risa el diseño semantico, tambien tenemos el diseño sintactico ,el poetico y el posicionado con chinchetas.

No existe ninguna razon que impida la realizacion de paginas con tablas ,usando css y/o si se quiere la tan recalcada "semantica".

Esto ,cada vez se parece mas a una conspiracion contra las tablas, definitivamente.

.

[baccxus]

Iniciado por programeitor

No existe ninguna razon que impida la realizacion de paginas con tablas...

Esto nadie te lo discute,

Iniciado por programeitor

Esto ,cada vez se parece mas a una conspiracion contra las tablas, definitivamente.

Esto sí!, NUNCA HE (hemos) DICHO que la tablas no se deban usar, sí, LAS TABLAS SE DEBEN USAR pero para lo que fueron hechas. No me imagino tabulando datos a puro y duro CSS, o hacer un calendario y cosas de ese estilo, PARA ESO FUERON CREADAS LAS TABLAS, pero de eso a hacer un sin fin de anidaciones para conseguir una "representación" web, olvídalo.

Pero como dice el compañero RoQ, si no te interesa..., pues bien cada uno tiene su manera (y esto tampoco se discute).

Saludos, y buena onda ehh.

[juanchilo]

claro que lo es, principalmente para que los motores de busquedas se lleven mejor con tu sitio, ya que comprenden mejor las estructuras hechas con DIV que con TABLAS (contemplando principalmente una semantica correcta en la pagina).

Yo llevo tiempo trabajando con DIV y nunca me perdi en las relaciones padre/ hijos de las estructuras DIV.

Ademas la manipulacion individual de cada capa DIV es mas flexible y practico que tablas que te dan un gran dolor de cabeza en estructuras muy amplias y uniformes como lo es el HOME de un portal (por dar un ejemplo). Te terminas viendo muy limitado en muchos casos.

Son muchas las ventajas y si la web entera recomienda DIVs en lugar de TABLAS por algo sera, no?

saludos

[axiertxo]

Programeitor, nadie te está diciendo que no hay que usar tablas sino que hay que usarlas cuando quieres insertar contenido tabular (tabla- tabular...). Sabemos que al principio cuesta maquetar solo con divs pero te recomiendo que lo vayas pensando sino te veras haciendo códigos arcaicos mas lentos y con pobre semántica. Es como si me dijeras que la técnica de la imagen de un pixel invisible se deba seguir usando. El código evoluciona, unas veces a mejor y otras a peor. Aún estas a tiempo de coger el expreso de los divs de media noche. De todos modos respeto tu opinión aunque discrepo.

Iniciado por programeitor

¿ me pregunto. ,si te refieres a esto ?

Lo de la semantica ,perdona , ¿ pero que tiene que ver con una pagina web ?.
Y para el caso ,no veo porque una tabla no puede ser tan semantica o mas que un puñado de capas.
[/SIZE]

DIVs anidados o TABLEs anidadas, ¿qué diferencia hay?
Así que ahora tenemos un puñado de DIVs anidados. ¿Qué mejora supone esto respecto de las tablas que reemplazan? La respuesta está en la manera en que cada etiqueta se concibió para ser utilizada. Los DIVs suponen un agrupamiento estrucutral o lógico. Incluso cuando están anidados permanecen como código estructural. en nuestro ejemplo agrupamos imágenes con sus pies (primer nivel) y después agrupamos los pares imagen/pie con otros pares semejantes (segundo nivel) Estos dos son ejemplos claros de agrupación estructural que la etiqueta DIV asume perfectamente.

Sin embargo, las tablas implican una relación entre columnas y/o filas o encabezamientos, y los datos en las celdas. Cuando las utilizamos para la maquetación de páginas, perdemos la estructura semántica de una tabla. Y estamos utilizando otra vez el HTML para el layout. Anidar tablas sólo agrava el problema.

Saludos

[RoQ]

las tablas para lo que son, aca hay una galeria de tablas estilizadas con CSS
http://icant.co.uk/csstablegallery/
ahi no veras paginas hechas con tablas, sino diseños para tablas, para cuando se tenga que usarlas.
Como dice baccxus nadie te discute el que uses tablas para hacer tu pagina, solo que dar una solcion usando tablas en un foro donde todos saben usarlas y buscan una manera de hacerlo correctamente es algo tonto.

[CORE]

Iniciado por programeitor

Se puede comprender que se cambie un "sistema" por otro cuando es un sistema mejor., no cuando es peor, sea el nº de personas que sea, que se trasladen a dicho sistema, muchas de ellas, solo. ,porque esta de moda o algo por el estilo.

¿ Donde vas a escribir el contenido sino, ¿¿ donde no tiene que aparecer..... ??

Las tablas son rigidas de base, lo cual no es una caracteristica que tengan los <div> <span> y demas, que hay que posicionarlos, ademas a los componentes de la tabla, se le pueden dar todas las funciones que le puedas aplicar a una capa, y por supuesto(aunque a algunos ni se les ocurra).. ,son tan CeSeSeables como cualquiera, con lo que ya, salen ganando las tablas.

Es preferible tablas anidadas a divs anidados. En las tablas el exterior y los elementos interiores estan ya definidos y preconfigurados, en el div no.

El uso de capas no es por que esten de moda, el uso de capas sirve para agregar contenidos por bloques ademas si hay tantos divs anidados es por que tenemos Divitis o Spanitis y desconocemos el correcto uso de las etiquetas, muchos cuando empezamos en esto cuando no sabemos como etiquetar usamos el comodin DIV o SPAN, si tu quisieras hacer una contenedor con esquinas redondeades con una tablas utilizarias mas de 17 lineas de codigo con divs solo 2 lineas

Como ya muchos lo han dicho aqui las tablas sirven para tabular contenidos no para maquetar sitios

deberiamos de tomar unas clases de semantica

el uso de capas en lugar de tablas trae beneficios como
mejor posicionamiento ya que los buscadores leen una parte o todo del Codigo Fuente
El peso = Carga mas rapida
Accesible para las personas con vision 0 los programas que leen el contenido leen el codigo fuentes es por eso que el uso de div es mas accesible que un table tr td

otra de las ventajas es la usablidad puedes cambiar de posicion una capa con un solo clic las celdas no es posible el mejor ejemplo debe de ser Zengarden o el Camaleon.

saludos

[programeitor]

¿ core ,has probado el ejemplo de descolocar una tabla ? ,no se pueden hacer aseveraciones asi porque si.

Iniciado por core

Accesible para las personas con vision 0 los programas que leen el contenido leen el codigo fuentes es por eso que el uso de div es mas accesible que un table tr td

Cual es la verdadera razon(de ser cierto), de no implementar las tablas para este tipo de usuarios y dispositivos. Es algo que no tiene explicacion posible, pues hace inaccesible la gran parte de la red a estas personas y/o sus dispositivos. Es una verdadera incongruencia.

y un table tr td es mas accesible que un div div div

Iniciado por roq

Como dice baccxus nadie te discute el que uses tablas para hacer tu pagina, solo que dar una solcion usando tablas en un foro donde todos saben usarlas y buscan una manera de hacerlo correctamente es algo tonto.

la utilizacion de tablas es correcta para mi, eso defiendo. Perder el tiempo "tabulando" con divs no es algo listo.

Por supuesto que hay cosas que es mejor hacerlas con tablas ,y hay otras que es mejor hacerlas con divs. Es totalmente valido maquetar con tablas, otras consideraciones son fruto de esta conspiracion internetcional.

En una celda se puede meter una pagina entera.

Quiero dejar claro que maqueto con ambos dos, juntos o separados ,segun sea el caso. La utilizacion de tablas para maquetar los apartados es mucho mas simple y facil.

Para finalizar deciros ,que todo el mundo no piensa como vosotros.

[juanchilo]

Perder el tiempo "tabulando" con divs no es algo listo.

Pues en eso cohincidimos todos, nadie dice que para tabular se recomienden los Div. Para eso estan las tablas claro.

Quiero dejar claro que maqueto con ambos dos, juntos o separados ,segun sea el caso. La utilizacion de tablas para maquetar los apartados es mucho mas simple y facil.

Eso esta bien, todo es relativo a la comodidad y facilidad de cada uno. Como decia mi profesor Arturo Moya: " la mejor herramienta es la que tu sabes usar" .

Para finalizar deciros ,que todo el mundo no piensa como vosotros.

Eso es buenisimo!! Que aburrido seria esto si todos pensaramos igual, no?

[CORE]

Iniciado por programeitor

¿ core ,has probado el ejemplo de descolocar una tabla ? ,no se pueden hacer aseveraciones asi porque si.

No lo he probado, pero estaria bien que nos dieras un ejemplo como el de ZenGarden o el camaleon de como manipular la estructura de tu sitio con unas tablas y celdas.

Iniciado por programeitor

y un table tr td es mas accesible que un div div div

el anidamineto de tantos divs es error del programador que no sabe etiquetar su contenido, si haz utilizado alguna vez un lector de pantalla veraz a lo que me refiero, se escucha muy diferente una pagina con tablas que con capas.

Iniciado por programeitor

la utilizacion de tablas es correcta para mi, eso defiendo. Perder el tiempo "tabulando" con divs no es algo listo.

hace como 10 años todos te darian la razon los nuevos lenguajes han cambiado y debemos de adaptarnos a ellos y dejar nuestros paradigmas atras.

Iniciado por programeitor

Por supuesto que hay cosas que es mejor hacerlas con tablas ,y hay otras que es mejor hacerlas con divs. Es totalmente valido maquetar con tablas, otras consideraciones son fruto de esta conspiracion internetcional.

Conspiracion Internacional? te refieres al W3C? si es asi, ¿TBL es un loco que quiere manipular la web?

Iniciado por programeitor

En una celda se puede meter una pagina entera.

Me gustaria ver un ejemplo real

Iniciado por programeitor

Quiero dejar claro que maqueto con ambos dos, juntos o separados ,segun sea el caso. La utilizacion de tablas para maquetar los apartados es mucho mas simple y facil.

leer el manual de HTML no estaria mal.
pero es tan incorrecto maquetar sitios con tablas, si fuera tan correcto como lo dices seria como diseñar un periodico con publisher o hacer un vector en paint

saludos

[programeitor]

core ,el ejemplo de las tablas esta mas arriba, es decir, puse un ejemplo de como descolocar <tr> y <td>.

lo de la pagina dentro de un <td> es bien facil:
<table>
<tr>
<td><iframe></iframe></td>
</tr>
</table>

Saludos.

[axiertxo]

Iniciado por programeitor

¿
Quiero dejar claro que maqueto con ambos dos, juntos o separados ,segun sea el caso. La utilizacion de tablas para maquetar los apartados es mucho mas simple y facil.

Que sea mas simple y mas facil(para ti) no quiere decir que sea mejor.

Iniciado por programeitor

¿
la utilizacion de tablas es correcta para mi, eso defiendo. Perder el tiempo "tabulando" con divs no es algo listo.

Con div no hay que tabular, para eso estan las tablas. En lo de "perder el tiempo tabulando con divs" estamos deacuerdo para eso etsan las tablas

[baccxus]

Iniciado por programeitor

core ,el ejemplo de las tablas esta mas arriba, es decir, puse un ejemplo de como descolocar <tr> y <td>.

lo de la pagina dentro de un <td> es bien facil:
<table><tr><td><iframe></iframe></td></tr></table>

Saludos.

y que tal:

Código HTML:

<iframe class="me-rio-de-las-tablas"></iframe> 

[programeitor]

¿ Como puedes decir eso ?, pobrecitas las tablas ,que tanto abundan en innerNet, pobrecitas.

display=document.getElementByTrespies('esto' || 'aquello').innerNet

[inigomena]

yo tengo dos cajas div con borde, una junto a la otra, cuyo contenido es dinámico y pueden tener diferentes alturas, y quiero que en cada caso la que sea más pequeña de las dos se expanda hasta tener la misma altura que la grande, para que la parte inferior de ambas quede alineada. ¿es posible o tengo que usar tablas?

[furoya]

Hola todos :

Está muy bien discutir sobre los preconceptos al diseñar una página, o al plantarse frente al uso de un lenguaje o un accesorio de de formatos como el CSS. Lástima que este tema se terminó pareciendo más a una pelea.

La pregunta original y la tuya, inigomena, no son nuevas. Hay tantas formas de hacerlo como diseños donde aplicarlas. El problema debe ser que justamente seguimos pensando en códigos prefabricados y no en nuestros documentos; pero tampoco vayamos a empezar a pelearnos por ésto también.

No sé si puedo agregar algo valioso al tema. Hace poco estuve en uno donde se mencionaba algo sobre el uso o no de tablas, y como lo entienden quienes toman algunos tutoriales por lo que quieren decir y no por lo que realmente dicen (excepto los que estén mal escritos, claro).

Dando el formato de tabla con div

También -¡qué casualidad!- hice un comentario sobre el sitio http://www.effectivetranslations.com/stupidtables/ ( , baccxus !), en

tablas vs css

que coincide con el tuyo programeitor ( ).

Es evidente que hoy no existe compatibilidad entre los navegadores. Posiblemente ni ocurra, pero vamos a ocuparnos del hoy. El HTML sí es interpretado de manera muy parecida, y si un diseño no se puede hacer con CSS, habrá que calcular los costos de hacerlo de cualquier otra manera. Si es negocio, habrá que hacerlo con pena pero sin culpa : no nos quedó otra...

En este tema hay muchos enlaces y comentarios que dan pistas sobre esos "costos". Algunos bastante reprobables. Por ejemplo

Iniciado por CORE ()

el uso de capas en lugar de tablas trae beneficios como
mejor posicionamiento ya que los buscadores leen una parte o todo del Codigo Fuente
El peso = Carga mas rapida
Accesible para las personas con vision 0 los programas que leen el contenido leen el codigo fuentes es por eso que el uso de div es mas accesible que un table tr td

No es nada personal, CORE, pero si algún buscador no puede leer toda la página no sirve, y si no va a interpretar el contenido de una tabla, hay que sacarlo a patadas de la web. Si yo pongo un listado de productos, precios, característcas y fabricantes lo tengo que hacer en una tabla, y quien busca esos datos los va a ingresar al buscador justamente por el contenido de la tabla. Ya sé que puedo duplicar todo el texto en un meta, (lo único que faltaría es que si no encuentran todo el contenido también me ignoren el metatag!), pero no tengo por qué hacerlo. Es un problema del buscador, no mío.

Lo del peso es algo que depende del diseño.

Y lo de los lectores text-to-voice o braille, pueden leer sólo texto o también etiquetas. Tiene que ver con la calidad o tecnología del producto. Además existe el CSS aural y braille, que ayuda a ocultar lo que pueda ser malinterpretado. Y ahora no recuerdo bien, pero existen atributos que son leídos por estos equipos y se usan para marcar qué es título, párrafo, ... más allá de la etiqueta que usen. Pero creo que es uno de esos "trucos" que hay que medir antes de usar.

De cualquier forma, es un tema muy interesante. Y conviene que haya más.

saludos

[programeitor]

Que los implementen para las tablas. ,si mi navegador es capaz de interpretar las tablas, ¿ por que no va a poder hacerlo uno de esos aparatos ?

[CORE]

Iniciado por programeitor

Que los implementen para las tablas. ,si mi navegador es capaz de interpretar las tablas, ¿ por que no va a poder hacerlo uno de esos aparatos ?

La semántica es un subcampo de la gramática y, por extensión, de la lingüística. Proviene del griego "semantikos", que quería decir "significado relevante", derivada de "sema", lo que significaba "signo". Se dedica al estudio del significado de los signos lingüísticos y de sus combinaciones, desde un punto de vista sincrónico o diacrónico.

es.wikipedia.org/wiki/Semántica

No es posible maquetar un sitio con tablas es indebido e incorrecto.

[RoQ]

Iniciado por furoya

Si yo pongo un listado de productos, precios, característcas y fabricantes lo tengo que hacer en una tabla, y quien busca esos datos los va a ingresar al buscador justamente por el contenido de la tabla. Ya sé que puedo duplicar todo el texto en un meta, (lo único que faltaría es que si no encuentran todo el contenido también me ignoren el metatag!), pero no tengo por qué hacerlo. Es un problema del buscador, no mío.

el buscador interpreta el <h1> como un titulo, si tu simulas un titulo con la etiqueta <p> añadiendole estilo, aunuqe se vea igual el buscador no lo va atomar como titulo sio como un parrafo que es para lo que se usa la etiqueta <p>
es lo mismo con las tablas, si tienes que poner una listado de productos, precios, característcas y fabricantes de forma tabular, lo mas correcto es que uses una tabla y el buscador vera que dentro de esta hay datos que se muestran de ea manera, pero no es el mismo caso de crear una tabla con dos celdas para que en cada una uses una columna, y la llenes de etiquetas <h4> <p> etc, eso deberia confundir a cualquiera puesto que como es posible que dentro de elementos en linea como las <td> se muestren elementos de bloque <hx> <p> etc, las tablas no son para eso, es por eso el asunto de la semantica.

[axiertxo]

Iniciado por furoya

No es nada personal, CORE, pero si algún buscador no puede leer toda la página no sirve, y si no va a interpretar el contenido de una tabla, hay que sacarlo a patadas de la web.

El contenido de la tabla por supuesto que lo interpretan practicamente todos los navegadores el problema es que las tablas fueron creadas para insertar contenido tabular.Para maquetar están las capas.

Es como comer pure con tenedor. El tenedor se ha hecho para pinchar pero si lo usas para coger pure pues funciona(peor todo hay que decirlo) pero no está hecho para eso.

[DvD AdN]

Iniciado por programeitor

Que los implementen para las tablas. ,si mi navegador es capaz de interpretar las tablas, ¿ por que no va a poder hacerlo uno de esos aparatos ?

Será porque Son para debiles visuales!!!(los lectores de pantalla, etc)
Entonces no les sirve de nada ver tu diseño con tablas.

[Tigervlc]

Iniciado por CORE

si tu quisieras hacer una contenedor con esquinas redondeades con una tablas utilizarias mas de 17 lineas de codigo con divs solo 2 lineas

Por cierto, cómo se hace esto de las esquinas redondeadas en los DIVS? Me encantaría saberlo! Hasta ahora pensaba que se trataban de fondos GIF o JPG hechos a propósito con las esquinas redondeadas.

[axiertxo]

Me parece que core nos e referia a como hacerlo sin imagenes pero en css3 hay una especificacion sobre eso. toma información si quieres

http://www.w3.org/TR/2002/WD-css3-bo...-border-radius

[axiertxo]

Me parece que core nos e referia a como hacerlo sin imagenes pero en css3 hay una especificacion sobre eso. toma información si quieres

http://www.w3.org/TR/2002/WD-css3-bo...-border-radius

[juque]

Hardessen Design es una pequeña agencia de diseño gráfico y digital. Su dueña y fundadora es mi socia. Ella desarrollaba sus trabajos web basados en Tablas. Yo la instigué a usar CSS para el layout de sus diseños, al principio se mostraba escéptica y no veía mayores beneficios para cambiarse. De esto hace 8 meses aproximadamente. Hoy le llegan el triple de clientes que antes gracias a que don Google se encarga de listarla en los primeros lugares en empresas del rubro Chilenas. Antes del cambio su sitio era sólo un referente de su trabajo, hoy en cambio es el que le genera más clientes.

Googleboot (el spider de google) es como un sintetizador de voz para ciegos, correcto...googleboot también es ciego. Los sintetizadores de voz leen de manera SEMÁNTICA un documento. Haciendo pausas en los título (h1,h2,h3) otorgándoles su valor correspondiente. Cuando googleboot se enfrenta con una tabla... él la interpreta como tal, es decir... datos tabulados que apoyan el contenido de Texto principal. Si el texto principal es una gran tabla...difícilmente googleboot lo entenderá... porque lo repito... el spider de google y todos los spider ... son ciegos. Disculpame si soy autoreferente pero ¡mira qué casualidad!, anoche escribí algo al respecto en mi blog. Reflexiona sobre esto: ¿De qué sirve tener el mejor sitio web del mundo cuando nadie te encuentra?. Dicho sea de paso programeitor y con el más positivo de los ánimos...No hay peor ciego que el que no quiere ver ;).

[Tigervlc]

Iniciado por axiertxo

Me parece que core nos e referia a como hacerlo sin imagenes pero en css3 hay una especificacion sobre eso. toma información si quieres

http://www.w3.org/TR/2002/WD-css3-bo...-border-radius

Muchas gracias axiertxo!

[Tigervlc]

Axiertxo, lo he probado lo de las propiedades border-top-right-radius, etc, que aparecen en ese enlace y no funciona en IE 6. He visto que es una especificación nueva de CSS3, con lo cual no debe estar implantado en muchos sitios webs. No lo harán de momento en la mayoría de los casos como digo?, usando para los bordes DIVS con imágenes de fondo que simulen las esquinas redondeadas, y que se fundan con el resto del bloque?

[RoQ]

Las CSS3 todavia estan en borrador, aparte que IE 6 es un navegador del 2001 asi que no esta actualizado, que yo sepa Firefox 1.5 ya soporta CSS3