Foros del Web » Creando para Internet » CSS »

Analizar este Footer

Estas en el tema de Analizar este Footer en el foro de CSS en Foros del Web. #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 ...
  #1 (permalink)  
Antiguo 30/11/2010, 14:48
 
Fecha de Ingreso: octubre-2009
Mensajes: 35
Antigüedad: 8 años, 1 mes
Puntos: 0
Analizar este Footer

#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!
  #2 (permalink)  
Antiguo 30/11/2010, 14:54
 
Fecha de Ingreso: octubre-2010
Mensajes: 155
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Analizar este Footer

coloca asi
Código CSS:
Ver original
  1. #footer {
  2. width: 500px;
  3. height: 80px;
  4. background-color: #E6E6E6;
  5. position: fixed;
  6. z-index: 2;
  7. bottom: 0px;
  8. margin: 0 auto;
  9. }

con eso ya solucionas
__________________
..
  #3 (permalink)  
Antiguo 01/12/2010, 06:21
 
Fecha de Ingreso: octubre-2009
Mensajes: 35
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Analizar este Footer

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?
  #4 (permalink)  
Antiguo 01/12/2010, 07:01
 
Fecha de Ingreso: octubre-2010
Mensajes: 155
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Analizar este Footer

Bien vamos a analizar paso por paso tu codigo
Código CSS:
Ver original
  1. #footer {
  2. //Tamaño total de ancho
  3. width: 500px;
  4. //Tamaño de altura
  5. height: 80px;
  6. //Color de fondo
  7. background-color: #E6E6E6;
  8. //Te deja quieto en la pantalla
  9. position: fixed;
  10. //Deja sobre expuesto sobre otro div
  11. z-index: 2;
  12. //No tiene sentido colocar 0px en todo caso tendrias que quitar esto
  13. bottom: 0px;
  14. //Tampoco tiene sentido colocar
  15. left: auto;
  16. right: auto;
  17. }

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
  1. #footer {
  2. width: 500px;
  3. height: 80px;
  4. background-color: #E6E6E6;
  5. position: fixed;
  6. z-index: 2;
  7. margin: 0 auto;
  8. }

Tambien ayudaria a que entregues tu codigo para ver que es lo que tienes..
__________________
..
  #5 (permalink)  
Antiguo 01/12/2010, 09:19
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Analizar este Footer

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

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Inicio</title>
  5. <link rel="shortcut icon" href="/favicon.ico" />
  6. <style type="text/css">
  7.     #pie{width: 500px; height: 30px;position: fixed;bottom: 0;left: 50%;margin: 0 0 0 -250px;background: #CCC;}
  8. </head>
  9.  
  10.     <p>Aqui va el texto</p>
  11.     <p>Aqui va el texto</p>
  12.     <p>Aqui va el texto</p>
  13.     <p>Aqui va el texto</p>
  14.     <p>Aqui va el texto</p>
  15.     <p>Aqui va el texto</p>
  16.     <p>Aqui va el texto</p>
  17.     <p>Aqui va el texto</p>
  18.     <p>Aqui va el texto</p>
  19.     <p>Aqui va el texto</p>
  20.     <p>Aqui va el texto</p>
  21.     <p>Aqui va el texto</p>
  22.     <p>Aqui va el texto</p>
  23.     <p>Aqui va el texto</p>
  24.     <p>Aqui va el texto</p>
  25.     <p>Aqui va el texto</p>
  26.     <p>Aqui va el texto</p>
  27.     <p>Aqui va el texto</p>
  28.     <p>Aqui va el texto</p>
  29.     <p>Aqui va el texto</p>
  30.     <p>Aqui va el texto</p>
  31.     <p>Aqui va el texto</p>
  32.     <p>Aqui va el texto</p>
  33.     <p>Aqui va el texto</p>
  34.     <p>Aqui va el texto</p>
  35.     <p>Aqui va el texto</p>
  36.     <p>Aqui va el texto</p>
  37.     <div id="pie">Al centro</div>
  38. </body>
  39. </html>
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 01/12/2010, 10:32
 
Fecha de Ingreso: junio-2009
Mensajes: 79
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Analizar este Footer

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.
  #7 (permalink)  
Antiguo 01/12/2010, 11:01
 
Fecha de Ingreso: octubre-2009
Mensajes: 35
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Analizar este Footer

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!!
  #8 (permalink)  
Antiguo 01/12/2010, 13:19
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: Analizar este Footer

Prueba esto:

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

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 00:26.