Toolbar flotante.

bakterone · #1 (**permalink**) 15/06/2009, 19:09

Estimados, mi consulta es la siguiente:

Necesito hacer una barra de herramientas para una web (especificamente para el backend), en donde habran accesos directos para las funciones mas utilizadas de la misma.

Lo que necesito es que la barra, esté pegada al borde inferior de la ventana, pero que se mentenga ahi, independiente si subo o bajo la barra de scroll, y que quede sobre todo el contenido de la pagina.

Un ejemplo puede ser la barra de accesos directos y notificaciones de facebook, la barrita de abajo.

Espero me puedan ayudar, ya que estoy recien migrando de tablas a CSS y me cuesta un poco.

Saludos
y Muchas gracias por la ayuda que me puedan brindar.

-Defero- · #2 (**permalink**) 15/06/2009, 20:13

Prueba con POSITION: ABSOLUTE.

AlbertoGarcia · #3 (**permalink**) 16/06/2009, 09:14

Mejor así:

#toolbar {
position: fixed;
bottom:0;
z-index:5;
}

Salud!

bakterone · #4 (**permalink**) 16/07/2009, 16:53

hola.. les cuento.. utilize la opcion de alberto, pero sucede lo siguente. No puedo centrar horizontalmente el div. he intentado con margins en auto, o 0 pero sique alineada a la izquierda. probe con un div wrapper con width al 100%, e intentano centrar el div con la barra... pero sigue sin hacer nada... :(

kseso? · #5 (**permalink**) 16/07/2009, 17:14

Prueba el código siguiente. Pero has de saber que no va en ie6. Para eso habría que utilizar otra técnica.

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" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
*{margin:0;padding:0; outline:none; border:0; position: relative;}
body {height:1500px;}
#fija {position:fixed; bottom:0; background: #cdcdcd;width: 100%; text-align:center; z-index:50000000;}
ul {list-style-type: none;
}
li {padding: 0 10px;
display: inline;
}
a {line-height:3em;}
</style>
</head>
<body>
<div id="fija">
<ul>
  <li><a href="#">UNA</a></li>
  <li><a href="#">DOLE</a></li>
  <li><a href="#">TELE</a></li>
  <li><a href="#">CATOLE</a></li>
  <li><a href="#">QUILE</a></li>
  <li><a href="#">QUILETE</a></li>
</ul>
</div>
</body>
</html>

Un saludo

alexk · #6 (**permalink**) 16/07/2009, 19:02

para dar posicion fija en internet explorer 6 trata lo siguiente...

Código css:

Ver original/*Esto es para todos los navegadores, pero haremos que solo IE6, interprete la posicion abosuluta*/
#fija {position:absolute; bottom:0; background: #cdcdcd;width: 100&#37;; text-align:center; z-index:500;}
 
/*Y esto es para que los navegadores, como FF, y compañia funcione perfecto*/
body > div#fija{position:fixed;bottom:0;}

Pero no es valido para la W3C. Perdona, hay otra solucion con posicion absoluta, donde "left:50%;" y "top:50%" y el alto y ancho, debe ser relativo al "margin-left:-XXXpx;" y "margin-top:-XXXpx;" pero bueno, es mas sencilla la alternativa no valida que te recomiendo.

PD: se supone que el "z-index" es "infinito" pero para evitar problemas es mejor no pasarse de "z-index:32767;"

CHao y suerte!...

kseso? · #7 (**permalink**) 17/07/2009, 05:24

No Alexk, no me refería a esa solución para ie6.
A la que hacía mención es a la realización que hay en www.araudi.net (posición fija para ie6)
En pocas palabras: consiste en "simular el fixed" en base a que el "body" sólo sea el 100% de alto y con "overflow:hidden" y en él alojar la barra, posicionada de forma absoluta con "bottom".
Se puede uno ahorrar el z-indez (como en mi ejemplo anterior) escribiéndolo en último lugar en el html.
Y todo lo demás de la página se aloja en una caja con ancho y alto del 100% y "overflow:auto".
Esta forma no tiene problemas de validación.

Un saludo

alexk · #8 (**permalink**) 17/07/2009, 08:32

kseso? ok... perdona... llevas razon esta mejor tu alternativa, igual no la habia intentado, pero bueno tampoco eh tenido necesidad de usar fixed... chao y suerte!...

kseso? · #9 (**permalink**) 17/07/2009, 08:46

Hola Alexk
No hay nada que perdonar porque no has faltado.

Y tampoco es una solución mía. Lo bueno de aportar cada uno su punto de vista es que ganamos todos.

Un saludo.

willyfc · #10 (**permalink**) 17/07/2009, 09:19

Aquí hay algo quizá le sirva, es muy sencillo con el código de Mikmoro

kseso? · #11 (**permalink**) 17/07/2009, 10:54

Hola Willyfc.
¿A que no has caído en el detallito del darle "width:100%" a la "barra"?
Yo reconozco que hasta que no modifiqué la idea de Mik para convertirla en esa barra tampoco.

Al estar el el scroll en el contenedor principal ("#contenido" en tu código) y "#barra" en el body, tapa la parte inferior del scroll. Así que habría que reducir la anchura un poco.

Un saludo

willyfc · #12 (**permalink**) 17/07/2009, 11:00

Pero Kseso? yo me equivoqué con toda la intención

, se que estas ahí cuidando(corrigiendo) las caga... que debes en cuando hago

kseso? · #13 (**permalink**) 17/07/2009, 11:03

No Willyfc, no. Que tú ya me quieres convertir en el abuelo gruñón

Como te decía, yo me dí cuenta del detalle al modificar el código de Mik para convertilo en la "barra".
Antes tampoco había advertido el detalle

lemmoner · #14 (**permalink**) 03/10/2009, 12:04

Cita:

Iniciado por kseso?

¿A que no has caído en el detallito del darle "width:100%" a la "barra"?
......
Al estar el el scroll en el contenedor principal ("#contenido" en tu código) y "#barra" en el body, tapa la parte inferior del scroll. Así que habría que reducir la anchura un poco.

Buenas a todos,

me encontré tambien con el problema del width:100% que se soluciona estrechando un poco la barra. Pero existe alguna manera de hacer que se ajuste dinámicamente al ancho de la pantalla? Estoy trabajando en una página con diseño semi-líquido a resoluciones entre 1280x1024 y 1024x768. Si aplico el "truco" a 1280x1024, a resoluciones menores, la barra se expande por encima de la barra de sroll.

Gracias!