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

Anarko · #1 (**permalink**) 12/03/2007, 16:41

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>

Mikmoro · #2 (**permalink**) 12/03/2007, 16:46

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.

Anarko · #3 (**permalink**) 12/03/2007, 18:11

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.

Mikmoro · #4 (**permalink**) 13/03/2007, 00:10

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.

Anarko · #5 (**permalink**) 13/03/2007, 07:00

Muchas gracias,Mikmoro

Ha salidoPERFECTO !!!

Le he modificado asi:

Código PHP:

  <style>
#padre { background-color: rgb(0, 102, 0);
overflow: auto;
width: 540px;
margin_auto;
}
#rojo { padding: 10px;
background-color: rgb(204, 0, 0);
float: left;
width:45%;
}
#verde { padding: 10px;
float: right;
}
  </style>

Para poder tenerlo a mitad y mitad.

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

Gracias.

Mikmoro · #6 (**permalink**) 13/03/2007, 08:32

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.

Anarko · #7 (**permalink**) 13/03/2007, 23:55

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-color: rgb(0, 102, 0);
overflow: auto;
width:98%;
}
#rojo {
padding: 10px;
border:2px solid #fff;
background-color: rgb(204, 0, 0);
float: left;
width:45%;
}
#verde {
padding: 10px;
border:2px solid #fff;
float: right;
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...

Mikmoro · #8 (**permalink**) 14/03/2007, 01:23

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.

Anarko · #9 (**permalink**) 14/03/2007, 02:31

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.

Mikmoro · #10 (**permalink**) 14/03/2007, 06:20

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.

Anarko · #11 (**permalink**) 14/03/2007, 07:55

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!.

Mikmoro · #12 (**permalink**) 14/03/2007, 08:17

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.

Mikmoro · #13 (**permalink**) 14/03/2007, 12:52

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.

Anarko · #14 (**permalink**) 15/03/2007, 23:00

Corre de maravilla GRACIAS!.

Anarko · #15 (**permalink**) 16/03/2007, 00:26

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.

Mikmoro · #16 (**permalink**) 16/03/2007, 03:27

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.

Anarko · #17 (**permalink**) 16/03/2007, 07:24

Comprendo bien gracias.