Foros del Web » Creando para Internet » CSS »

Ayuda css alto de fondo automático

Estas en el tema de Ayuda css alto de fondo automático en el foro de CSS en Foros del Web. Hola gente , ya he puesto algún post sobre este tema y no he conseguido a dia de hoy saber donde esta el problema , ...
  #1 (permalink)  
Antiguo 11/03/2011, 06:10
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
Ayuda css alto de fondo automático

Hola gente , ya he puesto algún post sobre este tema y no he conseguido a dia de hoy saber donde esta el problema , cosa que me gustaría sobre todo para aprender algo más de css. El tema de las capas me sigue trayendo de cabeza y sobre todo cuando trabajo con fondos unos encima de otros. El tema es que si pongo un min-height y el contenido supera el mínimo este se sale fuera, pero sino lo pongo el fondo no carga (q lio ¡¡).

Voy a pegar el código en cuestión (omitiendo contenido por tema de espacio), pero si voy a pegar toda la estructura del sitio así como el css haber si alguien me puede ayudar a aclarar esta duda que tantos dolores de cabeza me esta dando.
(No descarto si hiciese falta colgar una demo en inet para poder mostrar mas claro el problema, ahora el sitio esta en local).

EL HTML-->
Código:
<div id="container">
<div class="top"><img src="templates/miimagen.jpg/></div>

<div class="header"> <!-- contiene user1 y user2 -->
	<div class="user1"><h1>misitio.com</h1></div>
	<div class="menu_head"><div class="user2"><jdoc:include type="modules" name="user2" /></div></div>
  
</div><!-- end header -->
	
<div class="cuerpo"><!-- comienza cuerpo -->
   <div class="bg_verdoso">
	<div class="bg_content"> <!-- comienza bg_content --> 
	
		<div class="left" >
<!-- comienza left --><jdoc:include type="modules" name="left" />
             </div><!-- end left -->
	
	<div class="right" >
		 <jdoc:include type="component" /> 
		 <jdoc:include type="modules" name="right" /> 
			
	
	
<div class="acceso"><jdoc:include type="modules" name="user3" /></div>
	 
	</div><!-- end right --> 
	 <div class="clr" /><!-- necesario para fondo -->
	
		
	</div><!-- end bg_content -->
	
	
   </div> <!-- end bg_verdoso -->
	

</div> <!-- end cuerpo -->	
<div class="footer">creditos del sitio</div>

<div class="clr" />
</div><!-- end container -->
El CSS
Código:
html, body, form, fieldset {
	margin: 0;
	padding: 0;
}
body { background:#4b4b4b}
IMG {border:0}
#container {text-align:center; margin:auto; border:1px #000066 solid; }
.top{}
.header { margin:20px 0; position:relative; height:20px}
.header div {float:left}
.menu_head {
    margin: 41px 620px;
    position: absolute;
    width: 60%;
}
.user1 {margin:0px 150px;}
.user2 {
    margin: 0px;
}
.user1 h1 {font-family:Arial, Helvetica, sans-serif; font-size:38px; color:#e2e2e2}
.cuerpo { margin:auto; height: auto !important; width:989px}

.bg_verdoso {background-color:#6DAE37; 
height: auto !important;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}
.bg_content {background: url(../bg_content.png) ; 
background-position:center top;
 background-repeat:no-repeat;
 margin:85px 0;

 }
.bg_content .left {
    float: left;
    margin: 0 25px;

}
.bg_content .right {
    border: 0 solid;
    float: left;
    font-size: 12px;
    margin: 60px 450px;
    position: absolute;
    text-align: left;
    width: 525px;
	clear:both
}
.bg_content .right_ext {
 border: 0 solid;
    float: left;
    font-size: 12px;
    margin: 20px 50px;
    position: absolute;
    text-align: left;
    width: 825px;

}

.clr {clear:both}
.acceso {
    background-image: url("../images/bg_acceso.png");
    background-position: left center;
    background-repeat: no-repeat;
    clear: both;
    float: right;
    height: auto;
    margin: 50px 10px;
    /*width: 500px;*/
}
.acceso #mod_loginform_acceso {padding:40px 0}
.footer {color:#FFFFFF; text-align:center; font-size:12px;margin:-50px 0}
._noticias { font-size:12px; text-align:justify; background:#fff}
.menu_top { list-style:none; }
.menu_top li{display:inline}
Voy matizar unas cosillas que quizás no he dejado muy claro antes:
La idea es la siguiente
2 fondos
1 es una imagen (con bordes redondeados por arriba)
2 es un color que tiene que multiplicarse según el contenido (Aquí esta el problema sin min-height no lo consigo) y termina con bordes redondeados gracias a css.

He estado mirando aquí pero tampoco consigo resolver el problemilla.
__________________
Videotutoriales de Drupal

Última edición por Dundee; 11/03/2011 a las 06:35 Razón: ampliar información
  #2 (permalink)  
Antiguo 11/03/2011, 06:42
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Ayuda css alto de fondo automático

El min-height indica eso, una altura mínima del elemento aunque su contenido no alcance dicho valor. Si el contenido lo sobrepasa, la altura de esa caja crecerá conjuntamente.

Otra cosa totalmente distinta es el hecho de que elementos sacados del flujo del html (por estar flotados, por el posicionamiento dado...) no hagan crecer a su caja padre.
Para esto último se han descrito varias solucciones (limpiar float, overflow, clear...)

Que por cierto, no he sido capaz de encontrar ningún min-height en el código css que ha posteado para identificar de qué caja está hablando.
  #3 (permalink)  
Antiguo 11/03/2011, 06:51
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: Ayuda css alto de fondo automático

Cita:
Iniciado por kseso? Ver Mensaje

Que por cierto, no he sido capaz de encontrar ningún min-height en el código css que ha posteado para identificar de qué caja está hablando.
Gracias por la respuesta , te cuento. El min-height no esta porque no quiero que este , como decía si lo pongo funciona todo bien, pero si crece el contenido el height se queda corto, antes lo tenía así (y funcionaba bien pero pasaba lo que digo). Es como si el contenido por algún motivo no lo tuviera en cuanta y no se porque.

Código:
.bg_verdoso {background-color:#6DAE37; 
height: auto !important;
-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:800px;
 height:auto !important ;
 }
__________________
Videotutoriales de Drupal
  #4 (permalink)  
Antiguo 11/03/2011, 06:53
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: Ayuda css alto de fondo automático

Cita:
Iniciado por kseso? Ver Mensaje

Otra cosa totalmente distinta es el hecho de que elementos sacados del flujo del html (por estar flotados, por el posicionamiento dado...) no hagan crecer a su caja padre.
Para esto último se han descrito varias solucciones (limpiar float, overflow, clear...)
.
La capa que contiene el contenido es right
Si le pongo un clear:both sigue sin funcionar (creo que os referíais a eso).

Gracias
__________________
Videotutoriales de Drupal
  #5 (permalink)  
Antiguo 11/03/2011, 14:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Ayuda css alto de fondo automático

Sugerencia: ponga un enlace a la página en cuestión para reproducir el problema.

Limpiar float
  #6 (permalink)  
Antiguo 11/03/2011, 14:48
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: Ayuda css alto de fondo automático

Cita:
Iniciado por kseso? Ver Mensaje
Sugerencia: ponga un enlace a la página en cuestión para reproducir el problema.

Limpiar float
Me gustaría pero por ahora lo tengo en local, gracias de todos modos por la sugerencia , pero el código entero es ese.
Un saludo
__________________
Videotutoriales de Drupal

Etiquetas: alto, fondo
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 09:24.