Foros del Web » Creando para Internet » CSS »

Toolbar flotante.

Estas en el tema de Toolbar flotante. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/06/2009, 20:09
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 5 meses
Puntos: 1
Toolbar flotante.

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.
  #2 (permalink)  
Antiguo 15/06/2009, 21:13
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.777
Antigüedad: 13 años, 4 meses
Puntos: 76
Respuesta: Toolbar flotante.

Prueba con POSITION: ABSOLUTE.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable
  #3 (permalink)  
Antiguo 16/06/2009, 10:14
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Toolbar flotante.

Mejor así:

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

Salud!
  #4 (permalink)  
Antiguo 16/07/2009, 17:53
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Toolbar flotante.

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... :(
  #5 (permalink)  
Antiguo 16/07/2009, 18:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Toolbar flotante.

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
  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" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. *{margin:0;padding:0; outline:none; border:0; position: relative;}
  7. body {height:1500px;}
  8. #fija {position:fixed; bottom:0; background: #cdcdcd;width: 100%; text-align:center; z-index:50000000;}
  9. ul {list-style-type: none;
  10. }
  11. li {padding: 0 10px;
  12. display: inline;
  13. }
  14. a {line-height:3em;}
  15. </head>
  16. <div id="fija">
  17. <ul>
  18.   <li><a href="#">UNA</a></li>
  19.   <li><a href="#">DOLE</a></li>
  20.   <li><a href="#">TELE</a></li>
  21.   <li><a href="#">CATOLE</a></li>
  22.   <li><a href="#">QUILE</a></li>
  23.   <li><a href="#">QUILETE</a></li>
  24. </ul>
  25. </div>
  26. </body>
  27. </html>

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 16/07/2009 a las 18:48
  #6 (permalink)  
Antiguo 16/07/2009, 20:02
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: Toolbar flotante.

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

Código css:
Ver original
  1. /*Esto es para todos los navegadores, pero haremos que solo IE6, interprete la posicion abosuluta*/
  2. #fija {position:absolute; bottom:0; background: #cdcdcd;width: 100&#37;; text-align:center; z-index:500;}
  3.  
  4. /*Y esto es para que los navegadores, como FF, y compañia funcione perfecto*/
  5. 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!...
  #7 (permalink)  
Antiguo 17/07/2009, 06:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Toolbar flotante.

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 17/07/2009, 09:32
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: Toolbar flotante.

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!...
  #9 (permalink)  
Antiguo 17/07/2009, 09:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Toolbar flotante.

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 17/07/2009, 10: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: Toolbar flotante.

Aquí hay algo quizá le sirva, es muy sencillo con el código de Mikmoro
__________________
WFC
codigo82
  #11 (permalink)  
Antiguo 17/07/2009, 11:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Toolbar flotante.

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 21/07/2009 a las 02:48
  #12 (permalink)  
Antiguo 17/07/2009, 12:00
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: Toolbar flotante.

Pero Kseso? yo me equivoqué con toda la intención, se que estas ahí cuidando(corrigiendo) las caga... que debes en cuando hago
__________________
WFC
codigo82
  #13 (permalink)  
Antiguo 17/07/2009, 12:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Toolbar flotante.

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #14 (permalink)  
Antiguo 03/10/2009, 13:04
 
Fecha de Ingreso: agosto-2009
Mensajes: 12
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Toolbar flotante.

Cita:
Iniciado por kseso? Ver Mensaje
¿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!
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 18:37.