problemas con el background del footer

kratzor · #1 (**permalink**) 06/11/2010, 00:39

Bueno pues el problema que tengo es que quiero ponerle un fondo de color al footer el problema que tengo es que no me deja ponetlo en toda la pantalla pongo el codigo CSS para que mas o menos me puedan decir cual es mi problema.

Código PHP:

  #footer{

clear: both;

width: 100%;

height: 450px;

color:#ccc;

border-top: 1px solid #cccccc;;

background:#474747;

}

 
#footer a            {font:"Times New Roman", Times, serif; color:#ccc; font-size:10pt; text-decoration: none;}

#footer a:link, 

#footer a:visited    {font:"Times New Roman", Times, serif; color:#ccc; font-size:10pt;}

#footer a:hover    {font:"Times New Roman", Times, serif; color:#ccc; font-size:10pt; text-decoration: underline;}

 
*{margin:0 auto;padding:0;}

.all{width:900px; }

.columna_1{float:left;height:250px;margin:10px 10px 0 0;width:200px; margin-top:30px; }

.columna_2{background:url(img/columna1.png) left repeat-y; float:left;height:400px;margin:10px 10px 0 0;width:200px; padding-left:10px; margin-top:30px;}

.columna_3{ float:left;height:180px;margin:10px 10px 0 0;width:200px; padding-left:10px; margin-top:30px;}

.columna_4{ float:left;height:140px;margin:10px 10px 0 0;width:200px; padding-left:10px; margin-top:30px;}

PrendekZ · #2 (**permalink**) 06/11/2010, 00:52

Cita:

Iniciado por kratzor

Bueno pues el problema que tengo es que quiero ponerle un fondo de color al footer el problema que tengo es que no me deja ponetlo en toda la pantalla pongo el codigo CSS para que mas o menos me puedan decir cual es mi problema.

Código PHP:

  #footer{

clear: both;

width: 100%;

height: 450px;

color:#ccc;

border-top: 1px solid #cccccc;;

background:#474747;

}

 
#footer a            {font:"Times New Roman", Times, serif; color:#ccc; font-size:10pt; text-decoration: none;}

#footer a:link, 

#footer a:visited    {font:"Times New Roman", Times, serif; color:#ccc; font-size:10pt;}

#footer a:hover    {font:"Times New Roman", Times, serif; color:#ccc; font-size:10pt; text-decoration: underline;}

 
*{margin:0 auto;padding:0;}

.all{width:900px; }

.columna_1{float:left;height:250px;margin:10px 10px 0 0;width:200px; margin-top:30px; }

.columna_2{background:url(img/columna1.png) left repeat-y; float:left;height:400px;margin:10px 10px 0 0;width:200px; padding-left:10px; margin-top:30px;}

.columna_3{ float:left;height:180px;margin:10px 10px 0 0;width:200px; padding-left:10px; margin-top:30px;}

.columna_4{ float:left;height:140px;margin:10px 10px 0 0;width:200px; padding-left:10px; margin-top:30px;}

¿Sinceramente?

No entendí, explicarte mejor ¿Puedes hacer una imagen en photoshop de lo que deseas?

y también publica tanto el html como el CSS, para entender el código.

Saludos!

kratzor · #3 (**permalink**) 06/11/2010, 00:58

Bueno pues el problema que tengo es que quiero ponerle un fondo de color al footer el problema que tengo es que no me deja ponetlo en toda la pantalla pongo el codigo CSS para que mas o menos me puedan decir cual es mi problema.

Código PHP:

  #footer{

clear: both;

width: 100%;

height: 450px;

color:#ccc;

border-top: 1px solid #cccccc;;

background:#474747;

}

 
#footer a            {font:"Times New Roman", Times, serif; color:#ccc; font-size:10pt; text-decoration: none;}

#footer a:link, 

#footer a:visited    {font:"Times New Roman", Times, serif; color:#ccc; font-size:10pt;}

#footer a:hover    {font:"Times New Roman", Times, serif; color:#ccc; font-size:10pt; text-decoration: underline;}

 
*{margin:0 auto;padding:0;}

.all{width:900px; }

.columna_1{float:left;height:250px;margin:10px 10px 0 0;width:200px; margin-top:30px; }

.columna_2{background:url(img/columna1.png) left repeat-y; float:left;height:400px;margin:10px 10px 0 0;width:200px; padding-left:10px; margin-top:30px;}

.columna_3{ float:left;height:180px;margin:10px 10px 0 0;width:200px; padding-left:10px; margin-top:30px;}

.columna_4{ float:left;height:140px;margin:10px 10px 0 0;width:200px; padding-left:10px; margin-top:30px;}

Este seria la forma en que se ve el footer.

Este el HTML

Código PHP:

 
<div id="footer"> 

