Foros del Web » Creando para Internet » CSS »

Como hacer que un TD tenga = alto que el del lado ?

Estas en el tema de Como hacer que un TD tenga = alto que el del lado ? en el foro de CSS en Foros del Web. Hola, el TD AZUL tiene + lineas que el TD rojo. Como puedo hacer que ambos tengan = altura ? (El problema màs que por ...
  #1 (permalink)  
Antiguo 12/03/2007, 17:41
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 10 meses
Puntos: 20
Como hacer que un TD tenga = alto que el del lado ?

Hola, el TD AZUL tiene + lineas que el TD rojo.

Como puedo hacer que ambos tengan = altura ?

(El problema màs que por el color de fondo como podeis apreciar, es por que cada TD tiene border=1, y el resultado es desastrozo!
Código PHP:
<table><tr><td class="azul"><p>Dato 1</p>
<
p>Dato 2</p>
<
p>Dato 3</p>
<
p>Dato 4</p>
<
p>Dato 5</p>
<
p>Dato 6</p></td>

<
td class="rojo"><p>Dato A</p>
<
p>Dato B</p></td></tr></table
  #2 (permalink)  
Antiguo 12/03/2007, 17:46
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
Re: Como hacer que un TD tenga = alto que el del lado ?

Disculpa, Anarko, pero no entiendo la consulta; tal y como está, las dos celdas son igual de altas, ¿no?.

¿Puedes poner una captura de pantalla?

Mikel.
  #3 (permalink)  
Antiguo 12/03/2007, 19:11
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 10 meses
Puntos: 20
Re: Como hacer que un TD tenga = alto que el del lado ?

Te agradezco mucho la ayuda Mikmoro

Resulta que me he equivocado de cabo a rabo...

Me refiero a que tengo 2 DIV, uno al lado del otro anidados en "DIV PADRE"

Total 3 DIV

<div><div class="rojo"></div><div class="verde"></div></div>

Pero los contenidos del uno van + halla del otro, (en altura).

Que puedo hacer ?

GRACIAS DE NUEVO.
  #4 (permalink)  
Antiguo 13/03/2007, 01:10
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
Re: Como hacer que un TD tenga = alto que el del lado ?

Pues hay un par de trucos que podrías usar. Uno de ellos es este:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Anarko</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
#padre { background-color: rgb(0, 102, 0);
overflow: auto;
width: 140px;
}
#rojo { padding: 10px;
background-color: rgb(204, 0, 0);
float: left;
}
#verde { padding: 10px;
float: left;
}
  </style>
</head>
<body>
<div id="padre">
<div id="rojo">
<p>Dato 1</p>
<p>Dato 2</p>
<p>Dato 3</p>
<p>Dato 4</p>
<p>Dato 5</p>
<p>Dato 6</p>
</div>
<div id="verde">
<p>Dato A</p>
<p>Dato B</p>
</div>
</div>
</body>
</html>
Mikel.
  #5 (permalink)  
Antiguo 13/03/2007, 08:00
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 10 meses
Puntos: 20
Re: Como hacer que un TD tenga = alto que el del lado ?

Muchas gracias,Mikmoro

Ha salidoPERFECTO !!!

Le he modificado asi:
Código PHP:
<style>
#padre { background-color: rgb(0, 102, 0);
overflowauto;
width540px;
margin_auto;
}
#rojo { padding: 10px;
background-colorrgb(20400);
floatleft;
width:45%;
}
#verde { padding: 10px;
floatright;
}
  </
style
Para poder tenerlo a mitad y mitad.

Podrias indicarme por que utilizar RGB y no el tipico EXADECIMAL ?

Gracias.
  #6 (permalink)  
Antiguo 13/03/2007, 09:32
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
Re: Como hacer que un TD tenga = alto que el del lado ?

Creo que usar uno u otro es indiferente. En mi caso es una cuestión de costumbre.
De hecho hay mucha gente (yo también a veces) que no se complica la vida con el color y lo usa al estilo abreviado #35E, que significa que cada dígito se identifica con una pareja de dígitos, es decir, que es equivalente a #3355EE.

