Foros del Web » Creando para Internet » CSS »

chat al mejor estilo facebook

Estas en el tema de chat al mejor estilo facebook en el foro de CSS en Foros del Web. estimados.. estoy armando un chat como el de facebook voy recien por la parte del maqueatado CSS luego armare la parte ajax, pero eso es ...
  #1 (permalink)  
Antiguo 12/07/2009, 19:33
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
chat al mejor estilo facebook

estimados.. estoy armando un chat como el de facebook
voy recien por la parte del maqueatado CSS

luego armare la parte ajax, pero eso es otra historia

les dejo el url para que lo vayan viendo

http://tinyurl.com/mw33lw

dos cosas no me estan saliendo

1. no puedo generar la barra al fondo, osea si queda al fondo pero no con position: absolute (cuando expando una ventana se me agranda la banda)

2. puse a modo de ejemplo dos ventanitas de chat inicialmente minimizadas, pero al expandir una... la de al lado se va para arriba, en vez de quedarse abajo

que les parece?
__________________
On error no hago nada porque deje de fumar...
  #2 (permalink)  
Antiguo 12/07/2009, 20:50
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: chat al mejor estilo facebook

Se ve bien. Primero, te recomiendo que uses más los formatos resumidos, que en chat tienes borde, estilo y color para cada borde por separado.

Ahora, creo que todo lo tienes dentro de la barra. Prueba ponerlos fuera o con posición absoluta, y quizá se corrija el error. suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 12/07/2009, 20:57
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: chat al mejor estilo facebook

formato resumido es por ej

border: 0 1 0 1 ????

lo segundo.. tiene que estar dentor de la barra. sino serian cajitas volando..
ahi le agregue la funcionalidad que muestra /oculta el chat con cada usuario ;)
__________________
On error no hago nada porque deje de fumar...
  #4 (permalink)  
Antiguo 12/07/2009, 21:13
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: chat al mejor estilo facebook

Permíteme jugar un poco con tu código, debo admitir que me ha parecido interesante. Te lo devolveré pronto corregido si todo sale bien
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 12/07/2009, 21:16
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: chat al mejor estilo facebook

con todo gusto ;)
__________________
On error no hago nada porque deje de fumar...
  #6 (permalink)  
Antiguo 12/07/2009, 21:51
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: chat al mejor estilo facebook

Es un poco más complejo de lo que pensé... Creo que me llevará un largo rato. A ver si alguien más nos puede echar una mano mientras...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #7 (permalink)  
Antiguo 12/07/2009, 21:58
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: chat al mejor estilo facebook

tambien probé esto sin exito

.chat {
bottom:0;
position:fixed;
}

peor igual al abrir otra ventanita se alinea todo arriba
__________________
On error no hago nada porque deje de fumar...
  #8 (permalink)  
Antiguo 12/07/2009, 22:04
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: chat al mejor estilo facebook

Lo probé en content con mayor éxito, pero sin lo necesario. Es difícil encontrar una forma en que sea absoluta y relativa a la vez. Comienzo a suponer que podría ser con un margin negativo que lo mueven, pero si edito algo, lo demás se sale de su contenido. Estoy teniendo problemas para acoplarme al código, creo que lo tendré que dejar por esta noche :S
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 13/07/2009, 09:48
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: 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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</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%;height:100%;overflow: auto;}
  12. .banda{width:100%; height:35px; position:absolute; bottom:0; background:#D7F4F3;}
  13. .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;}
  14. .chat p{margin:7px 0; text-align:center;}
  15. .chat a{ text-decoration:none; color:#333; display:block;}
  16. .usuarios{display:block; width:90%; border-bottom:1px solid #999; margin:3px auto;}
  17. </head>
  18.  
  19. <div class="contenido">
  20.     <p>Aqui va todo el contenido</p>
  21. <p>Aqui va todo el contenido</p>
  22. <p>Aqui va todo el contenido</p>
  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. </div>
  76. <div class="banda"></div>
  77. <div class="chat">
  78.         <p><a href="#">usuarios conectados <strong>(2)</strong></a></p>
  79.         <span class="usuarios">Maria</span>
  80.         <span class="usuarios">Javier</span>
  81. </div>
  82. </body>
  83. </html>
  84.  
  85.  
  86. Espero te sirva.
__________________
WFC
codigo82
  #10 (permalink)  
Antiguo 13/07/2009, 10:42
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: chat al mejor estilo facebook

perfecto.. uno menos, la barra no contiene las cajitas sino que simplemente es para pintar un fondo, con position absolute ponemos las cajitas encima.

me falta poder alinear todos los divs bottom
__________________
On error no hago nada porque deje de fumar...
  #11 (permalink)  
Antiguo 13/07/2009, 11:14
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: chat al mejor estilo facebook

he publicado nuevamente el chat con los cambios en la misma url

http://tinyurl.com/mw33lw

sigue estado el problema de alinear los divs de las cajitas abajo, que no encuentro la vuelta por ningun lado

ya esta separada la banda del contenedor de las cajitas, pero lo puse a mitad de pantalla para que se note el error
__________________
On error no hago nada porque deje de fumar...
  #12 (permalink)  
Antiguo 13/07/2009, 14:14
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: chat al mejor estilo facebook

bueno.. lo he solucionado a medias poniendo a .chat {right:0}
ahora me surge un nuevo problema que es que todas las cajitas se me abren en right:0 osea se van pisando una sobre otra... vere como lo resuelvo.

sigo subiendo updates por si a alguien le interesa ;)
__________________
On error no hago nada porque deje de fumar...
  #13 (permalink)  
Antiguo 26/07/2009, 20:30
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: chat al mejor estilo facebook

bueno... ahi va progresando un poco este chat

estoy teniendo algunos problemitas con las clases, que no estoy entendiendo bien como funciona el tema, si alguien revisa un poco el codigo se lo voy a agradecer ya que probe 10.000 cosas y no le encuentro la vuelta

del listado de usuarios elijo uno y le doy click para abrir una ventanita (aun no se puede escribir ni nada, voy por la parte de las ventanitas recien)
y me la abre correctamente, pero para minimizarla hay que dar dos clicks a la barra, deberia de ser solo uno, me parece que no esta interpretando this.isMaximized
como que al primer click es undefined y lo setea y recien en el segundo se produce la accion como debe ser

perdon por lo extenso... aqui esta el link al chat http://tinyurl.com/chatcito
__________________
On error no hago nada porque deje de fumar...
  #14 (permalink)  
Antiguo 27/07/2009, 08:09
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Respuesta: chat al mejor estilo facebook

ups... lo continuo en el foro javascript ...
__________________
On error no hago nada porque deje de fumar...
  #15 (permalink)  
Antiguo 11/04/2011, 13:46
 
Fecha de Ingreso: abril-2011
Mensajes: 2
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: chat al mejor estilo facebook

Hola brother como estamos :D me parese bien pero no sirve el link para visualisarlo o descargarlo :S espero y me lo puedas pasar o subirlo para checarlo n.n gracias :)
  #16 (permalink)  
Antiguo 11/04/2011, 14:05
 
Fecha de Ingreso: abril-2011
Mensajes: 2
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: chat al mejor estilo facebook

que onda bro de casualidad tendras el codigo o a donde puedo ver el ejemplo de ese chat n.n saludos n.n
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 10:33.