Foros del Web » Creando para Internet » CSS »

top bar

 Estas en el tema de top bar en el foro de CSS en Foros del Web. Como puedo hacer una barra de estado como la de facebook ya sea en la parte de arriba o abajo, o como la de esta ...
  #1 (permalink)  
Antiguo 20/11/2009, 21:14
 
Fecha de Ingreso: mayo-2009
Mensajes: 39
Antigüedad: 14 años, 10 meses
Puntos: 1
top bar
Como puedo hacer una barra de estado como la de facebook ya sea en la parte de arriba o abajo, o como la de esta pagina

http://www.taringacs.net/steam/
  #2 (permalink)  
Antiguo 21/11/2009, 00:57
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: top bar
con la propiedad position:fixed. funciona igual que un absolute con la diferencia que el elemento se queda fijo (de ahi el nombre fixed) sin tener en cuenta el desplazamiento.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 21/11/2009, 07:44
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 6 meses
Puntos: 40
Respuesta: top bar
El problema del fixed es que ie6 no lo reconoce, si quieres dar también soporte a este navegador tendrías que utilizar algo como esto, o utilizar absolute, un ejemplo.

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. <head> 
  4. <title></title> 
  5. <style type="text/css"> 
  6. * {margin:0; padding:0;}
  7. html, body {width:100%; 
  8. height:100%; 
  9. overflow:hidden; 
  10. }
  11. #contenido {width:100%; 
  12. height:100%;
  13. overflow: auto;
  14. } 
  15. #fijo { 
  16. position:absolute;
  17. width:100%;
  18. height:30px;
  19. background:#cff;
  20. top:0%;
  21. } 
  22. </style> 
  23. </head> 
  24. <body> 
  25. <div id="contenido"> 
  26. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  27. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  28. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  29. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  30. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  31. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  32. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  33. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  34. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  35. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  36. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  37. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  38. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  39. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  40. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  41. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  42. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  43. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  44. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  45. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  46. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  47. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  48. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  49. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  50. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  51. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  52. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  53. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  54. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  55. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  56. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  57. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  58. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  59. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  60. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  61. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  62. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  63. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  64. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  65. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  66. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  67. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  68. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  69. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  70. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  71. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  72. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  73. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  74. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  75. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  76. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  77. <p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> 
  78. </div> 
  79. <div id="fijo">Fijo</div> 
  80. </body> 
  81. </html>

fuente: www.araudi.net

ovbiamente tendrás que hacer algunos ajustes de medida.
__________________
WFC
codigo82
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:03.