Foros del Web » Creando para Internet » HTML »

Celdas de tabla a 24px imagenes a 24px no caben

Estas en el tema de Celdas de tabla a 24px imagenes a 24px no caben en el foro de HTML en Foros del Web. Hola, digamos que tengo una tabla compuesta de varias celdas con width de 24px y height de 24px definidos en el atributo style. Si aqui ...
  #1 (permalink)  
Antiguo 10/07/2009, 12:41
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Pregunta Celdas de tabla a 24px imagenes a 24px no caben

Hola, digamos que tengo una tabla compuesta de varias celdas con width de 24px y height de 24px definidos en el atributo style.


Si aqui dentro meto imagenes del mismo tamaño... las celdas se agrandan..
¿Porque?

Incluso metiendo imagenes de 20 por 20 se sigen agrandando las celdas y no quiero que ocurra esto ya que las celdas tienen un fondo y ese sale mal..

¿Como lo soluciono?

Gracias!
  #2 (permalink)  
Antiguo 10/07/2009, 12:47
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Será más fácil ayudarte si nos muestras el código de la tabla o un enlace a la página.

Saludos.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 10/07/2009, 13:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Hasta tu regreso con el código como te sugiere David antes "EL GRANDE", me pregunto si estás utilizando la propiedad table-layout="fixed" además de la anchura de las celdas.

Para una explicación algo mayor mira este tema

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 10/07/2009, 13:03
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Código HTML:
<table class="mapa" cellpadding="0" cellspacing="0">
<tr>
<td><img src="imagen.gif"/>
</td>
</tr>
</table> 
css:
Código HTML:
table.mapa td
{
	text-align: center;
	vertical-align: center;
	width: 24px;
	height: 24px;
}
table.mapa td img
{
	width: 20px;
	height: 20px;
}
Hay lo tienes

Gracias
  #5 (permalink)  
Antiguo 10/07/2009, 14:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Hola Astud

Sin ver el resto de la página, no puedo imaginar por qué utilizas tablas para ello.
Así que me aventuro a colocarte un par de presentaciones de imágenes de forma uniformes sin importar el tamaño de las mismas, claro, sin tablas:
Una: sólo las imágenes
Dos: añadiendo un título y un pie de imagen

De todas formas, asegúrate que no están influyendo otras propiedades. Para ello viene muy bien Firefox con firebug: podrás ver todas las propiedades que se le aplican a un elemento.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 10/07/2009, 14:30
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Hola kseo gracias por responder.

Defino el ancho y alto de la table, todas las celdas tienen el mismo tamaño... la imagen que meto dentro debe ser mas pequeña que la celda para que encaje no se porque.

He probado con table layout y lo otro que me has dicho y nada.

Es un editor de mapas para un juego por web online lo que estoy desarrollando, cosa que puedes ver aqui:
http://www.forosdelweb.com/f1/http-w...6/#post2719951
por eso utilizo tablas.

A ver si hay alguna solucion, gracias!

EDIT: en iexplore la imagen no se sale... ocurre en firefox y en opera ¿Qe puedo hacer?

Última edición por astut; 11/07/2009 a las 04:30
  #7 (permalink)  
Antiguo 11/07/2009, 04:35
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Este es el css que uso:
Código HTML:
table.mapa
{
	overflow: hidden;
	table-layout: fixed;
	width: 768px;
	height: 480px;
	margin: 0 auto; 
	border: 1px solid #999999;
}
table.mapa td
{
	text-align: center;
	vertical-align: center;
	width: 24px;
	height: 24px;
}
table.mapa td img
{
	width: 24px;
	height: 24px;
}
Y sige dando el problema, una imagen:


Como veis, donde esta el muñequito, pues la imagen parece que mida mas 24px por 24px y se fastidia todo... es como si las css no se aplicaran, en cambio en iexplore va de maravilla.
  #8 (permalink)  
Antiguo 11/07/2009, 08:22
 
Fecha de Ingreso: julio-2007
Mensajes: 115
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

A ver, puede que firefox se arme un lio si le defines dos veces las dimensiones de las celdas, si te fijas en el CSS estas diciendole primero que son de 24px y luego son d 20px...echale un vistazo...
  #9 (permalink)  
Antiguo 11/07/2009, 09:52
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Cita:
A ver, puede que firefox se arme un lio si le defines dos veces las dimensiones de las celdas, si te fijas en el CSS estas diciendole primero que son de 24px y luego son d 20px...echale un vistazo...
?

Le defino que son 24 px nada mas no se que estas diciendo

Ayuda por favor.
  #10 (permalink)  
Antiguo 11/07/2009, 09:53
 