Mikel.
  #7 (permalink)  
Antiguo 14/03/2007, 00:55
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 10 meses
Puntos: 20
Re: Como hacer que un TD tenga = alto que el del lado ?

Hola Mikmoro,

(Por eso te hablaba de los bordes...)...

Resulta que no he podido lograr que el DIV ROJO se extienda de igual manera como hiciste con el verde:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<
html>
<
head>
<
title>Anarko</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
style type="text/css">
body{
background:silver;
}
#padre {
background-colorrgb(01020);
overflowauto;
width:98%;
}
#rojo {
padding10px;
border:2px solid #fff;
background-colorrgb(20400);
floatleft;
width:45%;
}
#verde {
padding10px;
border:2px solid #fff;
floatright;
width:45%;
}
  </
style>
</
head>
<
body>
<
div id="padre">
<
div id="rojo">
<
p>Dato A</p>
<
p>Dato B</p>
</
div>
<
div id="verde">
<
p>Dato 1</p>
<
p>Dato 2</p>
<
p>Dato 3</p>
<
p>Dato 4</p>
<
p>Dato 5</p>
<
p>Dato 6</p>
</
div>
</
div>
</
body>
</
html
podrias ayudarme nuevamente ?

Por que falla ?

Como puedo hacerlo ?

Pilla que incluso utilice overflow: auto;en cada uno...

Me lleva loco este comportamiento...
  #8 (permalink)  
Antiguo 14/03/2007, 02:23
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
Re: Como hacer que un TD tenga = alto que el del lado ?

Siempre tenemos más o menos la misma disyuntiva; cuando alguen hace una consulta y le das alguna sugerencia, nunca puedes estar seguro de que servirá porque no sabes si el ejemplo lo usará como lo ha puesto, si será dinámico, si cambiará por completo, etcétera.

En tu caso, pensaba que era así como lo ibas a dejar, es decir, con la columna izquierda más alta que la derecha, pero ahora lo haces al revés, así que imagino que será que va ser dinámica.

Para intentar acertar, si es que es posible, deberías decir cómo será el comportamiento de la página en el futuro de la forma más exacta posible, quiero decir:

- ¿El ancho debe ser en porcentajes para adaptarlo a la resolución o será fijo?
- ¿Cualquiera de las columnas puede crecer más que la otra dinámicamente, o será estático pero diferente en las diferentes páginas?
- ¿Alguna de las columnas tendrá ancho fijo?
- ¿Tendrán un alto máximo?

En fin, quiero decir que se necesita saber qué ocurrirá para buscar una solución, si no, podemos buscar parches para cada caso y que luego cambie por alguna cosa que no se había comentado.

Mikel.
  #9 (permalink)  
Antiguo 14/03/2007, 03:31
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 10 meses
Puntos: 20
Re: Como hacer que un TD tenga = alto que el del lado ?

Mestro,

ancho = la pantalla, (%)
Columnas = dinamicas
Ancho de ellas = miti y miti, (siempre son 2)
El alto es dinamico, pero la idea es que ambas QUEDEN con el alto de LA + ALTA

de nuevo gracias.
  #10 (permalink)  
Antiguo 14/03/2007, 07: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
Re: Como hacer que un TD tenga = alto que el del lado ?

Pues creo que no es nada fácil lo que pides, pero bueno, luego le daremos un poco a la olla a ver si se nos ocurre algo, pero lo veo jodido:

- ancho en %, altura total dinámica, independiente en ambas columnas, ambas con un borde blanco, etcétera.

Lo veo jodido pero ya veremos.

Mikel.
  #11 (permalink)  
Antiguo 14/03/2007, 08:55
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 10 meses
Puntos: 20
Re: Como hacer que un TD tenga = alto que el del lado ?

Ups....

Pero si es lo mismito que si fueran 2 TD de tablas...

No comprendo por que surge la dificultad, pero si tu lo dices...

