Tabla css con imágenes  

 
WebMaster
 WebMaster
Estimable Member

Hola,
reciente hemos hecho una tabla con html y css la cual contiene unas imagenes (pictogramas) y un texto descriptivo para cada imagen.
Pues en versión para pc ningún problema, adjunto imagen

Pero para la versión móbil no acaba de visualizarse correctamente, no hace bien el responsive.

Les adjunto otra captura haber si me pueden ayudar introduciendo algo de código adicional en el css.

Muchas gracias de nuevo

Saludos

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 05/08/2015 5:02 pm
Rafael
 Rafael
Miembro Moderator

¡Hola!

Por lo que veo en las capturas todo apunta que las tablas tienen un tamaño fijo y estático, es por este motivo que al cambiar de resolución no te permite visualizarlo correctamente.

Te recomiendo que en vez de tablas utilices capas (divs) con tamaños relativos con porcentajes. De esta manera, encajará y será responsive para todas las resoluciones.

Ten en cuenta que no damos soporte a programación personalizada por lo que la información que podemos darte es general.

¿Podrías enviarnos un enlace donde tienes hecha la tabla?

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 05/08/2015 5:34 pm

Cursos Gratuitos WordPress

WebMaster
 WebMaster
Estimable Member

Hola Rafael,
la url es la url que he adjuntado anteriormente /altres-centres o sea Contenido solo visible a usuarios registrados
Ya se que no teneis programación personalizada simplemente os pido algún trozo de código css que me pueda faltar para solucionar el problema, seria diferente que os pidiera que me hicierais vosotros la tabla con html y el css que esta utilizara.
Por norma con Jhon y Pablo nunca he tenido ningún problema y siempre me han ayudado con pequeños fragmentos de código que los más inexpertos nos dejamos.

Saludos

ResponderCitar
Respondido : 05/08/2015 6:03 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Creo que has planteado mal el diseño de esta parte de tu sitio, cuando quiere un comportamiento responsive para una tabla usualmente es para mostrar información tabulada, la tabla no puede adaptarse al espacio del navegador sin embargo lo que se suele hacer es poner un scroll para la tabla, por ejemplo :

https://www.webempresa.com/blog/item/1431-haz-que-tus-tablas-en-joomla-se-adapten-bien-a-los-dispositivos-moviles.html

Tal como te dije esto es usualmente usado cuando tienes información de filas columnas tipo excel

En tu caso es más un tema visual, que quieres poner links de imagen texto y que se ordenen en columnas y filas, no necesitas una tabla para esto, tendrías que evaluar hacerlo con Divs flotantes, por ejemplo:

http://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css

Veo que tu plantilla carga un archivo css de bootstrap podrías evaluar hacerlo con el sistema de grids de bootstrap :

http://getbootstrap.com/examples/grid/

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 05/08/2015 6:52 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

WebMaster
 WebMaster
Estimable Member

Hola Jhon,
muchas grácias por tus aclaraciones.

Saludos

ResponderCitar
Respondido : 10/08/2015 12:12 pm
WebMaster
 WebMaster
Estimable Member

Hola vuelvo a reemprender el hilo, disculpen.
Me podrian indicar como reducir el espaciado entre columnas en la tabla que les muestro?
Hemos estado probando y no damos con el código adecuado, nos pueden dar una ayuda?

Muchas gracias de antemano

Saludos

ResponderCitar
Respondido : 10/08/2015 12:20 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Este espacio se aplica porque la tabla está contenido en un div que tiene un ancho de 800 píxels aplicado mediante CSS. De esta forma cada celda de la tabla ocupa una tercera parte de ese ancho.

Este ancho de 800 píxels lo estás aplicado desde el archivo templates/yoo_master2/css/custom.css con el siguiente código:

#contenedor
{
  margin: 10px auto;
  height: 550px;
  width: 800px;
  border-color: #FFFFFF;
  border-style: solid;
  border-width: 10px;
  position: relative;
}

Tal como te había comentado Rafael en una respuesta anterior, no te recomiendo utilizar una tabla si quieres conseguir un comportamiento responsive. Es mejor usar etiquetas div. Sería algo como lo siguiente:

Contenido de la celda
Contenido de la celda
Contenido de la celda
....

Luego tendrías que añadir un CSS como el siguiente:

.celdatabla {
width: 100px;
float: left;
}

Podrías ajustar el ancho de la celda a tu gusto. También es posible que sean necesarios más retoques a nivel de CSS.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 10/08/2015 2:00 pm
WebMaster
 WebMaster
Estimable Member

Hola Pablo,
muchas gracias por tus lecciones 😉 aparte de lo que comentas he añadido un div general para todos los divs "celdatabla" puesto que tengo también los círculos de abajo la tabla que queria hacer con divs y esto me generaba alguna complicación en la visualización correcta también le he puesto un overflow: hidden; ya que se solapaban los divs.

Lo único que no se como hacer (he estado probando una y otra cosa y nada) para que no se muestren en una sola columna todos los pictogramas si no que se queden por ejemplo con tres columnas 4 filas y 2 pictos sueltos (por poner un ejemplo), os adjunto una captura.

Por otra parte como podríamos visualizar correctamente alineados todos los pictogramas? También les adjunto una captura.

De nuevo muchas gracias 😉

Saludos

ResponderCitar
Respondido : 11/08/2015 5:06 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Lo veo correctamente, el problema solo es al redimensionarse el navegador, para esto lo que puedes hacer es darle un min-height, por ejemplo, con esto se verá mejor conservando las filas y columnas.

.celdatabla {
min-height:140px;
}

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 11/08/2015 6:23 pm
WebMaster
 WebMaster
Estimable Member

Muchas gracias Jhon, ahora mucho más perfecto! 😉

Saludos

ResponderCitar
Respondido : 11/08/2015 6:40 pm

Cursos Gratuitos WordPress

Por favor Iniciar Sesión o Registro