Fecha de Ingreso: julio-2007
Mensajes: 115
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Cita:
table.mapa td
{
text-align: center;
vertical-align: center;
width: 24px;
height: 24px;
}
table.mapa td img
{
width: 24px;
height: 24px;
}
fijate que en las dos defines la etiqueta <td> ...entonces les das dos valores, en la primera 20 y en la segunda 24
  #11 (permalink)  
Antiguo 11/07/2009, 12:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

No Zapiko, la primera define la propiedades de las celdas de las tablas que tengan definida su clase como 'mapa', a continuación son ´para las imágenes que estén dentro de una celda cuya tabla tenga aplicada la clase 'mapa'.

Astut, si no tienes reseteado tu css, añade al inicio (lo primero de todo) de tu hoja de estilos:
Cita:
* {margin:0;padding:0; border:0; outline:none; position: relative;}
Porque lo único que se me ocurre es que se estén aplicando algún margen o padding

¿no tienes la página en línea? Pon un enlace a la página donde está el problema.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 11/07/2009, 13:28
 
Fecha de Ingreso: julio-2007
Mensajes: 115
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

ok pos lo siento....:S
  #13 (permalink)  
Antiguo 11/07/2009, 14:35
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Cita:
No Zapiko, la primera define la propiedades de las celdas de las tablas que tengan definida su clase como 'mapa', a continuación son ´para las imágenes que estén dentro de una celda cuya tabla tenga aplicada la clase 'mapa'.

Astut, si no tienes reseteado tu css, añade al inicio (lo primero de todo) de tu hoja de estilos:
Cita:
* {margin:0;padding:0; border:0; outline:none; position: relative;}
Porque lo único que se me ocurre es que se estén aplicando algún margen o padding

¿no tienes la página en línea? Pon un enlace a la página donde está el problema.

Un saludo
Hago lo que me dices pero nada, sige igual, incluso quitando todas las css y solo dejando el mapa sige dando el mismo error..

La pagina no esta en linea no dispongo de servidor, estoy pensand oen lanzar el proyecto el mes que biene con un VPS para empezar pero si sigo con este problema lo dudo

Gracias por la ayuda pero sige igual
  #14 (permalink)  
Antiguo 11/07/2009, 14:57
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Probaste ya con overflow:hidden;?

Tambien ten en cuenta que debes crear cada celda sin espacios entre etiquetas:

Aumenta el tamaño:
<td> <img ... /> </td>
<td><img ... /> </td>

No aumenta el tamaño
<td><img ... /></td>
__________________
- León, Guanajuato
- GV-Foto
  #15 (permalink)  
Antiguo 11/07/2009, 15:51
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Cita:
Probaste ya con overflow:hidden;?

Tambien ten en cuenta que debes crear cada celda sin espacios entre etiquetas:

Aumenta el tamaño:
<td> <img ... /> </td>
<td><img ... /> </td>

No aumenta el tamaño
<td><img ... /></td>
Hola trybi, nada de nada, ni con overflow ni con layout table ni de ninguna forma, solo ocurre con firefox y no encuentro nada que este mal...

A ver si alguien tiene una respuesta.
  #16 (permalink)  
Antiguo 11/07/2009, 19:03
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Hola astut

Sigo este problema con cierta perplejidad y como no acabo de entenderlo bien recojo tu código (de tu post num. 4) y contruyo un html completo para hacer pruebas.

La imagen de 20x20 px (ficticia) es un cuadrado verde de esa medida para hacer pruebas.

He hecho pruebas en 9 navegadores y las he capturado en imágenes.

Todo esto está subido a:

http://www.box.net/shared/18i6gi2s5e

Sobre esta base, puedes decirnos dónde está el problema (o es que, quizás, la causa del problema está en otra parte de tu código que no conocemos).

Comenta algo.

Bye
  #17 (permalink)  
Antiguo 13/07/2009, 07:52
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Muchas gracias deirdre por lo que has hecho de verdad estoy muy agradecido, pero... he dejado el mapa de mi web sin css, solo con los 24px por 24px de cada celda y aun asi sige dando el problema..

¿Tal vez sea jequery o xajax que utilizo?

De verdad muchas gracias!
  #18 (permalink)  
Antiguo 13/07/2009, 08:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Hola Astut.

Después de andar dándole alguna vuelta al tema de las tablas (que reconozco mi desconocimiento de ellas), te comparto lo siguiente, tomando como base el código:

Código html:
Ver original
  1.         <table width="60" border="0" cellspacing="0" cellpadding="0" height="60">
  2.             <tr height="20">
  3.                 <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
  4.                 <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
  5.                 <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
  6.             </tr>
  7.             <tr height="20">
  8.                 <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
  9.                 <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
  10.                 <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
  11.             </tr>
  12.             <tr height="20">
  13.                 <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
  14.                 <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
  15.                 <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
  16.             </tr>
  17.         </table>
  18.     </body>

