Problemas con el footer. no baja

opzina · #1 (**permalink**) 04/03/2009, 17:15

Aqui pueden ver el problema

No se cual es el problema que afecta. ya que el footer esta fuera del div contenedor. y utilize la propiedad clear:both;

Aqui los codigos:

html:

Código HTML:

<body>

<div id="contenedor">

<div id="header"> 

<div id="logo">

<div id="logoimg"><img src="img/nube.png" alt="0" /></div>

</div>

<div id="linkhead">

   <div class="linkit"><a href="#">sitemap</a> </div>
    <div class="linkit"><a href="#">idioma</a> </div>
    <div class="linkit"><a href="#">personalizar</a> </div>
</div>


</div>



<div id="menu">

<div id="links">

<div class="link"><img name="home" src="img/home.png" alt=""/></div>
  
<div class="link"><img src="img/contacto.png" alt=""  /></div>

<div class="link"><img src="img/turnos.png" alt="" /></div>

<div class="link"><img src="img/enlaces.png" alt="" /></div>

<div class="link"><img src="img/blog.png" alt="" /> </div>

<div class="link"><img src="img/curriculum.png" alt="" /> </div>

</div>





<div class="wrapper"></div>

<div id="cuerpo">

<div id="cuerpotop">

<div id="bienvenido"><img src="img/bienvenido.gif" alt="" /></div>


<div id="signin"><img src="img/signin.png" alt="" /></div>

</div>

<div class="wrapper"></div>

<div id="cuerpomed">

<div class="caja1">


    <div class="cajaarriba1"> 
       <div class="cajaabajo"> 
       <p>Contenido</p>
       <p>Contenido</p>
       <p>Contenido</p>
       <p>Contenido</p>
       <p>Contenido</p>

       </div> 
    </div> 










</div>

<div class="caja1">

<div class="caja"> 
    <div class="cajaarriba2"> 
       <div class="cajaabajo"> 
       <p>Contenido</p>
       <p>Contenido</p>
       <p>Contenido</p>
       <p>Contenido</p>
       <p>Contenido</p>



       </div> 
    </div> 
</div> 



</div>

<div class="caja1">


<div class="caja"> 
    <div class="cajaarriba3"> 
       <div class="cajaabajo"> 
       <p>Contenido</p>
       <p>Contenido</p>
       <p>Contenido</p>
       <p>Contenido</p>
       <p>Contenido</p>



       </div> 
    </div> 
</div> 




</div>


</div>





</div>

</div>




</div>


<div id="footer">

	<p class="legal">Copyright &copy; 2008 Nutrimel. Todos los derechos reservados.</p>
	<p class="legal"><a href="#">Disclaimer</a> | <a href="#">Terms of Use</a> | Designed by <a href="#">isomerasa</a>.</p>

</div>


</body>

CSS:

Código HTML:

@charset "utf-8";
/* CSS Document */


BODY{
margin:0px 0px 0px 0px;
background:url(img/fondoindex.jpg) no-repeat;
font:100% Times New Roman, Times, serif;
color:#000000;
text-align:center;
}

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

#contenedor
{
text-align:left;
width:900px;
margin:auto;
}



#header{
float:left;
width:100%;
height:225px;
background: #66CCFF url(img/fondo_header.png) no-repeat;
border-top:thin solid #FFCCFF;
}

#logo{
float:left;
width:40%;
height:225px;
}

#logoimg{
width:231px;
position:relative;
top:15px;
left:65px;
}


#algo{
float:left;
width:25%;
}

#linkhead{
float: right;
width:11%;
font:10px "Verdana", Arial, Helvetica, sans-serif;
padding-left:14%;
height:150px;
padding-top:75px;
}

.linkit{
margin-bottom:5px;
}


.wrapper{
clear:both;
margin: 0px auto;
}

#menu{
background: url(img/fondo_cuerpo.jpg) repeat-x;
float:left;
width:100%;
margin:0px 0px 0px 0px;
}

#links{

float:left;
width:100%;
}

.link{
float: left;
width:auto;
margin-left:20px;
}



#cuerpo{
float:left;
width:100%;
}

#cuerpotop{
float:left;
width:100%;
margin-top:20px;

}


#bienvenido{
float:left;
margin-left:5px;
width:520px;
}


#signin{
float:right;
width:250px;
margin-top:5px;
padding-left:50px;
}

#cuerpomed{
float:left;
width:100%;
margin-top:20px;
}

.caja1{
float:left;
width:300px;
}


.cajaarriba1 {
background-image: url(img/posttop.gif);
background-position: top center;
background-repeat: no-repeat;
height:40px;
}
.cajaabajo {
background-image: url(img/postbott.gif);
background-position: bottom center;
background-repeat: no-repeat;
padding: 25px 15px 25px 15px;
} 

.cajaarriba2 {
background-image: url(img/postenlaces.gif);
background-position: top center;
background-repeat: no-repeat;
height:40px;
}


.cajaarriba3 {
background-image: url(img/fichas.gif);
background-position: top center;
background-repeat: no-repeat;
height:40px;
}

/* Footer */

#footer {
	clear: both;
	margin : 40px 0 50px 0; 
	padding: 25px;
	background: #CCCCFF;
	border-top: 1px solid #0066CC;

}

#footer p {
	width:100%;
	margin: 0 ;
	font-size: x-small;
	text-align:center;
	
}
.legal
{
	font-size:12px;
	color:#3366FF;
}

lemattma · #2 (**permalink**) 04/03/2009, 17:34

aveces los divs no bajan y como que no tienen height o un heighy muy pequeño, por una razon que aun no entiendo bien.
Prueba poniendo overflow:auto a los divs, anda probando de arriba hacia abajo, esto hace que el height del div sea el real.

opzina · #3 (**permalink**) 04/03/2009, 17:53

Lo solucione a medias...

Agregue al div contenedor

min-height:xxx;
height:auto;
}

el tema es que (y lo suponia) cdo agrego contenido a las cajas "ultimos post" "ultimos enlaces" "fichas" el contenido de estas pasa por encima del footer.

pd: probe con la propiedad overflow:auto; pero me aparece el scroll....supongo q hay problemas de alturas...en lso divs...estara dado por las imagenes??..

lemattma · #4 (**permalink**) 04/03/2009, 17:57

el overflow:auto tiene que ser sin height, si le quitas el height te funcionara lo que te expliqué.

jomaruro · #5 (**permalink**) 04/03/2009, 17:59

Hola:

Al div contenedor en el CSS añádele lo siguiente:

Código:

overflow:hidden;

espero haberte ayudado.

Saludos.

opzina · #6 (**permalink**) 04/03/2009, 19:26

Gracias...

Les comento: el footer paso abajo, sin embargo la propiedad overflow:hidden hace desaparecer el contenido de las cajas , ultimos post, ultimos enlaces y fichas.

???

willyfc · #7 (**permalink**) 04/03/2009, 19:35

prueba con height:auto y overflow:auto

opzina · #8 (**permalink**) 04/03/2009, 19:40

asi queco con height:auto y overflow:auto | ver

opzina · #9 (**permalink**) 04/03/2009, 19:42

quieren que suba un archivo zip con todo incluyendo las imagenes?? asi lo ven visualmente?

opzina · #10 (**permalink**) 04/03/2009, 21:23

LOOO Solucioneeeee..
LAAA LALALAAAAAAAAAAA

SOYY FELIZZZ!!!!

jejjeje

Gracias a todoss...por su granito de arenaa!!

saludos.

jomaruro · #11 (**permalink**) 05/03/2009, 13:40

Hola:

¿Y como lo has solucionado al final?

Saludos.