Heigth 100% y posisicionar div

slcernuda · #1 (**permalink**) 10/09/2008, 01:48

Hola a todos, a ver si me podeis hechar una mano,

Estoy haciendo una web que consta de un contenedor con las siguientes caracteristicas: ancho 850px, alto 100% y posicionado al centro de la pagina.
Dentro de este contenedor divido el espacio en tres columnas con ancho fijo (aprox columna1 100px, columna2 600 y columna3 150px).

En la columna1 intento poner en la parte superior un boton flash de 100px*30px (que no se mueva de ahi) y en la parte inferior una columna de botones flash de 100px*300px (que no se mueva de abajo).

Me gustaria que la parte que se adaptase fuera la del medio que esta vacia y no lo doy conseguido. Cada uno de los dos documentos flash los meto en divs.

Alguien me puede ayudar??? Espero haberme explicado bien y gracias por anticipado

Raulmmmm · #2 (**permalink**) 10/09/2008, 09:06

Lo he entendido todo menos esto:

Cita:

Me gustaria que la parte que se adaptase fuera la del medio que esta vacia y no lo doy conseguido.

¿Qué quieres decir con que se adapte?

slcernuda · #3 (**permalink**) 10/09/2008, 09:26

Ok Raul,

te comento

en la columna de la izquierda iran tres divs (arriba centro y abajo).

el de arriba tiene unas medidas fijas, y dentro de ese div ira un boton flash (boton para ir al inicio de la pagina)

el div de abajo tambien tiene unas medidas fijas y tambien tendra un objeto flash (una tira de botones en un documento swf).

el div del medio, si es que es necesario, ira vacio, solo con el color de fondo.

quiero que la pagina se adapte al 100% en altura sin variar el tamaño de los botones, entonces lo que variara (en funcion del tamaño del monitor) sera el div del medio, no???

puedes ver el ejemplo de lo que quiero hacer en la columna de la izquierda de este link www.sinaidivers.com

Gracias

ElJavista · #4 (**permalink**) 10/09/2008, 10:16

Bueno, que problema, las hojas de estilos no tiene la capacidad de hacer lo que quieres, no se puede adaptar de ese modo la altura de los DIVs, qué hacer entonces? Usar las malditas tablas (yo no las maldigo, las maldicen otros, a mi me parecen cómodas, aunque me critiquen por decir eso). En fin, como lo haces? Tu quieres que haya un contenido que esté alineado verticalmente arriba y otro contenido que está mas abajo alineado hacia abajo. Bien, haces una tabla en tu columna de la izquierda y le das una altura de 100%, para que funcione correctamente esto, debes poner este doctype a tu web

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Si no colocas ese doctype la altura de la tabla no se extenderá al 100%, de hecho solo se extenderá si colocas valores absolutos (no sé porque en versiones posteriores de HTML han suprimido la capacidad de colocar valores porcentuales al height) . Ahora bien, eso te traerá problemas con las hojas de estilo, pero eso se puede corregir.

Continuamos. En esa tabla debe estar compuesta por dos filas y una columna, a la celda superior le das el código para que se centre verticalmente arriba: <td vAlign="top"> y a la otra la alineas hacia abajo, de este modo: <td vAlign="bottom">.

También es posible que tengas que manipular la altura de las celdas, eso se logra con height colocando valores porcetuales, son más efectivos que los valores absolutos.

Espero que te haya servido de algo.

slcernuda · #5 (**permalink**) 11/09/2008, 04:29

Gracias Eljavista,

He probado lo que me has dicho y, despues de unas pequeñas modificaciones en css, me ha funcionado casi perfectamente y te comento.

El div columna, donde va metida la tabla, tiene un borde de un pixel/gris que en teoria debe encajar con los bordes de separacion de los botones (archivo flash que he insertado) que son tb de un pixel/gris (tal y como aparece en la pagina de referencia www.sinaidivers.com).

Lo que pasa es que por defecto al meter la tabla y su contenido (swf) me deja un pequeño espacio entre ambos elementos. Me imagino que este espacio será el borde de la tabla. Lo he corregido un poco modificando el cellspacing="0".

Despues de esta modificacion queda "casi" perfecto. es decir, que me queda un pixel de separacion entre el borde del div y el swf (contenido de la tabla) y veo que cellspacing no acepta valores negativos porque seguramente con un -1 ya me llegaria.

De nuevo gracias y a ver si existe alguna solucion para corregir esto aunque si no la encuentro pues modificaré un poco el diseño si llegar a cerrar con lineas ninguna celda.

(Por ciero Eljavista, no soy un gran comunicador, si no lo entienes te mando un pantallazo por mail para que veas como me queda y como quiero que me quede)

Un saludo

ElJavista · #6 (**permalink**) 11/09/2008, 09:17

A lo mejor no eres un gran comunicador (no entiendo por qué dices esso) pero te entendí bien. OK, las tablas no tienen porque generar margen si tú no quieres. Has puesto cellspacing="0" y pusiste cellpadding="0"? Y si no funciona eso podrías probar con las hojas de estilo a las celdas, o sea asi:

#tblLeft td {
padding: 0px;
}

Donde tblLeft sería el id de la tabla en cuestión. Espero que te sirva de algo, me cuentas como te fue.

slcernuda · #7 (**permalink**) 14/09/2008, 05:10

Okkk,

me quedó perfecto con cellspacing 0 y cellpadding 0.

Gracias Eljavista