Foros del Web » Creando para Internet » CSS »

Desborde de Capa

Estas en el tema de Desborde de Capa en el foro de CSS en Foros del Web. Tengo un pequeño problema, estoy usando css para un sitio, pero mi problema es que una capa no se hace al tamaño de una interna. ...
  #1 (permalink)  
Antiguo 08/04/2005, 18:54
Avatar de damonmx  
Fecha de Ingreso: enero-2002
Ubicación: Mexico
Mensajes: 280
Antigüedad: 15 años, 10 meses
Puntos: 0
Pregunta Desborde de Capa

Tengo un pequeño problema, estoy usando css para un sitio, pero mi problema es que una capa no se hace al tamaño de una interna. Aca me explico: Tengo una capa que contiene a todas las demas, tanto para el encabezado, contenido y pie. Mi proble radica en la de contenido, ya que esta su vez contiene tres capas mas una top, una medio y una pie; esto para lograr el diseño de una tabla de puntas redondeadas con sombra. Dentro de la de "medio" es donde coloco una capa mas para la informacion misma que llame "info" y otra mas que se llama "lateral".
Lo que quiero lograr es que la capa "medio" se haga al tamaño de la capa "info" o en su defecto al tamaño de la "lateral", es decir que conforme se vaya agregando informacion en las capas "info" y "lateral" y estas vayan aumetando su height, el height de la capa "medio" tambien vaya aumentando.
Espero haberme explicado bien aca dejo el codigo de las capas "medio" e"info" que son las del problema.

Código:
#contenido-medio  {
  			position: relative;
			width: 716px;
			height: 400px;
			background-image : url('imgs/medio.gif');
			background-repeat : repeat-y;
			background-position: 0% 100%;
			background-color: transparent;
			}
Código:
#info {
	 float: left;
	 position: relative;
	 width: 420px;
	 margin: 10px 0px 10px 10px;
	 border-top: solid #666666 2px;
	 padding:0px;
	}
Aca dejo el link dela pagina :

http://www.damonmx.net/pruebas/index.html
__________________
damonmx - weblog
  #2 (permalink)  
Antiguo 08/04/2005, 20:38
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Te ayudo con algo rápido...

1-. Justo antes de cerrar el div "contenido-medio", agrega un div vacío y le asignas una clase (lo que ves en negrita es el tag de cierre de "contenido-medio"):
<div class="clear"></div>
</div>

2-. En el CSS quitale los height a "info" y "contenido-medio"

3-. Agrega el estilo para la clase "clear":
.clear{ clear:both; height:1px;}
__________________
El conocimiento es libre: Movimiento por la Devolución
  #3 (permalink)  
Antiguo 08/04/2005, 22:29
Avatar de damonmx  
Fecha de Ingreso: enero-2002
Ubicación: Mexico
Mensajes: 280
Antigüedad: 15 años, 10 meses
Puntos: 0
Pues me funciono se ha arreglado, muchas gracias por tu ayuda

Voy a investigar bien, que es lo que hace esto, ya que no me quedo muy claro, digo para cuando se me presente de nuevo sabeer que hacer. Apenas le estos entiendo poco a esto del CSS.

De nuevo muchas gracias
__________________
damonmx - weblog
  #4 (permalink)  
Antiguo 08/04/2005, 23:09
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Te explico a groso modo...

Estuve buscando una solucion para no recurrir al html, pero como no recuerdo la página donde vi esa respuesta opté por hacer algunos cambios en el html.

1-. Le quité el height a esos 2 divs ya que en Firefox eso se usa para un tamaño fijo, y y el contenido es mayor (en este caso texto) este se desbordaria y el div seguria manteniendo la misma altura inicial, asi que quedaron sin tamaño definido.

2-. El div "contenido-medio" tal como mencionabas, tendria 2 divs interiores, "info" y "lateral". Como "info" es un elemento flotante, no hace crecer al div "contenido-medio" a medida que va teniendo más contenido. Entonces lo que hice fue agregar un tercer div vacio que hará de "separador" por decirlo de alguna manera (por eso le asigno solo 1px de altura). A ese div "invisible" le doy la propiedad clear:both; para que se vaya moviendo a medida que crece el div flotante que esta antes que el (en este caso "info"). Y el traslado de este DIV es el que influye en que "contenido-medio" vaya creciendo, a medida que en "info" agregas contenido.
__________________
El conocimiento es libre: Movimiento por la Devolución
  #5 (permalink)  
Antiguo 11/04/2005, 13:25
Avatar de damonmx  
Fecha de Ingreso: enero-2002
Ubicación: Mexico
Mensajes: 280
Antigüedad: 15 años, 10 meses
Puntos: 0
Doblemente gracias ya he entendido como es que trabaja ese div invisible, que la verdad ya me tenian loco eso dos div
__________________
damonmx - weblog
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 20:12.