Tema: chat al mejor estilo facebook
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 13/07/2009, 08:48
Avatar de willyfc
willyfc
 
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 6 meses
Puntos: 40
Respuesta: chat al mejor estilo facebook
Lo que tendrías que hacer para que la barra no crezca junto la caja de los usuarios es declararla fuera de la barra. Mira un ejemplo:

Código html: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. * {margin:0; padding:0;}
  8. html, body {width:100%; 
  9. height:100%; 
  10. overflow:hidden; 
  11. }
  12. .contenido{width:100%;height:100%;overflow: auto;}
  13. .banda{width:100%; height:35px; position:absolute; bottom:0; background:#D7F4F3;}
  14. .chat{ position:absolute; right:0%; bottom:0%; border-bottom:1px solid #999; border-left:1px solid #999; border-top:1px solid #999; height:100px; width:180px;background:#D7F4F3;}
  15. .chat p{margin:7px 0; text-align:center;}
  16. .chat a{ text-decoration:none; color:#333; display:block;}
  17. .usuarios{display:block; width:90%; border-bottom:1px solid #999; margin:3px auto;}
  18. </style>
  19. </head>
  20.  
  21. <body>
  22. <div class="contenido">
  23.     <p>Aqui va todo el contenido</p>
  24. <p>Aqui va todo el contenido</p>
  25. <p>Aqui va todo el contenido</p>
  26. <p>Aqui va todo el contenido</p>
  27. <p>Aqui va todo el contenido</p>
  28. <p>Aqui va todo el contenido</p>
  29. <p>Aqui va todo el contenido</p>
  30. <p>Aqui va todo el contenido</p>
  31. <p>Aqui va todo el contenido</p>
  32. <p>Aqui va todo el contenido</p>
  33. <p>Aqui va todo el contenido</p>
  34. <p>Aqui va todo el contenido</p>
  35. <p>Aqui va todo el contenido</p>
  36. <p>Aqui va todo el contenido</p>
  37. <p>Aqui va todo el contenido</p>
  38. <p>Aqui va todo el contenido</p>
  39. <p>Aqui va todo el contenido</p>
  40. <p>Aqui va todo el contenido</p>
  41. <p>Aqui va todo el contenido</p>
  42. <p>Aqui va todo el contenido</p>
  43. <p>Aqui va todo el contenido</p>
  44. <p>Aqui va todo el contenido</p>
  45. <p>Aqui va todo el contenido</p>
  46. <p>Aqui va todo el contenido</p>
  47. <p>Aqui va todo el contenido</p>
  48. <p>Aqui va todo el contenido</p>
  49. <p>Aqui va todo el contenido</p>
  50. <p>Aqui va todo el contenido</p>
  51. <p>Aqui va todo el contenido</p>
  52. <p>Aqui va todo el contenido</p>
  53. <p>Aqui va todo el contenido</p>
  54. <p>Aqui va todo el contenido</p>
  55. <p>Aqui va todo el contenido</p>
  56. <p>Aqui va todo el contenido</p>
  57. <p>Aqui va todo el contenido</p>
  58. <p>Aqui va todo el contenido</p>
  59. <p>Aqui va todo el contenido</p>
  60. <p>Aqui va todo el contenido</p>
  61. <p>Aqui va todo el contenido</p>
  62. <p>Aqui va todo el contenido</p>
  63. <p>Aqui va todo el contenido</p>
  64. <p>Aqui va todo el contenido</p>
  65. <p>Aqui va todo el contenido</p>
  66. <p>Aqui va todo el contenido</p>
  67. <p>Aqui va todo el contenido</p>
  68. <p>Aqui va todo el contenido</p>
  69. <p>Aqui va todo el contenido</p>
  70. <p>Aqui va todo el contenido</p>
  71. <p>Aqui va todo el contenido</p>
  72. <p>Aqui va todo el contenido</p>
  73. <p>Aqui va todo el contenido</p>
  74. <p>Aqui va todo el contenido</p>
  75. <p>Aqui va todo el contenido</p>
  76. <p>Aqui va todo el contenido</p>
  77. <p>Aqui va todo el contenido</p>
  78. </div>
  79. <div class="banda"></div>
  80. <div class="chat">
  81.         <p><a href="#">usuarios conectados <strong>(2)</strong></a></p>
  82.         <span class="usuarios">Maria</span>
  83.         <span class="usuarios">Javier</span>
  84. </div>
  85. </body>
  86. </html>
  87.  
  88.  
  89. Espero te sirva.
__________________
WFC
codigo82