Problemas con una tabla
Tengo una tira de thumbnails (una tabla con varias columnas con una thumbnail en cada una de ellas). Las thumbnails tienen una altura de 90 y anchura de 60 pero las medidas de cada celda son 90x90.
Las imágenes están alineadas en el centro, con lo que quiero conseguir un efecto de diapositiva quedando una franja blanca a cada lado de la imagen (no se si me explico demasiado bien).
El código queda así.
<td width=90 height=90>
<p align=center><img src="a.jpg" width=60 height="90"></p>
</td>
Las franjas de los lados están muy bien siempre y cuando todas las columnas quepan a lo ancho de la pantalla. En caso contrario, salen las imagenes pegadas a los bordes de celda omitiendo <td width=90 height=90>.
¿Cómo puedo hacer para que me salga como yo quiero?
Gracias por adelantado, sin esto la tira de thumnbails pierde toda su gracia.
Las imágenes están alineadas en el centro, con lo que quiero conseguir un efecto de diapositiva quedando una franja blanca a cada lado de la imagen (no se si me explico demasiado bien).
El código queda así.
<td width=90 height=90>
<p align=center><img src="a.jpg" width=60 height="90"></p>
</td>
Las franjas de los lados están muy bien siempre y cuando todas las columnas quepan a lo ancho de la pantalla. En caso contrario, salen las imagenes pegadas a los bordes de celda omitiendo <td width=90 height=90>.
¿Cómo puedo hacer para que me salga como yo quiero?
Gracias por adelantado, sin esto la tira de thumnbails pierde toda su gracia.
5 Respuestas
Respuesta de calipides
1
Disculpa la horrible demora, pero estaba sin internet en la casa...
Primero que nada... ¿no te parece que es mejor definir un tamaño fijo para la tabla? (Por ejemplo 780 pixeles)
Así trabajas con un tamaño que la mayoría de la gente pueda ver en una resolución de pantalla de 800x600 que es la más común...
En tu caso es aconsejable asignarle un tamaño fijo a la tabla, ya que si alguien cambia el tamaño de la ventana, siempre la tabla va a tener la misma medida y no se va a perder el borde de diapositiva que quieres mostrar... pero si colocas más columnas de las que caben en el espacio que tu definas todo el diseño se te va a ir al diablo (por ejemplo, obviamente no van a caber, 10 columnas de 90x90 en una tabla de 800 de ancho)
Te explico el porque de esto:
Cuando tu NO especificas tamaño, el navegador asume que la tabla se debe adaptar al tamaño de lo que esta adentro, pero esta adaptación incluye a los bordes, margenes, etc... solo cuando no hay ningún otro espacio disponible comienza a extenderse más allá del espacio normal de la pantalla. Por eso te achica los márgenes.
La solución más lógica (y la que te recomiendo) es definir un tamaño para la tabla y respetarlo. Si no puedes hacer esto por el motivo que sea (por ejemplo si dependes de una base de datos para definir el numero de columnas), lo otro que puedes hacer es modificar las thumbnails y agregarles el borde blanco directamente a las imágenes.
Lamentablemente esas son las únicas opciones para tu caso...
Suerte!
Primero que nada... ¿no te parece que es mejor definir un tamaño fijo para la tabla? (Por ejemplo 780 pixeles)
Así trabajas con un tamaño que la mayoría de la gente pueda ver en una resolución de pantalla de 800x600 que es la más común...
En tu caso es aconsejable asignarle un tamaño fijo a la tabla, ya que si alguien cambia el tamaño de la ventana, siempre la tabla va a tener la misma medida y no se va a perder el borde de diapositiva que quieres mostrar... pero si colocas más columnas de las que caben en el espacio que tu definas todo el diseño se te va a ir al diablo (por ejemplo, obviamente no van a caber, 10 columnas de 90x90 en una tabla de 800 de ancho)
Te explico el porque de esto:
Cuando tu NO especificas tamaño, el navegador asume que la tabla se debe adaptar al tamaño de lo que esta adentro, pero esta adaptación incluye a los bordes, margenes, etc... solo cuando no hay ningún otro espacio disponible comienza a extenderse más allá del espacio normal de la pantalla. Por eso te achica los márgenes.
La solución más lógica (y la que te recomiendo) es definir un tamaño para la tabla y respetarlo. Si no puedes hacer esto por el motivo que sea (por ejemplo si dependes de una base de datos para definir el numero de columnas), lo otro que puedes hacer es modificar las thumbnails y agregarles el borde blanco directamente a las imágenes.
Lamentablemente esas son las únicas opciones para tu caso...
Suerte!
Gracias. Eso ya lo se... pero dependo de una base de datos... lo que hice fue obtener el numero de thumbnails con javascript y que me calculara cada vez el ancho total y lo escribiera como ancho de tabla.
Respuesta de 00rockman00
1
De la tabla que te doy saca los datos necesarios para hacer tu tabla ^^
Está tabla es un ejemplo de 3 columnas por 3 celdas:
<center>
<table BORDER CELLSPACING=0 CELLPADDING=0 width=270>
<tr>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
</tr>
<tr>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
</tr>
<tr>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
</tr>
</table></center>
Eso es todo, si aún no consigues lograr el efecto deseado, dame más detalles ;)
See u
Está tabla es un ejemplo de 3 columnas por 3 celdas:
<center>
<table BORDER CELLSPACING=0 CELLPADDING=0 width=270>
<tr>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
</tr>
<tr>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
</tr>
<tr>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
<td><center><img src="0.gif" widht=60 height=90></td>
</tr>
</table></center>
Eso es todo, si aún no consigues lograr el efecto deseado, dame más detalles ;)
See u
Esto si que me sirve, pero el problema es que el numero de fotos que hay no lo escribo yo, sino que lo hago en javascript con datos de variables.
Hago un loop que me escribe <td>todolodelaimagen</td>.
¿Podría coger el numero de imágenes multiplicarlo por 90 y escribirlo en <table>?
Hago un loop que me escribe <td>todolodelaimagen</td>.
¿Podría coger el numero de imágenes multiplicarlo por 90 y escribirlo en <table>?
Exacto, eso es lo que hice, para que la tabla general saliera configurada con el tamaño que necesitas
Solo escoge el numero de imágenes y multiplícalo por 90
Ejemplo
3 imagenes por 90 = 270
See u
Solo escoge el numero de imágenes y multiplícalo por 90
Ejemplo
3 imagenes por 90 = 270
See u
Veras, tengo un loop javascript así:
<script>
var photo=1;
var numberphotos= number()
while (numberphotos>=photo)
{var album= obtener_valor("carpeta");
var image= new Image();
image.src=""+carpeta+"/"+photo+".jpg";
document.write ("<td width=90 height=90><p align=center><img src="+image.src+" height=90 ></p></td>");
photo++;
}
</script>
mi pregunta es si podría hacer algo mas o menos como esto (lo he probado y no funciona):
<script>
var numberphotos= number();
width= numberphotos*90;
document.write ("<table width="+width+">");
</script>
<script>
var photo=1;
var numberphotos= number()
while (numberphotos>=photo)
{var album= obtener_valor("carpeta");
var image= new Image();
image.src=""+carpeta+"/"+photo+".jpg";
document.write ("<td width=90 height=90><p align=center><img src="+image.src+" height=90 ></p></td>");
photo++;
}
</script>
mi pregunta es si podría hacer algo mas o menos como esto (lo he probado y no funciona):
<script>
var numberphotos= number();
width= numberphotos*90;
document.write ("<table width="+width+">");
</script>
Ya lo he conseguido. Hago lo siguiente:
<script>
var a = number(), b = 90;
document.write ("table width=" + (a * b) + ">");
</script>
Gracias por todo.
<script>
var a = number(), b = 90;
document.write ("table width=" + (a * b) + ">");
</script>
Gracias por todo.
Respuesta de miguelete
1
Prueba con este código...
<td width=90 height=90 align="CENTER">
<TABLE border=0 cellspacing=0 cellpadding=3>
<TD bgcolor=#COLOR_MARCO>
<IMG src="a.jpg" width=60 height="90">
</TABLE>
... metiendo la imagen de la celda dentro de una tabla con cellpadding.
P.D.: Los <TD> no hace falta cerrarlos... ;) Los <TABLE> sí.
<td width=90 height=90 align="CENTER">
<TABLE border=0 cellspacing=0 cellpadding=3>
<TD bgcolor=#COLOR_MARCO>
<IMG src="a.jpg" width=60 height="90">
</TABLE>
... metiendo la imagen de la celda dentro de una tabla con cellpadding.
P.D.: Los <TD> no hace falta cerrarlos... ;) Los <TABLE> sí.
Aunque ya sabia que esto se podía hacer no lo había probado y queda bastante bien... todo y así el espacio de las bandas no es como yo lo querría.
Podría pasar pero en cuanto le meto una imagen apaisada (altura 60, anchura 90) se nota mucho y no tiene nada que ver con lo bien que queda sin cellpading y con poquitas fotos (que quepan a lo ancho).
Todo y así, muchas gracias.
Podría pasar pero en cuanto le meto una imagen apaisada (altura 60, anchura 90) se nota mucho y no tiene nada que ver con lo bien que queda sin cellpading y con poquitas fotos (que quepan a lo ancho).
Todo y así, muchas gracias.
Respuesta de scriptman
1
Esto sucede porque la tabla en que están los tds no tiene una medida definida, si le añades
<table width="XXX">
Donde XXX es el tamaño en pixeles de la tabla, no dará ese problema.
Pero yo te recomiendo que, como esto es cuestión de apariencia, uses estilo:
En el head entre <style> y </style> (o en un archivo .css referenciado):
.tira { padding: 0 20 0 20; }
y en tu tabla:
<td class=tira>
<p align=center><img src="a.jpg" width=60 height="90"></p>
</td>
De esta forma ademas de las distancias, puedes especificar colores, fondos, etc etc a todas las tds fácilmente.
<table width="XXX">
Donde XXX es el tamaño en pixeles de la tabla, no dará ese problema.
Pero yo te recomiendo que, como esto es cuestión de apariencia, uses estilo:
En el head entre <style> y </style> (o en un archivo .css referenciado):
.tira { padding: 0 20 0 20; }
y en tu tabla:
<td class=tira>
<p align=center><img src="a.jpg" width=60 height="90"></p>
</td>
De esta forma ademas de las distancias, puedes especificar colores, fondos, etc etc a todas las tds fácilmente.
Respuesta de juanceer
1
Imagino que el problema que tienes es que la tabla no tiene definido el ancho, o sino esta definido en porcentaje.
Para solucionarlo, selecciona la tabla, y dale el ancho en pixeles (el ancho debe ser 90 px por cantidad de columnas), por ejemplo con 8 columnas definile un ancho de 720 px, de esa manera la tabla no se ajustara al tamaño de la pantalla.
Para solucionarlo, selecciona la tabla, y dale el ancho en pixeles (el ancho debe ser 90 px por cantidad de columnas), por ejemplo con 8 columnas definile un ancho de 720 px, de esa manera la tabla no se ajustara al tamaño de la pantalla.