Foros del Web » Creando para Internet » CSS »

¿Cómo mejorar el CSS de las cajas de Foros del Web?

Estas en el tema de ¿Cómo mejorar el CSS de las cajas de Foros del Web? en el foro de CSS en Foros del Web. La representación gráfica de foros en portada o de subforos y tags en cada foro se está haciendo a través de unas cajas que le ...
  #1 (permalink)  
Antiguo 24/03/2011, 22:02
Avatar de cvander
Moderador
 
Fecha de Ingreso: abril-2001
Ubicación: Ciudadano del mundo
Mensajes: 13.638
Antigüedad: 23 años, 7 meses
Puntos: 1792
¿Cómo mejorar el CSS de las cajas de Foros del Web?

La representación gráfica de foros en portada o de subforos y tags en cada foro se está haciendo a través de unas cajas que le dan un tamaño grande al tema más importante del foro, un tamaño menor a los temas secundarios y luego un tamaño más pequeño al resto de temas. Ha sido interesante jugar con estas cajitas y llevaras a todo el foro, particularmente donde nos hemos encontrado etiquetas con más caracteres, títulos que parecen estirarse y descuadrar lo que vemos.

Una de las formas de combatir esto es modificando los nombres de algunos foros y etiquetas, para reducir el tamaño de las cajas, pero no es lo más eficiente, ni la forma más inteligente de pensar a futuro, queremos trabajar en el CSS y en la estrategia de mostrar las cajas.

¿Cómo hacer para que las cajas más pequeñas queden mezclas con las medianas o las grandes a un nivel superior? Tenemos que delimitarles un máximo de ancho acaso? O crees que podríamos jugar con alguna otra propiedad?

Agradecemos cualquier luz sobre esto, pues seguimos quebrándonos la cabeza sobre la mejor forma de implementarlo.



Por ejemplo vean en esta imagen. Nos encantaría que las cajas chicas se corrieran a la derecha de las cajas grandes, para no dejar ese espacio y agrupar mejor la información.



Este es un ejemplo donde los tamaños hace que todo encaje bastante bien, sin apretar de más, pero no siempre se cumple ese orden.



Y aquí otro más donde la última linea de cajas pequeñas, hubiese quedado mejor agrupada a la derecha de las cajas grandes superiores.
__________________
- Christian Van Der Henst
Platzi
  #2 (permalink)  
Antiguo 24/03/2011, 22:38
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 14 años, 3 meses
Puntos: 64
Respuesta: ¿Cómo mejorar el CSS de las cajas de Foros del Web?

Emm.. a ver lo primero y sin analizar nada..lo q se me viene a la mente es que podrian contar los caracteres desde php,y si tiene determinado numero de caracteres que flote para un lado y si no que flote para otro.. en fin.. jugar con el css determinando el numero de caracteres de cada titulo
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 24/03/2011, 22:55
 
Fecha de Ingreso: marzo-2011
Ubicación: Colombia
Mensajes: 1
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: ¿Cómo mejorar el CSS de las cajas de Foros del Web?

Creo q debes mirar con más cuidado los CSS, al parecer ahi una herencia q no deja q esto pase, mirando un poco hice este cambio y se modifico en algo como quieres:

Código:
.content_box li {float: left !important;}
a lo mejor y es por ahí la solución ;)
  #4 (permalink)  
Antiguo 24/03/2011, 23:07
Avatar de anirom89  
Fecha de Ingreso: marzo-2011
Mensajes: 9
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: ¿Cómo mejorar el CSS de las cajas de Foros del Web?

Puedes ponerle a los cuadros medianos y chicos el mismo tamaño o también podrias hacer los cuadros de tamaño mediano, del largo que el grande y los chicos del tamaño que están ordenados en el espacio que te queda y también reduciendo un poco el tamaño del padding

Última edición por anirom89; 24/03/2011 a las 23:15
  #5 (permalink)  
Antiguo 24/03/2011, 23:41
Avatar de cvander
Moderador
 
Fecha de Ingreso: abril-2001
Ubicación: Ciudadano del mundo
Mensajes: 13.638
Antigüedad: 23 años, 7 meses
Puntos: 1792
Respuesta: ¿Cómo mejorar el CSS de las cajas de Foros del Web?

Gracias por las recomendaciones.. Vía twitter me están dejando otras ideas:

Cita:
@seouyx: @nicobf @cvander créo que colocando el max-width: en el div principal sin atributos en los siguientes, se acomodarian segun entrasen ;)
Cita:
@mipinsua: @cvander Pondria por ejemplo un padding-left: 5px, un padding-right:5px y widht:auto asi el ancho lo da la palabra

@mipinsua: @cvander Creo que puedes hacerlo con la propiedad Float y lo del ancho lo puedes manejar con paddings .
Cita:
@alejandrogm: @cvander Para mi seria con un max-width.
Cita:
@nicobf: @cvander el float:left y el ancho se lo das al DIV, el resto se acomoda solo.. o sea, si se pasa del ancho se va para la línea de abajo. :)

@nicobf: @cvander @forosdelweb probaste con float:left en DIV´s anidados? obviamente dando el ancho a c/uno.. a las ordenes! :)
__________________
- Christian Van Der Henst
Platzi
  #6 (permalink)  
Antiguo 24/03/2011, 23:58
Avatar de j_aroche
Server Ninja
 
Fecha de Ingreso: agosto-2006
Ubicación: iPhone: 14.624481,-90.487457
Mensajes: 2.066
Antigüedad: 18 años, 3 meses
Puntos: 223
Respuesta: ¿Cómo mejorar el CSS de las cajas de Foros del Web?

Matando el <li class="spacer"></li> y ajustando los altos de las cajitas llegué a esto, ¿Qué te parece?:

__________________
Blog: JavierAroche.com - Twitter: @j_aroche
  #7 (permalink)  
Antiguo 24/03/2011, 23:58
Avatar de anirom89  
Fecha de Ingreso: marzo-2011
Mensajes: 9
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: ¿Cómo mejorar el CSS de las cajas de Foros del Web?

Algo asi

http://img190.imageshack.us/i/prueb2.png
  #8 (permalink)  
Antiguo 25/03/2011, 00:03
Avatar de cvander
Moderador
 
Fecha de Ingreso: abril-2001
Ubicación: Ciudadano del mundo
Mensajes: 13.638
Antigüedad: 23 años, 7 meses
Puntos: 1792
Respuesta: ¿Cómo mejorar el CSS de las cajas de Foros del Web?

Cita:
Iniciado por j_aroche Ver Mensaje
Matando el <li class="spacer"></li> y ajustando los altos de las cajitas llegué a esto, ¿Qué te parece?:

Mucho mejor.. Hay que aplicar el cambio y probarlo con todas las cajitas.
__________________
- Christian Van Der Henst
Platzi

Etiquetas: cajas, foros, mejorar
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

SíEste tema le ha gustado a 5 personas




La zona horaria es GMT -6. Ahora son las 11:23.