Foros del Web » Creando para Internet » CSS »

Mostrar votos en comentario

Estas en el tema de Mostrar votos en comentario en el foro de CSS en Foros del Web. Buenas de nuevo, Como siempre... apenas se de css, practicamente nada y me cuesta hacer lo que quiero obviamente, asi que una vez más estoy ...
  #1 (permalink)  
Antiguo 26/05/2009, 14:09
Avatar de OsSk4R  
Fecha de Ingreso: octubre-2006
Ubicación: $this->home
Mensajes: 824
Antigüedad: 11 años, 1 mes
Puntos: 74
Mostrar votos en comentario

Buenas de nuevo,
Como siempre... apenas se de css, practicamente nada y me cuesta hacer lo que quiero obviamente, asi que una vez más estoy pidiendo un poco de ayuda

Estoy creando un sistema de comentarios y quiero añadir la opcion de votar el comentario y a su vez que se muestra la puntuación del mismo.

Ésto es lo que tengo y de primeras se verá el problema:


Como veís, en el hipotetico caso de que un comentario tuviera miles y miles de votos se me descuadra y se me va hacia la derecha

Me gustaría que en el caso de ser muchos, como en la imagen, el cuadro fuera para la izquiera, asi no se descuadraría...

Él recuadro de los votos es este;

Cita:
.votos{
width:50px auto;
overflow:auto;
height:10;
left: 843px;
margin-top:-19px;
position:absolute;
background-color:#ffffff;
border: 1px solid #cfdbe3;
}
Muchas gracias
  #2 (permalink)  
Antiguo 26/05/2009, 14:23
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: Mostrar votos en comentario

primero que nada, esto no existe:

