Foros del Web » Creando para Internet » CSS »

problema con capas

Estas en el tema de problema con capas en el foro de CSS en Foros del Web. Buenas a todos! Tengo el siguiente problema: tengo dos capas, div1 y div2, una encima de otra. Las dos llevan su contenido, sin embargo quiero ...
  #1 (permalink)  
Antiguo 15/03/2011, 10:35
 
Fecha de Ingreso: octubre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
problema con capas

Buenas a todos!

Tengo el siguiente problema:

tengo dos capas, div1 y div2, una encima de otra.

Las dos llevan su contenido, sin embargo quiero que div1 no tengo definido "height" de tal forma que al introducir contenido en ella la altura sea automática y por lo tanto div2 irá bajando empujada por el contenido que vaya introduciendo en div1.

Intento hacerlo, pero lo único que consigo es que el contenido de div2 aparezca a la misma altura que el principio de div1 y la única manera de conseguir que se vea bien es dándole una altura predefinida a div1, o sea, que tenga "height"...

¿Alguien me puede dar alguna idea para conseguirlo y no volverme loco?

Muchas gracias!
  #2 (permalink)  
Antiguo 15/03/2011, 11:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con capas

Pues ese debería ser el comportamiento natural y por defecto de las dos cajas (que no capas).
Si tienen otro debe ser por las propiedades que haya definido.
Y no, no se cuales pueden ser sin ver sus códigos, tanto el html generado como el css que aplica ya sea por declaración expresa o por herencias.
  #3 (permalink)  
Antiguo 15/03/2011, 12:31
 
Fecha de Ingreso: octubre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: problema con capas

Buenas, tienes razón, adjunto los códigos:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
<title>sin titulo</title>
</head>

<body>
<div id="caja">
<div id="cabecera"><a title="home" href="index.html"><img class="ecovives" border="0" src="../img/ecovives.png" alt="logo ecovives" /></a><a title="Fabricado y diseñado en España" href="#"><img class="fabricado" border="0" src="../img/logo-fabricado.png" alt="logo fabricado y diseñado en españa" /></a><div id="menu"><ul><li class="texto_menu"><a href="index.html">INICIO</a></li><li class="texto_menu"><a href="politica.html">POLÍTICA MEDIOAMBIENTAL</a></li><li class="texto_menu_sel">NUESTRAS ACTUACIONES</li><li class="texto_menu"><a href="noticias.html">NOTICIAS</a></li><li class="texto_menu"><a href="enlaces.html">ENLACES</a></li></ul></div><a title="Vives Azulejos y Gres" href="http://www.vivesceramica.com"><img border="0" class="vives" src="../img/vives.png" alt="logo vives" /></a><div id="idiomas"><a title="español" href="index.html"><img class="distancia" border="0" src="../img/idioma-es.png" /></a><a title="english" href="../en/index.html"><img class="distancia" border="0" src="../img/idioma-en.png" /></a></div>
</div>
<div id="subcabecera_cont">
<p class="acciones_sup"><span class="acciones_sup_texto"><strong>NUESTRAS ACTUACIONES</strong></span></p>
</div>
<div id="cuerpo_acciones">
<div id="acciones_elementos">
<div class="elemento"><a title="residuos" href="residuos.html"><img border="0" alt="residuos" src="../img/residuos.png" /></a><p class="acciones_texto">Valorización de lodos y suspensiones acuosas de las líneas de esmaltado y preparación de esmaltes, residuos de baldosas antes de cocción y polvos en las plantas de atomización.</p></div><div class="elemento"><a title="agua" href="recursos.html"><img border="0" alt="agua" src="../img/agua.png" /></a><p class="acciones_texto">Depuración y reutilización del agua en las líneas de corte, pulido y biselado. Reciclado en las plantas de atomización del 100% de las aguas de proceso de las líneas de esmaltado.</p></div><div class="elemento2"><a title="energía" href="energia.html"><img border="0" alt="energia" src="../img/energia.png" /></a><p class="acciones_texto">Dos instalaciones de cogeneración producen calor útil para el proceso de atomización y energía eléctrica para abastecer a las plantas productivas.</p></div>
<div class="elemento"><a title="emisiones atmosfericas" href="atmosfera.html"><img border="0" alt="emisiones atmosfericas" src="../img/atmosfera.png" /></a><p class="acciones_texto">Control reglamentario, autocontrol y buenas prácticas para la reducción de las emisiones atmosféricas.</p></div><div class="elemento"><a title="contaminación acustica" href="acustica.html"><img border="0" alt="contaminacion acustica" src="../img/acustica.png" /></a><p class="acciones_texto">Medidas técnicas y de insonorización dirigidas la reducción de las emisiones acústicas.</p></div><div class="elemento2"><a title="protocolo kioto" href="kioto.html"><img border="0" alt="protocolo kioto" src="../img/kioto.png" /></a><p class="acciones_texto">Participamos en el comercio de derechos de emisión a través de nuestra instalación de atomización de arcillas y cogeneración de la planta de Cerámica Vives I.</p></div>
</div>
</div>
<div id="pie_pagina">
<div id="pie_vertical"><div id="menu_pie"><ul><li class="texto_menu"><a href="index.html">INICIO</a></li><li class="texto_menu"><a href="politica.html">POLÍTICA MEDIOAMBIENTAL</a></li><li class="texto_menu"><a href="actuaciones.html">NUESTRAS ACTUACIONES</a></li><li class="texto_menu"><a href="noticias.html">NOTICIAS</a></li><li class="texto_menu"><a href="enlaces.html">ENLACES</a></li></ul></div></div>
<p class="texto_pie">ecoVIVES - compromiso con el Medioambiente © 2010. Todos los derechos reservados <a href="mailto:[email protected]">[email protected] amica.com</a></p>
</div>
</div>
</body>
</html>


