Barra Flotante

Zhampy · #1 (**permalink**) 18/12/2009, 12:18

Buenas... estoy en cero con esto... queria hacer uan barra flotante con un menu..
es decir una barra que tubiera links ...

un ejemplo es la de facebook (la barrita de la parte inferior) o como la de esta pagina http://daddyyankee.com/home.php
la que dice "change theme"

algunaa idea¿ muchas gracias!

Osdiwe · #2 (**permalink**) 18/12/2009, 12:41

Si la quieres en la parte inferior prueba con eso:

#tudiv{
position:fixed;
width: 100%;
left:0;
bottom:0;
}

Para moverla de posicion prueba con cambiar los valores de left y bottom. Si la quieres en otro sitio juega con las propiedades top, left, right y bottom.

No te puedo asegurar que todas las versiones de los navegadores lo interpreten correctamente. Los más modernos seguro, versiones antiguas de IE no lo se seguro. Si alguien lo sabe que lo diga.

Panino5001 · #3 (**permalink**) 18/12/2009, 12:43

Es fácil si ignoramos a explorer 6, que no soporta position: fixed. Un ejemplo de eso:
http://www.ribosomatic.com/articulos...ebook-con-css/
Pero con css se puede simular un fixed que funcione en todos los navegadores:

Código:

<!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>
html,body{margin: 0;padding: 0;overflow: hidden;height:100%}
#site{ width:100%;height:100%;overflow:auto;position:absolute;}
#fix{ position:absolute; height:30px; background:#06C; width:100%;  bottom:0; left:-17px}
</style>

</head>

<body>
<div id="site"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</div>
<div id="fix"></div>
</body>
</html>

Pero como verás, poco tiene que ver con javascript ;)

Zhampy · #4 (**permalink**) 18/12/2009, 12:44

grcias osdiwe.. sep weno eso "funciona" me pone un div en la parte de abajo..

aun asi me gustaria el efecto pra haer q salga la barra. "como en la pagina de daddyyankee" que precions change them y la barra sube..
alguans idea

muchas gracias

Osdiwe · #5 (**permalink**) 18/12/2009, 13:02

Para mover div te puede ser muy útil jQuery. Te dejo un enlace a la parte de Effects/animate:

[URL="http://docs.jquery.com/Effects/animate"]http://docs.jquery.com/Effects/animate[/URL]

Y para que al principio esté oculto puedes poner en la propiedad "bottom" un valor negativo igual a la altura del div o un poco menor para que se vea una parte o la parte de el botón similar a "daddyyankee".

#6 (**permalink**) 13/05/2010, 17:08

Cita:

Iniciado por Panino5001

Es fácil si ignoramos a explorer 6, que no soporta position: fixed. Un ejemplo de eso:
[url]http://www.ribosomatic.com/articulos/barra-inferior-tipo-facebook-con-css/[/url]
Pero con css se puede simular un fixed que funcione en todos los navegadores:

Código:

<!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>
html,body{margin: 0;padding: 0;overflow: hidden;height:100%}
#site{ width:100%;height:100%;overflow:auto;position:absolute;}
#fix{ position:absolute; height:30px; background:#06C; width:100%;  bottom:0; left:-17px}
</style>

</head>

<body>
<div id="site"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</div>
<div id="fix"></div>
</body>
</html>

Pero como verás, poco tiene que ver con javascript ;)

------------------------------------------------------------------------------------

Esta muy bueno este código. Pero, por casualidad, alguien sabe; por ejemplo, si yo le pongo a esta barra una medida especifica como por ejemplo width="700". Y que al mismo tiempo esta barra quede centrada. Se puede realizar???

dionner1402 · #7 (**permalink**) 16/08/2010, 00:03

Cita:

Iniciado por Panino5001

Es fácil si ignoramos a explorer 6, que no soporta position: fixed. Un ejemplo de eso:
[url]http://www.ribosomatic.com/articulos/barra-inferior-tipo-facebook-con-css/[/url]
Pero con css se puede simular un fixed que funcione en todos los navegadores:

Código:

<!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>
html,body{margin: 0;padding: 0;overflow: hidden;height:100%}
#site{ width:100%;height:100%;overflow:auto;position:absolute;}
#fix{ position:absolute; height:30px; background:#06C; width:100%;  bottom:0; left:-17px}
</style>

</head>

<body>
<div id="site"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</div>
<div id="fix"></div>
</body>
</html>

Pero como verás, poco tiene que ver con javascript ;)

Muy Bueno El Codigo =)... Una Pregunta, como podria hacer para que mi barra no se quite mientras navego por las secciones de mi pag? es que la quiero usar para una radio online y no quiero que se corte la musica mientras las personas navegan, gracias de antemano :)