Deliberadamente descabezado

Pues lo que he podido observar es que el espacio aparece en función del doctype.
Si el documento comienza por:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
no surgen espacios en blanco.
Si el doctype es
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ya tenemos espacio entre las filas, y la única forma que he hallado de eliminarlo es añadiendo el estilo:
Código css:
Ver original
  1. tr {float: left; clear:both;}
conjuntamente con este último doctype.

Intentaré alguna cosilla más y te cuento.

Un saludo.

Edito:
No tomar en cuenta los errores tales como no cerrar los tags, los estilos en el cuerpo, etc. Son pruebas.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 13/07/2009 a las 09:02
  #19 (permalink)  
Antiguo 13/07/2009, 09:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Retornemos al tema con el "XHTML 1.0 Strict", todos los estilos en la cabeza y sin errores en los códigos. Y lo que es más importante, sin la separación que tanta guerra ha dado a Astut
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3.     <head>
  4. <title>Kseso? jugando con css </title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  6. <style type="text/css">
  7. * {
  8.     margin: 0;
  9.     padding: 0;
  10.     border: 0;
  11.     outline: 0;
  12.     font-weight: inherit;
  13.     font-style: inherit;
  14.     font-size: 100%;
  15.     font-family: inherit;
  16.     vertical-align: baseline;
  17. }
  18. body {
  19.   padding: 20px;
  20.   background: #000;
  21.   }
  22. table, tr, td {
  23.   table-layout: fixed;
  24.     border-collapse: collapse;
  25.     border-spacing: 0;
  26.     background:#cdcdcd;
  27.     overflow: hidden;
  28. }
  29. table {width:60px;} /*para ie7, sin ella ocupa el 100% del body*/
  30. tr {height:20px; float: left; clear:both;}
  31. td {text-align: center;}
  32. td img {
  33.   height:20px;
  34.   width:20px;}
  35.     </head>
  36.     <body>
  37.         <table cellpadding="0">
  38.             <tr>
  39.                 <td><img src="imagen.gif" alt="" /></td>
  40.                 <td><img src="imagen.gif" alt="" /></td>
  41.                 <td><img src="imagen.gif" alt="" /></td>
  42.             </tr>
  43.             <tr>
  44.                 <td><img src="imagen.gif" alt="" /></td>
  45.                 <td><img src="imagen.gif" alt="" /></td>
  46.                 <td><img src="imagen.gif" alt="" /></td>
  47.             </tr>
  48.             <tr>
  49.                 <td><img src="imagen.gif" alt="" /></td>
  50.                 <td><img src="imagen.gif" alt="" /></td>
  51.                 <td><img src="imagen.gif" alt="" /></td>
  52.             </tr>
  53.         </table>
  54.     </body>
  55. </html>
No estoy muy seguro de lo ortodoxo que habré sido en el uso de alguna propiedad en algún elemento (especialmente el "float: left; clear:both;" de las filas), pero... es efectivo
Espero que puedas adaptarlo a tu proyecto.

Un saludo.

P.D.: la imagen es el cuadrado verde utilizado por Deirdre en el #16.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 13/07/2009 a las 12:53 Razón: añadir un detalle. Como siempre ie
  #20 (permalink)  
Antiguo 13/07/2009, 12:43
 
Fecha de Ingreso: septiembre-2005
Ubicación: Valencia
Mensajes: 738
Antigüedad: 12 años, 3 meses
Puntos: 5
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Quiero agradecer la cooperacion de todos en este mi problema, sobre todo a kseso y Zapiko que se lo han currado.

Sobre el problema, ¿Que es? ¿un fallo de firefox?, no es un problema que sea vea mucho porque supongo que no todo el mundo desarrolla un juego web donde se muestre un mapa explorable con celdas, pero bueno hay esta.

Gracias a todos por ayudar ya esta solucionado mi problema y el de futuras personas que si usan el buscador lo encontraran!

Poco a poco va quedando menos para que pueda lanzar mi juego web.

Saludos a todos!
  #21 (permalink)  
Antiguo 13/07/2009, 20:02
 
Fecha de Ingreso: julio-2007
Mensajes: 115
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Celdas de tabla a 24px imagenes a 24px no caben

Joder..(perdon por la expresion xD) no me esperaba que me agradecieses nada Astut sobre todo cuando no pude ayudarte a resolverlo y cuando estaba equivocado....pero muchas gracias, se agradece un monton ;)
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 20:50.