Foros del Web » Creando para Internet » CSS »

problema con fondo y height que varía

Estas en el tema de problema con fondo y height que varía en el foro de CSS en Foros del Web. Hola gente, el tema es que no se como hacer para que me funcione que el fondo del largo (height) sea dinámico. Tengo dos capas ...
  #1 (permalink)  
Antiguo 10/03/2011, 07:23
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 21 años, 9 meses
Puntos: 8
problema con fondo y height que varía

Hola gente, el tema es que no se como hacer para que me funcione que el fondo del largo (height) sea dinámico.
Tengo dos capas

Css que tengo
Código:
//Esta contiene a la otra capa y es la que hace que el borde final sea redondeado
.bg_verdoso {background-color:#6DAE37; 
min-height:598px; 
height:auto !important;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

.bg_content {background: url(../images/content.png) ; background-position:center top; background-repeat:no-repeat;height: auto !important;}
El html no lo voy a poner todo por que no lo creo necesario, pondré solo la parte que nos interesa:
Código:
<div class="bg_verdoso">
   <div class="bg_content">
  El height del contenido que va aquí dentro va a tener que variar en función de la cantidad de noticias que se carguen.
  </div>
</div> <!-- fin bg_verdoso -->
No entiendo porque no es atomático el height cuando en ambas clases he puesto height:auto .
Gracias de antemano.
__________________
Videotutoriales de Drupal
  #2 (permalink)  
Antiguo 10/03/2011, 08:06
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: problema con fondo y height que varía

La razón es que has definido una altura mínima con min-height:598px. La propiedad height:auto no es necesaria. Puedes borrarla y el div seguirá adaptándose al contenido.
Trata de disminuir el min-height para que el redondeado inferior siga viéndose cuando no haya contenido, o elimínalo si no quieres que se vea el div.bg_verdoso cuando esté vacío.
La solución habitual suele hacer uso del padding para eliminar la posibilidad de que el texto salga por fuera de las esquinas redondeadas.
  #3 (permalink)  
Antiguo 10/03/2011, 10:03
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 21 años, 9 meses
Puntos: 8
Respuesta: problema con fondo y height que varía

Cita:
Iniciado por sanxuan Ver Mensaje
La razón es que has definido una altura mínima con min-height:598px. La propiedad height:auto no es necesaria. Puedes borrarla y el div seguirá adaptándose al contenido.
Trata de disminuir el min-height para que el redondeado inferior siga viéndose cuando no haya contenido, o elimínalo si no quieres que se vea el div.bg_verdoso cuando esté vacío.
La solución habitual suele hacer uso del padding para eliminar la posibilidad de que el texto salga por fuera de las esquinas redondeadas.
Gracias por tu respuesta pero no funciona.
El tema es que si quito el min-height de bg_verdoso no sucede absolutamente nada (ahí si tienes razón) , ya que crece de forma automática; pero el problema es si quito el min-height de .bg_content o si lo pongo más pequeño , la capa NO crece sola y cuando ahi mas contenido este sale por fuera, no se como hacer para que aumente de forma automática .

Un saludo y gracias

Gracias
__________________
Videotutoriales de Drupal
  #4 (permalink)  
Antiguo 10/03/2011, 10:31
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: problema con fondo y height que varía

Supongo que has probado a mantener la propiedad height:auto en los dos div. Tal vez sea necesario mantenerla para sobreescribir alguna regla definida en otra parte del css que no podemos ver.
Si tienes la página subida a internet sería buena idea dejar un enlace para echarle un vistazo.
Un saludo.

Continúo en este mismo mensaje. Acabo de probar tu código tal cual está y puede que sea el comentario ( //Esta contiene a la otra capa...) el que esté provocando el problema.
Los comentarios en css se encierran entre los caracteres "/*" y "*/ "( /* Esto es un comentario css */).

Última edición por sanxuan; 10/03/2011 a las 10:44
  #5 (permalink)  
Antiguo 10/03/2011, 10:52
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 21 años, 9 meses
Puntos: 8
Respuesta: problema con fondo y height que varía

Cita:
Iniciado por sanxuan Ver Mensaje
Supongo que has probado a mantener la propiedad height:auto en los dos div. .
Si , de hecho así lo tengo:

Css
Código:
.bg_verdoso {background-color:#6DAE37; 
height:auto;

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}
.bg_content {background: url(../images/bg_content.png) ; 
background-position:center top;
 background-repeat:no-repeat;
 margin:85px 0; 
 /*min-height: 698px; */
 height: auto;
 }
Básicamente he pegado lo mismo que en el anterior post , pero bueno para evitar confusiones he creído conveniente hacerlo.
No la puedo mostrar porque no está subida a inet, esta en local.

De todas formas según yo entiendo min-height es para darle un mínimo de largo a una capa (siendo este automático) ; lo que no entiendo es porque tengo que darle min-height: 698px y no hace esto automáticamente, cuando todo el contenido al que me refiero está dentro de ambas capas. Voy a pegar todo el html por si las moscas.


Html
Código:
<div id="container">
<div class="top">imagen cabecera</div>

<div class="header"> 
	<div class="user1"><h1>titulo</h1></div>
	<div class="menu_head"><div class="user2"></div></div>
  
</div><!-- end header -->

<div class="cuerpo"><!-- comienza cuerpo -->
 <div class="bg_verdoso">
	<div class="bg_content"> <!-- comienza bg_content --> 
	
       Contenido del sitio (va todo aquí)
		
	</div><!-- end bg_content -->
	
	
</div> <!-- end bg_verdoso -->
	

</div> <!-- end cuerpo -->	
<!--  <div class="bg_bt_content"> </div> -->
<div class="clr" />
<div class="footer">créditos</div>
</div><!-- end container -->
Mil gracias por la ayuda :(
__________________
Videotutoriales de Drupal
  #6 (permalink)  
Antiguo 10/03/2011, 11:11
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 21 años, 4 meses
Puntos: 11
Respuesta: problema con fondo y height que varía

Prueba asignando un min-height y un height: auto !important;

Saludos.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #7 (permalink)  
Antiguo 10/03/2011, 11:41
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 21 años, 9 meses
Puntos: 8
Respuesta: problema con fondo y height que varía

Cita:
Iniciado por mdk Ver Mensaje
Prueba asignando un min-height y un height: auto !important;

Saludos.
Jeje eso lo tenía antes y me aconsejaron en los foros quitarlo (mira un pelín mas atras).
Gracias de todos modos.
__________________
Videotutoriales de Drupal

Etiquetas: fondo, height
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:40.