CSS:

/* CSS Document */
#caja{width:1024px; position: absolute; left: 50%; margin-left: -512px;}
#cabecera{width:1024px; height:120px;}
.ecovives{ width:80px; height:80px; position:absolute; margin-top:20px; margin-left:50px;}
.fabricado{ width:72px; height:26px; position:absolute; margin-left:180px; margin-top:92px;}
#menu{ width:670px; height:50px; position:absolute; border-bottom:#FFF solid 2px; margin-left:302px; margin-top:68px;}
#menu ul li{list-style:none; display: inline;}
#menu a{color:#818386;}
#menu a:hover{color: #A9001D;}
.guion{font-size:17px; margin-left:10px; font-weight:bold;}
.texto_menu{ font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#898B8D; padding-right:28px;}
.texto_menu_sel{ font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#A9001D; padding-right:28px;}
body {background-image:url(img/fondo-technical.jpg); background-repeat:repeat-x; background-color:#000000;}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.vives{width:39px; height:39px; position:absolute; margin-top:20px; margin-left:900px;}
#idiomas{ width:32px; height:77px; position:absolute; margin-top:20px; margin-left:980px; background-color:#15140C;}
.distancia{ padding-top:7px; padding-left:8px; }
#subcabecera_cont{ width:1024px; height:280px;}
.acciones_sup{ width:920px; height:230px; position:absolute; background-image:url(img/acciones-sup.png); margin-top:42px; margin-left:50px;}
.acciones_sup_texto{ width:200px; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#FFF; margin-left:65px; margin-top:205px; position:absolute;}
#cuerpo_acciones{ width:1024px; height:480px; border-bottom:#555658 solid 1px;}
#acciones_elementos{ width:920px; height:430px; position:absolute; margin-left:50px; margin-top:50px;}
.elemento{ width:290px; height:151px; float:left; margin-right:25px; margin-bottom:60px;}
.elemento2{ width:290px; height:151px; float:left;}
.elemento2 img{ float:left;}
.elemento2 p{ float:right;}
.elemento img{ float:left;}
.elemento p{ float:right;}
.acciones_texto{ font-family:Verdana, Geneva, sans-serif; font-size:10px; color:#898B8D; text-align:justify; width:120px; line-height:13px; margin-top:0px;}
#pie_pagina{ width:1024px; height:120px;}
#pie_vertical{ width:1024px; height:50px;border-bottom:#555658 solid 1px;}
#menu_pie{ width:700px; height:50px; position:absolute; border-bottom:#FFF solid 2px; margin-left:190px;}
#menu_pie ul li{list-style:none; display: inline;}
#menu_pie a{color:#C2001A;}
#menu_pie a:hover{color: #FFF;}
.texto_pie{ font-family:Verdana, Geneva, sans-serif; font-size:10px; color:#FFF; margin-left:230px; margin-top:30px;}
#pie_pagina a{color:#C2001A;}
#pie_pagina a:hover{color:#C2001A;}


Para ver cual es mi problema, en la caja #cuerpo_acciones quita "height", de tal manera:

#cuerpo_acciones{ width:1024px; height:480px; border-bottom:#555658 solid 1px;}


Verás que sin ese campo la caja que viene después "#pie_pagina" monta con esa...


Muchas gracias!
  #4 (permalink)  
Antiguo 15/03/2011, 13:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con capas

Cita:
Iniciado por kseso? Ver Mensaje
Si tienen otro debe ser por las propiedades que haya definido.
Está haciendo un uso indebido de position:absolute y demás propiedades asociadas/obligado por esa.
Elimíne todo lo absolute y los márgenes o left/top que usa y deje que fluya el html.
Utilice algún tipo de reset
En #acciones_elementos limpie los float (overflow)
Con lo anterior y depurando un mínimo su código le debería quedar así:


He coloreado algún background para que se vean las posiciones que adoptan las cajas (div´s) principales.
  #5 (permalink)  
Antiguo 16/03/2011, 12:19
 
Fecha de Ingreso: octubre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: problema con capas

Muchas gracias, he podido solucionar el problema!

Etiquetas: capas, layers
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 00:55.