Gracias!.
  #12 (permalink)  
Antiguo 14/03/2007, 09:17
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
Re: Como hacer que un TD tenga = alto que el del lado ?

Porque las tablas y las celdas tienen comportamientos que no los tienen las cajas, como crecer ambas sólo porque una crezca, por ejemplo.

Mikel.
  #13 (permalink)  
Antiguo 14/03/2007, 13:52
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
Re: Como hacer que un TD tenga = alto que el del lado ?

Bueno, al final no era tan tan difícil (no lo era, pero fue para echarme mérito y ganar reputación )

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Anarko</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style type="text/css">
body { background: silver none repeat scroll 0%;
}
#padre { background-color: rgb(0, 102, 0);
width: 100%;
overflow: auto;
display: table;
}
#rojo { border: 2px solid rgb(255, 255, 255);
padding: 10px;
background-color: rgb(204, 0, 0);
width: 50%;
display: table-cell;
height: 100%;
}
#verde { border: 2px solid rgb(255, 255, 255);
padding: 10px;
width: 50%;
height: 100%;
display: table-cell;
}
  </style>
<!--[if IE]>
<style>
#padre { border: 2px solid rgb(255, 255, 255);
height: 10px;
overflow: visible;
}
#rojo { border: none;
border-right: 2px solid rgb(255, 255, 255);
float: left;
}
#verde { float: right;
border: none;
border-left: 2px solid rgb(255, 255, 255);
width: 49.9%;
}
</style>
<![endif]-->
</head>
<body>
<div id="padre">
<div id="rojo">
<p>Dato A</p>
<p>Dato B</p>
</div>
<div id="verde">
<p>Dato 1</p>
<p>Dato 2</p>
<p>Dato 3</p>
<p>Dato 4</p>
<p>Dato 5</p>
<p>Dato 6</p>
</div>
</div>
</body>
</html>
La verdad es que es jodido, pero creo que ha caído.

El 49.9% es por IE7, que con el 50% IE6 lo hace bien. Por cierto, este código valida perfectamente.

Ya nos contarás cómo lo vés.

Mikel.

Última edición por Mikmoro; 14/03/2007 a las 13:59
  #14 (permalink)  
Antiguo 16/03/2007, 00:00
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 10 meses
Puntos: 20
Re: Como hacer que un TD tenga = alto que el del lado ?

Corre de maravilla GRACIAS!.
  #15 (permalink)  
Antiguo 16/03/2007, 01:26
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 10 meses
Puntos: 20
Re: Como hacer que un TD tenga = alto que el del lado ?

Lamento molestarte tanto Mikmoro

Pero no habia notado que tu cabecera es <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> y yo utilizo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Puedes ver que no va en IE:

http://www.forocss.com/problemas-css/06/problema.html

Pero si en los demas...

Por favor animate a continuar con tu ayuda hacia mi.

Gracias.
  #16 (permalink)  
Antiguo 16/03/2007, 04:27
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
Re: Como hacer que un TD tenga = alto que el del lado ?

Hola, Anarko.
Pues con esto yo ya he hecho tope. Explorer tiene infinidad de problemas con las recomendaciones, pero con strict ya es de traca. Al usar esa dtd se elimina un error que explorer comete con la altura de las cajas, que a su vez hace que la anterior solución funcionara, pero sin embargo, eso no hace que entienda los display como table o table-cell.

De esta manera, no podemos hacer que entienda el estandard y tampoco podemos aprovecharnos del error para que, no entendiéndolo, funcione bien.

Conclusión para mi: si debo hacer ese diseño, y debo hacer que funcione en IE6, por ejemplo, tengo que usar transitional, o sencillamente hacerlo con tablas y listo.

No se me ocurre cómo arreglarlo. Lo siento.

Mikel.
  #17 (permalink)  
Antiguo 16/03/2007, 08:24
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 10 meses
Puntos: 20
Re: Como hacer que un TD tenga = alto que el del lado ?

Comprendo bien gracias.
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 17:05.