Analizar este Footer

spaniol · #1 (**permalink**) 30/11/2010, 14:48

#footer {
width: 500px;
height: 80px;
background-color: #E6E6E6;
position: fixed;
z-index: 2;
bottom: 0px;
left: auto;
right: auto;
}

Ése es el código. Es la regla del footer. Un cuadrito gris al pie de la pantalla. Yo quiero que quede al centro de la página, pero se me está llendo al borde izquierdo. ¿Alguien sabrá por qué?

Como dato (no sé si influye) puedo decir que el objeto que viene antes flota a la izquierda.

Gracias de antemano!

gamau6 · #2 (**permalink**) 30/11/2010, 14:54

coloca asi

Código CSS:

Ver original#footer {
width: 500px;
height: 80px;
background-color: #E6E6E6;
position: fixed;
z-index: 2;
bottom: 0px;
margin: 0 auto;
}

con eso ya solucionas

spaniol · #3 (**permalink**) 01/12/2010, 06:21

Lasmentablemente, no funcionó. En todo caso, la única diferencia en los dos códigos es que en el que has escrito hay margen 0 arriba y abajo. Lo demás es igual. Gracias igual, compadre! No sabes qué podrá ser? Alguien sabe?

gamau6 · #4 (**permalink**) 01/12/2010, 07:01

Bien vamos a analizar paso por paso tu codigo

Código CSS:

Ver original#footer {
//Tama&#241;o total de ancho
width: 500px;
//Tama&#241;o de altura
height: 80px;
//Color de fondo
background-color: #E6E6E6;
//Te deja quieto en la pantalla
position: fixed;
//Deja sobre expuesto sobre otro div
z-index: 2;
//No tiene sentido colocar 0px en todo caso tendrias que quitar esto
bottom: 0px;
//Tampoco tiene sentido colocar
left: auto;
right: auto;
}

Y como dices el margen arriba y abajo cuando coloque el margin esta mal como tu dices, porque el margin crea cajas en la derecha y en la izquierda para que se quede en el centro tu contenido en todo caso podrias colocar algo asi

Código CSS:

Ver original#footer {
width: 500px;
height: 80px;
background-color: #E6E6E6;
position: fixed;
z-index: 2;
margin: 0 auto;
}

Tambien ayudaria a que entregues tu codigo para ver que es lo que tienes..

willyfc · #5 (**permalink**) 01/12/2010, 09:19

No estoy seguro pero creo que es esto lo que quieres hacer:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Inicio</title>
<link rel="shortcut icon" href="/favicon.ico" />
<style type="text/css">
    #pie{width: 500px; height: 30px;position: fixed;bottom: 0;left: 50%;margin: 0 0 0 -250px;background: #CCC;}
</style>
</head>
 
<body>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <p>Aqui va el texto</p>
    <div id="pie">Al centro</div>
</body>
</html>

bengiss · #6 (**permalink**) 01/12/2010, 10:32

Me imagino que con el position: fixed y el bottom: 0 quieres que el footer se mantenga pegado al fondo de la ventana del navegador? Deberias colocar el codigo html tambien, la solucion de gamau6 en teoria deberia servir.

spaniol · #7 (**permalink**) 01/12/2010, 11:01

Ok, entonces veamos el código HTML.

Código HTML:

<body>
<div id="header">
  <h1><img src="img/headLogo.png" width="82" height="14" alt="SITIO" /></h1>
</div>
<div id="linea01"></div>
<div id="bienvenida">texto</div>
<div id="nav">
  <ul>
    <li><a href="#.php">LINK</a></li>
    <li><a href="#.php">LINK</a></li>
    <li><a href="#.php">LINK</a></li>
    <li><a href="#.php">LINK</a></li>
    <li><a href="#.php">LINK</a></li>
    <li><a href="#.php">LINK</a></li>
    <li><a href="#.php">LINK</a></li>
  </ul>
</div>
<div id="cuadrito"></div>
<div id="linea02"></div>
<div id="footer"></div>
</body>

El zindex, en realidad ya no es necesario. En todo caso, con o sin él, el cuadro se va a la izquierda.

Gracias!!

opzina · #8 (**permalink**) 01/12/2010, 13:19

Prueba esto:

este:
position: fixed;
por este:
position: relative;