Problemas con el footer, parte 2

[redoli]

Buenas compañeros, estuve trasteando el footer la semana pasada, mi web es www.psicohuma.com llevo varios intentos fallidos de hacer desaparecer un rectangulo blanco que aparece en la parte inferior centro/derecha de la pagina que no tengo idea de porque aparece, también me gustaría centrar todo el footer para que quedase alineado y centrado con la página y no como está actualmente que está hacia la izquierda, aquí os dejo el código a ver si me podéis echar una mano.

Código:

<div id="left">                               

    <div id="footer">

      <div class="pagewidth">
        <div id="wrapper-box">
          <span class="siguenos">
            <span id="siguenos"><span style= "font-family: 'Chewy'; font-size:30px">SIGUENOS EN:</span></span>
            <a href="http://www.facebook.com/psicohuma" target="_blank">
            <img src="templates/<?php echo $this->template ?>/images/facebook.png" width="48" height="48" alt="Facebook" /></a>
          <a href="http://www.twitter.com/psicohuma" target="_blank">
            <img src="templates/<?php echo $this->template ?>/images/twitter.png" width="48" height="48" alt="Twitter" /></a>
          <a href="http://www.linkedin.com/pub/paloma-huertas-maestre/4b/b00/a18" target="_blank">
            <img src="templates/<?php echo $this->template ?>/images/linkedin.png" width="48" height="48" alt="Linked In" /></a>
            
            <div class="fb-like" href="http://www.facebook.com/psicohuma" send="true" layout="box_count" width="60" show-faces="false" font="verdana"></div>
              <g:plusone size="tall"></g:plusone>  <a href="https://twitter.com/Psicohuma" class="twitter-follow-button" data-show-count="false" data-lang="es" data-size="large">Seguir a @Psicohuma</a>
          
          
          <script type="text/javascript"> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
          </script>
  
      <div id="footer-bottom">        
        <div class="ftb">  
          <p align="center"> <span style="text-align: center; clear: both; color: #000000; font-size: 16px;"> Calle San Nicolás n°13, 1°C - 29016 Málaga. <strong>Teléfono:</strong> 951 10 80 92 - 626 30 41 84 <br /><br /> <strong>Contacto</strong>:  <a href="mailto:[email protected]" class="nohover">[email protected]</a> <br /><br /> | <a href="http://www.psicohuma.com/aviso-legal" class="nohover">Aviso legal</a> | <a href="http://www.psicohuma.com/proteccion-de-datos" class="nohover">Protección de datos</a> | <a href="http://www.psicohuma.com/condiciones-de-uso" class="nohover">Condiciones de Uso</a> | <a href="http://www.psicohuma.com/mapa-sitio" class="nohover">Mapa del Sitio</a>  <br /> <br /> Copyright © 2012 <a href="http://www.psicohuma.com" class="nohover"><strong>Psicohuma.com</strong></a> |  Todos los derechos reservados.  <font><?php echo $license;?> </font> </span> </p>           
        </div>             
      </div>     
      <div align="center">                       
        <div id="top">                               
          <div class="top_button">                                    
            <a href="#" onclick="scrollToTop();return false;">                        
              <img src="templates/<?php echo $this->template ?>/images/top.png" width="50" height="50" alt="top" /></a>
          </div>
        </div>
      </div>
        </div>
  </div>
</div>
    
</body>
</html>

y aquí os dejo el css del footer:

Código:

/********************/
#footer-top {
float:left;
width:100%;
height:80px;
background: url(../images/footer-top.png) 0 0 repeat-x;

}

#footer{
float:left;
width:100%;
height:340px;
background: url(../images/footer.png) 0 0 repeat;

}

/****box*****/
#wrapper-box {
float:left;
width:100%;
height:10px;
background:transparent;
text-align:center;
margin-top:0px;

}

.box {
margin-top:0px;
text-align:left;
font-weight:normal;
font-size:13px;
width:980px;
float:left;


#footer-bottom {
float:left;
width:100%;
height:30px;
background: transparent;

}

.ftb {
margin-top:20px;
text-align:center;
font-weight:normal;
font-size:13px;
width:860px;
float:left;


}

 .ftb a, .ftb a:visited{
padding:0 !important;
border:none !important;
color:#28180a;

} 

.ftb a:hover {
color:#fff;

}

[redoli]

Subo el tema, a ver si algun alma caritativa me da respuesta

[redoli]

arreglado el tema del rectangulo blanco, era un margin-top que habia en uno de los div, ahora solo me queda centrar el footer

[tommy_tony]

podría ser de esta manera.

Un div=bloque_footer con un width de 100% o no lo pongas que igual tomará el 100% , un height de 300px POR EJEMPLO o el tamaño que quieras
EN ESTE DIV PON LA IMAGEN QUE TIENES DE BACKGROUND.

Dentro de ese div=bloque_footer otro div llamado POR EJEMPLO bloque_footer_centrado, en el que vaya el contenido con una altura y un ancho que tu le debes asignar por ejemplo height:300px, width:600px , margin:auto.
Con eso tendría que centrar

[tommy_tony]

Bueno para que te ayudes

Código:

#bloque_footer{
			background-color:black;
			height:300px;		
		}
		#bloque_footer_centrado{
			background-color:white;
			height:300px;
			width:600px;
			margin:auto;		
		}

Código:

<div id="bloque_footer">
		<div id="bloque_footer_centrado"></div>
	<div>

en lugar de ponerle background-color en bloque_footer le pones background-image para que coloques tu imagen de fondo que tienes.A por cierto si te deja un margen abajo ponle en body margin:0px; eso sería todo. Espero te sirva.