menú en tabla mobile-friendly

[woselwosel]

Hola

Mis conocimientos en diseño web son bastante nulos, pero me defiendo con cosas básicas (que no tienen por qué estar bien hechas).

Por lo que sea, he tenido que diseñar un pequeño menú que va dentro de una página de wordpress, pero lo he creado con tablas y no es muy mobile-friendly.

El código sería este

Código HTML:

<table width="600" border="0" align="center">
<tbody>
<tr>
<td><img alt="”&quot;" src="imagen.png" /></td>
<td><img alt="”&quot;" src="imagen.png" /></td>
<td><img alt="”&quot;" src="imagen.png" /></td>
</tr>
<tr>
<td align="center" valign="top"><a href="enlace">texto</a></td>
<td align="center" valign="top"><a href="enlace">texto</a></td>
<td align="center" valign="top"><a href="enlace">texto</a></td>
</tr>
</tbody>
</table> 

Siendo las imágenes de 200x50 (200 de ancho x 3 imágenes, total 600px)

Pero esta hace que en un móvil no muy grande, no sea adaptable y muestre los 600px completos. Si el móvil tiene una pantalla de 400 o 500px, nunca se ve la tabla completa.

¿Cómo lo mejoro?

Gracias!

[pzin]

¿Cómo son esas imágenes? Seguro que puede hacerse algo mejor, sin usar tablas y que sea responsivo.

[woselwosel]

A qué te refieres con cómo son?

Son imágenes png con un pequeño fondo transparente.

Le he añadido esto al código de la tabla, haciendo que el tamaño sea en porcentaje, con un máximo de 600px

Código HTML:

<table width="75%" style="max-width: 600px;" border="0" align="center"> 

Y más o menos funciona, si hago la ventana más pequeña, se van reduciendo al ritmo de la reducción. Pero llega un punto en el que las celdas de texto mandan sobre las imágenes, y las que tienen un texto más corto se siguen reduciendo, mientras que las que tienen un texto más largo, se quedan con la imagen un poco más grande. Es decir, el tamaño de la celda del texto delimita el tamaño mínimo posible de la celda de la imagen.

Se entiendo mejor si pongo el enlace:

http://bit.ly/1nbhXEC

Verás que si reduces la ventana, hay 2 imágenes que quedan más grandes que las otras 2, en función de la longitud del texto que tienen debajo. ¿Cómo lo arreglo?

[pzin]

Es que según las buenas prácticas eso no debería de ser una tabla, sino una lista desordenada con enlaces, con ul, li y demás. Las tablas sólo se usan para datos tabulados, no para cuestiones de diseño ni estructuración.
Aparte, cualquier cosa es mucho más flexible que una tabla y unas celdas.

De hecho la sombra y los bordes redondeados de las imágenes se pueden hacer también usando CSS.

Y para cuestiones de RWD, se suelen usar media-queries.

De todas formas, si no te interesa nada de lo anterior, siempre puedes aplicar a la tabla:

Código CSS:

table-layout: fixed;
 

Y se te arregla ese problemilla.

Buenas playas aquellas.

[woselwosel]

Ok, entiendo que las tablas son una manera chapucera de hacerlo, pero es que realmente no es mi trabajo esto (se nota? xD)

Como dices, prefiero hacer algo para salir del paso y que más o menos funcione. Así que tiraré por la solución que me propones. El tema es que no entiendo mucho de CSS

La web está hecha con wordpress, y en el editor hay un archivo llamado main-style.css.

Cómo hago exactamente para vincular que esa tabla va con ese estilo? Me podrías decir qué poner en el HTML y qué poner exactamente en el CSS?

Gracias-gracias-gracias

[pzin]

De WordPress sólo sé que existe.

Pero deberás de poner un identificador a la tabla

Código HTML:

<table id="menu_majorero">
 

Y luego indicar en el archivo CSS un selector que lo relacione:

Código CSS:

table#menu_majorero {
  table-layout: fixed;
}
 

O algo más sucio sería embeber los estilos directamente en la tabla:

Código HTML:

<table style="table-layout: fixed">
 

Lo que es menos recomendado.

[woselwosel]

Bueno, pues he tirado por la peor (pero más fácil) solución.

¡Funciona!

Pero ahora pasa otra cosa, que es que, al hacerse más y más pequeño. las celdas de los textos se solapan y las letras se juntan. En un smartphone medio-grande se ve bien, pero en uno tirando a pequeño, sí que ocurre esto.

Le he intentado meter el código

Código HTML:

style="min-width:70px"

en las td o en los div, porque si lo dejo en 70px por celda no se juntarían, pero no me hace caso. Tampoco poniéndolo en el tr a 280px.

Puedes mirarlo aquí: http://ow.ly/trxXp, haciendo pequeñita la pantalla.

PD: También hay un tema, menos importante, que es que le había dicho mediante style que el max-with fuese 600px. Ahora con el style=fixed ese, no sé cómo conjugar los 2 styles. Tal y como lo he puesto, primero el fixed y luego el max-width, no me hace caso al max-width. ¿Cómo escribo los 2 juntos?

PD2: Graciaaaaas!!

[pzin]

Aplícale el ancho mínimo a la tabla mejor:

Código CSS:

table {
  min-width: 250px;
}
 

A mi así se me ve bien.

Para poner varias propiedades las separas por punto y coma, algo así:

Código HTML:

<table style="propiedad1:valor1;propiedad2:valor2;propiedad3:valor3;">