pie con ancho del navegador

brunob23 · #1 (**permalink**) 26/12/2009, 11:47

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

C2am · #2 (**permalink**) 27/12/2009, 11:16

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

brunob23 · #3 (**permalink**) 27/12/2009, 11:53

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

brunob23 · #4 (**permalink**) 27/12/2009, 12:06

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
 
#contenedor {
width: 100%;
height: 1050px;
background-color: #f9d7dd
}
 
 
#header {
width: 800px;
height: 150px;
margin: 0 auto;
background: #D5D5D5}    
 
#animacion {
width: 800px;
height: 300px;
margin: 0 auto;
background: #7F0000}
 
#texto {
width: 800px;
height: 400px;
margin: 0 auto;
background: #D6F52D;
}
 
#pie {
width: 100%;
height: 200px;
background-color: #7A7A7A;
}
 
</style>
</head>
 
<body>
<div id="contenedor">
  <div id="header">Colocar aquí el contenido para  id "header"</div>
  <div id="animacion">Colocar aqui el contenido para id "animacion"</div>
  <div id="texto">Colocar aqui el contenido para id "texto"</div>
  <div id="pie">Colocar aqui el contenido para id "pie"</div>
</div>
</body>
 
</html>

saludos

C2am · #5 (**permalink**) 27/12/2009, 12:20

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

brunob23 · #6 (**permalink**) 27/12/2009, 12:28

y el reset lo pongo en el css del contenedor?

brunob23 · #7 (**permalink**) 27/12/2009, 12:29

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

muchas gracias y saludos

C2am · #8 (**permalink**) 27/12/2009, 12:32

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