<div class="all"> 

    <div class="columna_1">

        <img src="<?php bloginfo('stylesheet_directory'); ?>/img/fotlogo.png" border="0" /><br /><br />

        <a href="#"><h4>Inicio</h4></a>

        <a href="#"><h4>Misi&oacute;n Visi&oacute;n y Objetivo</h4></a>

        <a href="#"><h4>Hisoria y actualidad</h4></a>

        <a href="#"><h4>Himno</h4></a>

        <a href="#"><h4>Mapa de ubicaci&oacute;n</h4></a>   

    </div> 

    <div class="columna_2">

           <h4 class="Estilo1">Licenciaturas</h4>

        <a href="#">Derecho<br /></a>

        <a href="#">Contaduria<br /></a>

             <a href="#">Administracci&oacute;n<br /></a>

        <a href="#">Ing. en computaci&oacute;n<br /></a> 

        <a href="#">Psicolog&iacute;a<br /></a>

        <a href="#">Arquitectura<br /></a>

        <a href="#">Criminolog&iacute;a<br /></a>

        <a href="#">Comunicaci&oacute;n<br /></a>

        <a href="#">Dise&ntilde;o gr&aacute;fico<br /></a>

          <a href="#">Gastronom&iacute;a<br /></a>

        <a href="#">Nutrici&oacute;n<br /></a>

        <a href="#">Qu&iacute;mico farmac&eacute;utico bi&oacute;logo<br /></a>

        <a href="#">Lenguas<br /></a>

        <a href="#"><h4 class="Estilo1">Preparatoria</h4></a>

        <a href="#"><h4 class="Estilo1">CELe</h4></a>

           <h4 class="Estilo1">Maestrias</h4>

        <a href="#">Derecho fiscal<br /></a>

             <a href="#">Administracci&oacute;n<br /></a>

        <a href="#">Derecho constitucional y amparo<br />

        </a> 

        <a href="#">Educaci&oacute;n y administraci&oacute;n escolar<br />

        </a>

      <a href="#">Psicologia de la salud<br />

        </a>

        <a href="#">Criminolog&iacute;a</a><a href="#"><br />

        </a>

        <a href="#">

        <h4 class="Estilo1">Doctorado en educaci&oacute;n</h4>

         </a        

 
        

        

    ></div> 

    <div class="columna_3"> 

           

           <h4 class="Estilo1">Extenci&oacute;n universitaria</h4>

           

        <a href="#">Cursos talleres y diplomados<br /></a>

             <a href="#">CISAEC<br /></a>

        <a href="#">Servicio social y practicas profecionales<br />

        </a> 

        <a href="#">Talleres artisticos y difuci&oacute;n cultural<br />

        </a>

        <a href="#">Promotoria deportiva<br />

        </a>

        <h4 class="Estilo1">Publicaciones</h4>

      <a href="#">Hoja del jaguar<br />

        </a>

           <a href="#"><h4 class="Estilo1">Galeria</h4></a>

 
         

    </div>   

    <div class="columna_4"> 

        <h4 class="Estilo1">Contacto</h4>

        <a href="mailto:[email protected]">[email protected]<br /></a>

             Avenida universidad s/n Carretera Ixtlahuaca-Jiquipilco Km. 1 Ixtlahuaca Edo. Mex.<br />

        <h4 class="Estilo1">Telefonos</h4>

        (01712) 283-0364<br />

        (01712) 283-1012<br />

        (01712) 283-0166<br />

    </div>  

</div> 

</div>

Y lo que quiero es que el color ocupe todo el ancho de la pogina y el contenido se quede tal cual al pareciodo al footer de del antiguo theme de fayerwayer.com

PrendekZ · #4 (**permalink**) 06/11/2010, 01:13

el html estaba bien, o eso creo!

pero solo toque el CSS que estaba bastante mal muy muy mal!

aquí te dejo el código mejorado:

Cita:

#footer{background:#474747; width:100%; height:450px; color:#ccc; border-top:1px solid #ccc; overflow:hidden; clear:both;}
#footer a{font:"Times New Roman", Times, serif; color:#ccc; font-size:10pt; text-decoration: none;}
#footer a:link,
#footer a:visited{color:#ccc; font-size:10pt;}
#footer a:hover{color:#ccc; font-size:10pt; text-decoration: underline;}
*{margin:0 auto; padding:0;}
.all{width:900px; overflow:hidden;}
.columna_1{width:200px; height:250px; margin:30px 10px 0 0; float:left;}
.columna_2{background:url(img/columna1.png) left repeat-y; width:200px; height:400px; margin:30px 10px 0 0; padding:0 0 0 10px; float:left;}
.columna_3{width:200px; height:180px; margin:30px 10px 0 0; padding:0 0 0 10px; float:left;}
.columna_4{width:200px; height:170px; margin:30px 10px 0 0; padding:0 0 0 10px; float:left;}

Espero que te sirva.. ;)

kratzor · #5 (**permalink**) 06/11/2010, 01:39

Si ya lo cheque estab fatal pero no me resolvio el problema que tengo que es que el color ocupe todo el ancho de la pagina si siquiera con Float:left; en el div principal funciona como le hago==??

jomaruro · #6 (**permalink**) 06/11/2010, 03:43

Hola:

¿Y cual es el contenedor del footer?

Saludos.

PrendekZ · #7 (**permalink**) 06/11/2010, 11:02

Cita:

Iniciado por kratzor

Si ya lo cheque estab fatal pero no me resolvio el problema que tengo que es que el color ocupe todo el ancho de la pagina si siquiera con Float:left; en el div principal funciona como le hago==??

Ya entiendo!

Seguramente tienes el contenedor del menú dentro del contenedor del sitio y si ya le haz dado un ancho al contenedor principal por ejemplo:

Cita:

CSS:

Cita:

#contenedor{width:960px; margin:0 auto;}
#contenedorFooter{width:100%;}

En caso de tener lo anterior, el contenedor del footer nunca se mostrará al 100% ancho de la pantalla ¿Porqué? porque estas diciendole que sea 100% ancho, pero del contenedor principal es decir 960px en mi caso.

Para solucionar esto, tienes que sacar el footer del contenedor:

Cita:

De esta forma ya tiene que funcionar, para arreglar estos tipos de errores no tienes que publicar solamente el html de el footer, la próxima vez al publicar un mensaje encargate de que lo que copiaste sea suficiente para ayudarte.

Saludos!

kratzor · #8 (**permalink**) 06/11/2010, 15:35

Gracias PrendekZ me sirvio de mucho la ultima respuesta estaban mal colocados los dic por eso el css no identificaba bien todo el HTML.