Foros del Web » Creando para Internet » CSS »

problemas con el background del footer

Estas en el tema de problemas con el background del footer en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/11/2010, 01:39
 
Fecha de Ingreso: marzo-2010
Mensajes: 40
Antigüedad: 7 años, 8 meses
Puntos: 0
problemas con el background del footer

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{
clearboth;
width100%;
height450px;
color:#ccc;
border-top1px 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:200pxmargin-top:30px; }
.
columna_2{background:url(img/columna1.pngleft repeat-yfloat:left;height:400px;margin:10px 10px 0 0;width:200pxpadding-left:10pxmargin-top:30px;}
.
columna_3float:left;height:180px;margin:10px 10px 0 0;width:200pxpadding-left:10pxmargin-top:30px;}
.
columna_4float:left;height:140px;margin:10px 10px 0 0;width:200pxpadding-left:10pxmargin-top:30px;} 
  #2 (permalink)  
Antiguo 06/11/2010, 01:52
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: problemas con el background del footer

Cita:
Iniciado por kratzor Ver Mensaje
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{
clearboth;
width100%;
height450px;
color:#ccc;
border-top1px 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:200pxmargin-top:30px; }
.
columna_2{background:url(img/columna1.pngleft repeat-yfloat:left;height:400px;margin:10px 10px 0 0;width:200pxpadding-left:10pxmargin-top:30px;}
.
columna_3float:left;height:180px;margin:10px 10px 0 0;width:200pxpadding-left:10pxmargin-top:30px;}
.
columna_4float:left;height:140px;margin:10px 10px 0 0;width:200pxpadding-left:10pxmargin-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!
  #3 (permalink)  
Antiguo 06/11/2010, 01:58
 
Fecha de Ingreso: marzo-2010
Mensajes: 40
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: problemas con el background del footer

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{
clearboth;
width100%;
height450px;
color:#ccc;
border-top1px 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:200pxmargin-top:30px; }
.
columna_2{background:url(img/columna1.pngleft repeat-yfloat:left;height:400px;margin:10px 10px 0 0;width:200pxpadding-left:10pxmargin-top:30px;}
.
columna_3float:left;height:180px;margin:10px 10px 0 0;width:200pxpadding-left:10pxmargin-top:30px;}
.
columna_4float:left;height:140px;margin:10px 10px 0 0;width:200pxpadding-left:10pxmargin-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
  #4 (permalink)  
Antiguo 06/11/2010, 02:13
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: problemas con el background del footer

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.. ;)
  #5 (permalink)  
Antiguo 06/11/2010, 02:39
 
Fecha de Ingreso: marzo-2010
Mensajes: 40
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: problemas con el background del footer

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==??
  #6 (permalink)  
Antiguo 06/11/2010, 04:43
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problemas con el background del footer

Hola:

¿Y cual es el contenedor del footer?

Saludos.

  #7 (permalink)  
Antiguo 06/11/2010, 12:02
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: problemas con el background del footer

Cita:
Iniciado por kratzor Ver Mensaje
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:
<div id="contenedor">
<div id="contenedorFooter"></div>
</div>
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:
<div id="contenedor"></div>
<div id="contenedorFooter"></div>
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!
  #8 (permalink)  
Antiguo 06/11/2010, 16:35
 
Fecha de Ingreso: marzo-2010
Mensajes: 40
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: problemas con el background del footer

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

Etiquetas: footer
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 10:43.