Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/03/2011, 06:10
Avatar de Dundee
Dundee
 
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 22 años, 5 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