Barra Estatica Como la de Facebook, alguien tiene idea como se hace ?

nixspatin · #1 (**permalink**) 17/11/2008, 07:44

Holis amigos del web. Queria ver si alguien tiene idea, o me puede tirar un centro de como puedo hacer una barra estatica en la parte inferior de la web, asi como tiene facebook.

Pense que talvez algo en javascript que constantemente cambia su luga, dependiendo de si hacemos scroll, pero no se si debe ser asi.

Gracias!!

nixspatin · #2 (**permalink**) 17/11/2008, 08:01

Chicos aca encontre la solución!! se las comento para si alguno le intereza. Lo lei en una web y decia que se puede hacer en javascript , pero que se hace en CSS en realidad.

El concepto es el siguiente: como en la nave de "Futurama" no era la nave la que se movia sino el espacio el que se movia al rededor de la nave. Esto es lo mismo.
Nuestra barra fija es la "nave" y el espacio es "Todo el contenido de nuestra web".
Hice un ejemplo para que lo vean:

Código PHP:

   
<!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=iso-8859-1" /> 
 
 
 
<title>Documento sin t&iacute;tulo</title> 
 
<style> 
 
body { 
  overflow:auto; 
} 
#Todo { 
  position:absolute; 
  top:47px; 
  left:12px; 
  width:100%; 
  height:363px; 
  overflow:auto; 
} 
#Fija { 
    position:absolute; 
    top:472px; 
    left:5px; 
    width: 1004px; 
} 
 
</style> 
 
 
 
</head> 
 
<body> 
 
<div id="Todo"> 
 
  <p>Aca va todooooooooooooo</p> 
  <p>&nbsp;</p> 
</div> 
 
<div id="Fija"> 
aca va lo fijo</div> 
</body> 
</html>

..::MaRcOs::.. · #3 (**permalink**) 17/11/2008, 18:10

efectivamente el div queda fijo
pero no como la barra de facebook
seguire buscando si encuentro algo lo pongo aqui

tatoman · #4 (**permalink**) 19/08/2009, 13:20

Hola conseguiste algo?? He estado mirando pero no he podido ver nada.

Yo creo que facebook utiliza java...

juapab · #5 (**permalink**) 01/02/2010, 13:17

aca hay una pagina que te la hace directamente como un js:
www.wibiya.com

dggluz · #6 (**permalink**) 01/02/2010, 13:42

Se tiene que poder hacer íntegramente en CSS... sólo se trata de posicionar un elemento, ¿o no? ¡Suerte!

PD: JAVA y JavaScript son dos cosas DIFERENTES, no las confundan.

cslbcn · #7 (**permalink**) 02/02/2010, 09:57

Es simplemente CSS:

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>Barra inferior fija</title>
        <!-- CSS -->
        <style type="text/css">
 
        #contenedor {
            height: 2000px;
            width: 950px;
            background-color:#39F;
        }
        #barra{
            height: 20px;
            width: 950px;
            background-color:#999;
            position:fixed;
            bottom:0px;
            margin:0 auto;
        }
 
        </style>
    </head>
 
    <body>
      
        <div id="contenedor"></div>    
        <div id="barra">Barra fija</div>    
 
    </body>
    
</html>

maycolalvarez · #8 (**permalink**) 02/02/2010, 10:17

simple CSS:

#Fija {
position:fixed;
bottom:0px;
border:1px solid blue; /*bordes*/
background:#FFFFFF; /*fondo solido*/
}

nota: en IE7 si quitas el DOCTYPE, no funciona (caso muy extraño, quizás solo me pase a mí)

jjlm95 · #9 (**permalink**) 23/06/2010, 10:34

Y COMO SE HACE PARA PONERLE UN BOTONCITO A LA BARRA PARA QUE SE OCULTE????????

masterojitos · #10 (**permalink**) 23/06/2010, 10:40

yo quiero saber como hago para conseguir un carro gratis

por que la exageracion de poner las palabras a ese tamaño de fuente.....

es un foro donde te ayudaran poco a poco..... no tienes por que hace eso como si nos obligaras por que te parece urgente.....

maycolalvarez · #11 (**permalink**) 23/06/2010, 11:32

concuerdo con masterojitos, además de reabrir un tema de más de 3 meses!

la respuesta es simple: con el CSS display: none;, y capas, quedará de tu parte averiguar como, suerte.