Foros del web, para los que viven de bits

xanthus · 28-ene-2005, 05:58

Hola ...

Tengo tres Div, el primero se llama "presentacion", el segundo "contenido" y finalmente el tercero "lat_derecho" .. Ahora es posible que que los tres puedan crecer vecticalmente si uno de ellos crece? Por ejemplo si "presentacion" tiene más info que "contenido" ambos deberian verse como si empezaran y terminaran a la misma altura.

Les envio en todo caso el codigo .. saludos

Código:

div#presentacion {
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: -347px;
	width: 163px;
	height: 100%;
	Font-size: 12px;
	line-height: 14px;
	text-transform: capitalize;
	padding-top: 10px;
	background: #D4D9B7 url(images/presentacion/fondo.jpg);
	}
div#contenido {
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: -184px;
	width: 369px;
	height: 100%;
	background: #D4D9B7 url(images/contenido/fondo.jpg);
}
div#lat_derecho {
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: 184px;
	width: 163px;
	height: 100%;
	background: #D4D9B7 url(images/lat_derecho/fondo.jpg);
}

kemie · 28-ene-2005, 12:48

la forma mas sencilla es usar una imagen de fondo:
http://www.alistapart.com/articles/fauxcolumns/

xanthus · 29-ene-2005, 18:39

Tengo las tres capas con fondo ... pero no crecen las 3 capas al 100 % de la página ... como es spobile que pase esto? alguien me puede ayudar?

frijolerou · 29-ene-2005, 20:05

A lo que se refería Kemie es que usaras una imagen de fondo en el body o en un div contenedor para simular las 3 columnas.

Otra forma es mediante javascript, que consiste en verificar cual de las 3 divs es el más alto y aumentar la altura de los otros dos para emparejarlas.

Puedes utilizar esta funcion en el head de tu documento:

<script type="text/javascript">
function emparejar(){
var finalheight;
var uno = document.getElementById('presentacion');
var dos = document.getElementById('contenido');
var tres = document.getElementById('lat_derecho');
finalheight = Math.max(uno.offsetHeight, dos.offsetHeight, tres.offsetHeight);
uno.style.height = dos.style.height = tres.style.height = finalheight;
}
window.onload = emparejar;
</script>

Bonez · 30-ene-2005, 04:03

Perdonen si digo alguna chorrada, no sé mucho de css.
Hice yo una página con capas también, para empezar en esto, y lo hice de tal forma que "crecieran" los div según el contenido verticalmente.
Creo que, que repito que no tengo mucha idea, que si le quitas lo de position:absolute; pues hará eso que dices...

28-ene-2005, 05:58	#1 (permalink)
xanthus Fecha de Ingreso: noviembre-2002 Ubicación: Santiago Mensajes: 278	3 Capas que crezcan de igual forma **** Hola ... Tengo tres Div, el primero se llama "presentacion", el segundo "contenido" y finalmente el tercero "lat_derecho" .. Ahora es posible que que los tres puedan crecer vecticalmente si uno de ellos crece? Por ejemplo si "presentacion" tiene más info que "contenido" ambos deberian verse como si empezaran y terminaran a la misma altura. Les envio en todo caso el codigo .. saludos Código: div#presentacion { position: absolute; top: 0px; left: 50%; margin-left: -347px; width: 163px; height: 100%; Font-size: 12px; line-height: 14px; text-transform: capitalize; padding-top: 10px; background: #D4D9B7 url(images/presentacion/fondo.jpg); } div#contenido { position: absolute; top: 0px; left: 50%; margin-left: -184px; width: 369px; height: 100%; background: #D4D9B7 url(images/contenido/fondo.jpg); } div#lat_derecho { position: absolute; top: 0px; left: 50%; margin-left: 184px; width: 163px; height: 100%; background: #D4D9B7 url(images/lat_derecho/fondo.jpg); } __________________ . .. La coherencia es el ultimo refugio de los que carecen de imaginación.. .

28-ene-2005, 12:48	#2 (permalink)
kemie Fecha de Ingreso: junio-2003 Ubicación: estocolmo<-->mexico Mensajes: 1.627	la forma mas sencilla es usar una imagen de fondo: http://www.alistapart.com/articles/fauxcolumns/ __________________ ::::::::::::::::::::::::::::: WebHostNinja \| diseñorama.com::::::::::::::::::::::::::::::

29-ene-2005, 18:39	#3 (permalink)
xanthus Fecha de Ingreso: noviembre-2002 Ubicación: Santiago Mensajes: 278	Tengo las tres capas con fondo ... pero no crecen las 3 capas al 100 % de la página ... como es spobile que pase esto? alguien me puede ayudar? __________________ . .. La coherencia es el ultimo refugio de los que carecen de imaginación.. .

29-ene-2005, 20:05	#4 (permalink)
frijolerou Fecha de Ingreso: diciembre-2003 Mensajes: 1.578	A lo que se refería Kemie es que usaras una imagen de fondo en el body o en un div contenedor para simular las 3 columnas. Otra forma es mediante javascript, que consiste en verificar cual de las 3 divs es el más alto y aumentar la altura de los otros dos para emparejarlas. Puedes utilizar esta funcion en el head de tu documento: <script type="text/javascript"> function emparejar(){ var finalheight; var uno = document.getElementById('presentacion'); var dos = document.getElementById('contenido'); var tres = document.getElementById('lat_derecho'); finalheight = Math.max(uno.offsetHeight, dos.offsetHeight, tres.offsetHeight); uno.style.height = dos.style.height = tres.style.height = finalheight; } window.onload = emparejar; </script> __________________ El conocimiento es libre: Movimiento por la Devolución

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

30-ene-2005, 04:03	#5 (permalink)
Bonez Fecha de Ingreso: noviembre-2002 Mensajes: 2.044	Perdonen si digo alguna chorrada, no sé mucho de css. Hice yo una página con capas también, para empezar en esto, y lo hice de tal forma que "crecieran" los div según el contenido verticalmente. Creo que, que repito que no tengo mucha idea, que si le quitas lo de position:absolute; pues hará eso que dices...