Foros del Web » Creando para Internet » Diseño web »

pie con ancho del navegador

Estas en el tema de pie con ancho del navegador en el foro de Diseño web en Foros del Web. recurro a ustedes porque quiero hacer un pie de pagina que abarque el ancho del navegador, algo como esto: http://www.manriquemateriales.com.ar y no tengo la menor ...
  #1 (permalink)  
Antiguo 26/12/2009, 11:47
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 4 meses
Puntos: 0
pie con ancho del navegador

recurro a ustedes porque quiero hacer un pie de pagina que abarque el ancho del navegador, algo como esto: http://www.manriquemateriales.com.ar

y no tengo la menor idea como hacerlo, probe haciendolo mas o menos como muestra la parte de diseño al pegar el codigo en dreamweaver pero nada.

no creo que sea nada dificil ya que lo he visto en muchisimos sitios web, podrian explicarme mas o menos como se hace, y/o ponerme un enlace con una especie de tutorial que lo explique?

muchas gracias y espero sus ayudas

saludos
__________________
http://www.pradohosting.com
  #2 (permalink)  
Antiguo 27/12/2009, 11:16
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: pie con ancho del navegador

Hola

body{
width: 100%;
}

#pie {

width: 100%;

}


<body>
<div id="head">....</div>
<div id="contenido">...</div>
<div id="pie">...</div>


Siempre y cuando el contenedor padre del pie sea de un ancho del 100%.
En caso de que sea menor o con ancho fijo, deberás jugar un poco con los margenes y la posición.

En la página que pones de ejemplo, el pie con un ancho fijo está contenido dentro de una tabla que hace de contenedor de toda la página:
<table width="100%" border="0" cellspacing="0" cellpadding="0">

el css del pie:
.footer {
float:left;
width:871px;
Es decir que no es el pie lo que se extiende a todo el ancho del navegador sino su contenedor.

Recuerda las tablas no son para maquetar, utiliza div y css.
Fijate en el codigo fuente y busca su css, así podrás ver como esta hecha.


Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 27/12/2009 a las 11:27
  #3 (permalink)  
Antiguo 27/12/2009, 11:53
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: pie con ancho del navegador

Muchas gracias por tu respuesta C2am, problema solucionado y me sirvio para dar un gran paso en el tema de divs y css ya que no tengo experiencia en eso, siempre use tablas y tuve que bancarme sus malditos problemas.

muchas gracias nuevamente y saludos
__________________
http://www.pradohosting.com
  #4 (permalink)  
Antiguo 27/12/2009, 12:06
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: pie con ancho del navegador

hablé de mas, acabo de descubrir un problema, el div contenedor queda como contraido de los bordes, como con un margen en todos los lados.

como lo soluciono? dejo una captura y el codigo por si sirve de algo.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6.  
  7. #contenedor {
  8. width: 100%;
  9. height: 1050px;
  10. background-color: #f9d7dd
  11. }
  12.  
  13.  
  14. #header {
  15. width: 800px;
  16. height: 150px;
  17. margin: 0 auto;
  18. background: #D5D5D5}   
  19.  
  20. #animacion {
  21. width: 800px;
  22. height: 300px;
  23. margin: 0 auto;
  24. background: #7F0000}
  25.  
  26. #texto {
  27. width: 800px;
  28. height: 400px;
  29. margin: 0 auto;
  30. background: #D6F52D;
  31. }
  32.  
  33. #pie {
  34. width: 100%;
  35. height: 200px;
  36. background-color: #7A7A7A;
  37. }
  38.  
  39. </head>
  40.  
  41. <div id="contenedor">
  42.   <div id="header">Colocar aquí el contenido para  id "header"</div>
  43.   <div id="animacion">Colocar aqui el contenido para id "animacion"</div>
  44.   <div id="texto">Colocar aqui el contenido para id "texto"</div>
  45.   <div id="pie">Colocar aqui el contenido para id "pie"</div>
  46. </div>
  47. </body>
  48.  
  49. </html>






saludos
__________________
http://www.pradohosting.com
  #5 (permalink)  
Antiguo 27/12/2009, 12:20
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: pie con ancho del navegador

coloca un reset al css
algo como esto:

* {margin:0; padding: 0;}

Este es el más básico, hay reset más completos, busca que seguro vas a encontrar.

Lo que hace es resetear todas los estilos por defecto que aplican los navegadores, como ser margenes y padding.
Si aún no te lo soluciona vemos con más detalle que es lo que esta generando esos margenes.

Saludos

Edito: también puedes agregar esas propiedades al div contenedor:
#contenedor {
width: 100%;
height: 1050px;
background-color: #f9d7dd
margin:0;
padding: 0;
}

Pero después podrías tener que ponerlo en otros elementos. Es tu decisión, lo primero lo hace general para todos los estilos y lo segundo solo lo aplica al elemento en particular
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 27/12/2009 a las 12:26
  #6 (permalink)  
Antiguo 27/12/2009, 12:28
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: pie con ancho del navegador

y el reset lo pongo en el css del contenedor?
__________________
http://www.pradohosting.com
  #7 (permalink)  
Antiguo 27/12/2009, 12:29
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: pie con ancho del navegador

excelente, ahora si, solucionado, lo puse fuera del css del contenedor


muchas gracias y saludos
__________________
http://www.pradohosting.com
  #8 (permalink)  
Antiguo 27/12/2009, 12:32
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: pie con ancho del navegador

Te dejo un link donde puedes obtener varios buenos ejemplos de como se trabaja con css.
Es de Mikmoro, uno de los capos de forosdelweb:

www.araudi.net

saludos y suerte
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
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 14:59.