Código:
width:50px auto;
solo lleva un valor. Ahora podrías probarlo de esta maner:

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=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. .contenedor{ background:#F7FBFF; border:1px solid #CCC; width:500px; height:auto; overflow:auto; position:relative; padding:5px;}
  7. .votos{
  8. width:100%;
  9. height:15px;
  10. text-align:center;
  11. position:absolute;
  12. text-align:right;
  13. right:5%;
  14. top:15%;
  15. }
  16. .votos span{padding:4px;background-color:#ffffff;border: 1px solid #cfdbe3;}
  17. </head>
  18.  
  19. <div class="contenedor">
  20. <div class="votos">
  21.     <span>1023658</span>
  22. </div>
  23. <p>aquí va algo</p>
  24. <textarea rows="3" cols="55"></textarea><br />
  25. <input type="button" value="Enviar" />
  26. </div>
  27. </body>
  28. </html>

avisas si te sirve.
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 26/05/2009, 14:35
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Mostrar votos en comentario

Además creo que si le pones una position abosulte te ocupará siempre el mismo lugar, mientras que si lo pusieras relative sería mas fluido
__________________
No diseñes usando tablas.
  #4 (permalink)  
Antiguo 26/05/2009, 14: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: Mostrar votos en comentario

Cita:
Iniciado por hades87 Ver Mensaje
Además creo que si le pones una position abosulte te ocupará siempre el mismo lugar, mientras que si lo pusieras relative sería mas fluido
Pienso que tienes razón, y de paso al ser relative cuando utilicen un navegador que permite modificar la dimensión de un textarea se mantendrá en su lugar y no se moverá según el textarea vaya cambiando la dimensión del div.

Código:
.votos{
width:100%;
height:15px;
text-align:center;
position:relative;
text-align:right;
right:1%;
top:5%;
}
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 26/05/2009, 14:49
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Mostrar votos en comentario

Claro y además le podrá poner un margin, que por ejemplo siempre este a 10px del borde, con lo que no se saldrá afuera
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 26/05/2009, 14:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mostrar votos en comentario

¿Y qué tal si simplificamos?
Código css:
Ver original
  1. .votos {
  2. background-color:#FFFFFF;
  3. border:1px solid #CFDBE3;
  4. float:right;
  5. margin:10px 35px 0 0;
  6. padding:4px;
  7. }
Le he asignado el margen para alinearlo con el borde derecho del textarea
y en el html suprime el span.
Posible efecto, que lo que dices "aquí va algo" crezca lo suficiente y empuje para abajo el textarea separando el contador.

Un saludo

__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 26/05/2009, 14:58
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: Mostrar votos en comentario

pero en realidad nunca lo empujará ya que la cadena impresa en ese div o span siempre será una sola línea(pienso yo) sin espacios entre cada número entonces de la forma que lo propongo al tener el contenedro overflow:auto aparecerá el scroll horizontal por que hay demasiado números en ese span y de la forma que lo plantes los números que van al principio desaparecerán, o irán desapareciendo, obviamente en el caso hipotético de que alguna vez lleguen a ser tantos números.
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 26/05/2009, 15:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mostrar votos en comentario

Willy, el posible efecto de desplazamiento es sobre mi variación

Ejecuta tu código en el navegador ampliando el contador unos cuanto dígitos y al <p>aquí va algo</p> métele más texto (varias líneas)

Después haz los cambios de css a ".votos" suprimiendo el "span" que comentaba yo.

¿Notas la diferencia?

Y ya que estamos jugando con códigos, pon un fondo a tu ".votos" diferente al fondo del span. Sólo por jugar
Bueno, te pongo una captura de los dos:



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

Última edición por kseso?; 26/05/2009 a las 15:49
  #9 (permalink)  
Antiguo 26/05/2009, 16:11
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: Mostrar votos en comentario

Efectivamente Elías, no enfoque el problema de esa manera ya que me enfoque en el problema de esa cajita y no tomé en cuenta que tipo de texto iría del otro lado.

PD: El sistema no me dejó darte karma.

Consejo:Ayuda cuando tengas tiempo no cuando un cliente quiere su foro funcionando para ayer
__________________
WFC
codigo82
  #10 (permalink)  
Antiguo 26/05/2009, 16:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mostrar votos en comentario

Cita:
Iniciado por willyfc Ver Mensaje
PD: El sistema no me dejó darte karma.

Consejo:Ayuda cuando tengas tiempo no cuando un cliente quiere su foro funcionando para ayer
Por una vez soy pro-sistema

Y sobre el resto, nah, según tenga el momento y la neurona
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 26/05/2009, 16:24
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: Mostrar votos en comentario

pero mi problema esta en que debí haber terminado el foro hace 2 días
__________________
WFC
codigo82
  #12 (permalink)  
Antiguo 26/05/2009, 16:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Mostrar votos en comentario

Cita:
Iniciado por willyfc Ver Mensaje
pero mi problema esta en que debí haber terminado el foro hace 2 días
Disculpa, creo que no he pillado el significado. O mejor dicho, ahora estoy perdido. No he comprendido bien a qué te referías.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 26/05/2009, 16:42
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: Mostrar votos en comentario

lo que pasa es que lo del consejo en el post que te doy la razón era para mí por eso lo puse de ese color, es que tengo mucho trabajo y por motivos de fuerza mayor no he podido terminar y me pasan cosas tan obvias como la que paso en este problema, luego de tu post me dije:

Cita:
y yo por que no pensé en el texto que va del otro lado de la cajita
ahora sí me entiendes, el consejo me lo di yo mismo, sorry por la confusión.
__________________
WFC
codigo82
  #14 (permalink)  
Antiguo 28/05/2009, 12:13
Avatar de OsSk4R  
Fecha de Ingreso: octubre-2006
Ubicación: $this->home
Mensajes: 824
Antigüedad: 11 años, 1 mes
Puntos: 74
Respuesta: Mostrar votos en comentario

Bueno, no me esperaba ver tantos mensajes o.O

Y decir que una vez más gracias, ya esta solucionado :)

Nos seguimos viendo
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 22:30.