Foros del Web » Creando para Internet » HTML »

Como dar un margen negativo de una tabla html?

 Estas en el tema de Como dar un margen negativo de una tabla html? en el foro de HTML en Foros del Web. Hola, tengo una tabla html con una imagen de fondo la cual esa imagen tiene un resplandor, la cuestion es que ese resplandor cuenta como ...
  #1 (permalink)  
Antiguo 05/06/2012, 16:12
 
Fecha de Ingreso: diciembre-2010
Mensajes: 237
Antigüedad: 13 años, 4 meses
Puntos: 2
Como dar un margen negativo de una tabla html?
Hola, tengo una tabla html con una imagen de fondo la cual esa imagen tiene un resplandor, la cuestion es que ese resplandor cuenta como imagen por lo tanto hace que la imagen se vea mas adentro de la linea de la tabla, para ser mas concreto queria saber como dar un margen negativo para que la tabla empiece antes y termine despues, aca les dejo una imagen para que entiendan mejor:




Se agradece, saludos.
  #2 (permalink)  
Antiguo 05/06/2012, 21:48
Avatar de maycolalvarez
Colaborador
  
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: Como dar un margen negativo de una tabla html?
Sinceramente no entendí un pepino, explíquese mejor o reporte el tema para que lo muevan al foro de CSS, creo que es el indicado
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 05/06/2012, 22:58
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Como dar un margen negativo de una tabla html?
Cita:
Iniciado por maycolalvarez Ver Mensaje
Sinceramente no entendí un pepino, explíquese mejor o reporte el tema para que lo muevan al foro de CSS, creo que es el indicado
@maycolalvarez, creo que yo entendí 1/2 pepino, asi que vamos a probar

@iorio
si una imágen esta como fondo de algo y el tamaño de esa imagen se ajusta exactamente al tamaño del elemento al cual se le aplica, cualquier modificación que pueda hacerse se consigue con CSS a través de alguna de las siguientes propiedades

background-size
y
background-position

La gente de W3Schools tiene diseñadas un par de interesantes herramientas para que las consultes, juegues con ellas y saques tus conclusiones

http://www.w3schools.com/cssref/play...ackground-size
http://www.w3schools.com/cssref/play...round-position

Espero eso te oriente un poco

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 06/06/2012, 10:42
 
Fecha de Ingreso: diciembre-2010
Mensajes: 237
Antigüedad: 13 años, 4 meses
Puntos: 2
Respuesta: Como dar un margen negativo de una tabla html?
Gracias a ambos, esta buena esa herramienta :D

Bueno, sabia que no se iva a entender, yo lo que queria es que la imagen sobre salga de la tabla, como dicen ustedes se debe solucionar con un css, pero cambie de opinion, ya no quiero lograr ese efecto, ahora lo que quiero es poner una imagen de fondo a esa tabla, yo tengo varios codigos para imagenes de fondo en una tabla, incluso esta tabla esta hecha con imagenes de fondo, pero no entiendo el porque al tener imagenes de fondo en cada celda no me responde al querer poner una imagen de fondo a toda la tabla, aca le paso el codigo asi entienden mejor:

Código: 
<li>
<table cellspacing="10" border="0" style="width:100%">
<tr>
<td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" WIDTH="333" valign="center">
&nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
</td>
<td align="right" style="background-repeat: no-repeat; background-position: 100%;" background="http://d2hforum.com/images/lmi2.png" height="37" WIDTH="333" valign="r">
<a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" WIDTH="333" valign="center">
&nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
</td>
<td align="right" style="background-repeat: no-repeat; background-position: 100%;" background="http://d2hforum.com/images/lmi2.png" height="37" WIDTH="333" valign="center">
<a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" WIDTH="333" valign="center">
&nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
</td>
<td align="right" style="background-repeat: no-repeat; background-position: 100%;" background="http://d2hforum.com/images/lmi2.png" height="37" WIDTH="333" valign="center">
<a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" WIDTH="333" valign="center">
&nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
</td>
<td align="right" style="background-repeat: no-repeat; background-position: 100%;" background="http://d2hforum.com/images/lmi2.png" height="37" WIDTH="333" valign="center">
<a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
</table>
</li>
Se veria asi:

http://d2hforum.com/tabla.php

a esta tabla quiero ponerle una imagen de fondo, en si lo que quiero hacer con la imagen de fondo es un borde que va desapareciendo hacia el medio, una solucion podria ser poner el dibujo de las celdas que desaparecen en la imagen de fondo general del foro, pero es a lo ultimo que quiero llegar, me gustaria dejar el fondo del foro intacto, no se ustedes mandan, asi se veria la imagen final:



En esta imagen no es que lo haya logrado sino que lo hice con photoshop para mostrarles a ustedes.
Última edición por iorio; 06/06/2012 a las 11:10
  #5 (permalink)  
Antiguo 06/06/2012, 13:14
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Como dar un margen negativo de una tabla html?
Si es por tu explicación, ahora entiendo 1/4 apenas, ahora , después de ver el link que pasaste y lo que hay en http://d2hforum.com/

Se me ocurre que a lo mejor lo que querés hacer es esto
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. </head>
  8. <body>
  9. <table style="width:100%;background-image: url(http://d2hforum.com/d2hforum.png);">
  10. <tbody><tr>
  11. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  12. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  13. </td>
  14. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="r" width="333">
  15. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  16. </td>
  17. </tr>
  18. <tr>
  19. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  20. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  21. </td>
  22. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  23. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  24. </td>
  25. </tr>
  26. <tr>
  27. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  28. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  29. </td>
  30. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  31. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  32. </td>
  33. </tr>
  34. <tr>
  35. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  36. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  37. </td>
  38. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  39. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  40. </td>
  41. </tr>
  42. <tr>
  43. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  44. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  45. </td>
  46. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  47. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  48. </td>
  49. </tr>
  50. <tr>
  51. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  52. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  53. </td>
  54. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  55. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  56. </td>
  57. </tr>
  58. <tr>
  59. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  60. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  61. </td>
  62. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  63. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  64. </td>
  65. </tr>
  66. <tr>
  67. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  68. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  69. </td>
  70. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  71. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  72. </td>
  73. </tr>
  74. <tr>
  75. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  76. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  77. </td>
  78. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  79. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  80. </td>
  81. </tr>
  82. <tr>
  83. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  84. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  85. </td>
  86. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  87. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  88. </td>
  89. </tr>
  90. <tr>
  91. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  92. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  93. </td>
  94. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  95. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  96. </td>
  97. </tr>
  98. <tr>
  99. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  100. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  101. </td>
  102. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  103. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  104. </td>
  105. </tr>
  106. <tr>
  107. <td style="background-repeat: no-repeat; background-position: 0% 0%;" background="http://d2hforum.com/images/lmi.png" height="37" valign="center" width="333">
  108. &nbsp;&nbsp;&nbsp; <a href="http://d2hforum.com">Test 1</a>
  109. </td>
  110. <td style="background-repeat: no-repeat; background-position: 100%;" align="right" background="http://d2hforum.com/images/lmi2.png" height="37" valign="center" width="333">
  111. <a href="http://d2hforum.com">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
  112. </td>
  113. </tr>
  114. </tbody></table>
  115. </body>
  116. </html>

Advertencia, usé tu código tal cual esta, funciona pero tiene algunos errores.
Para el atributo valign no existe el valor center, será middle en todo caso.
estás usando el atributo background para las imágenes de fondo, deberías hacerlo todo en el style
style="background-image: url(http://d2hforum.com/images/lmi2.png);background-repeat: no-repeat; background-position: 0 0;"
como yo lo hice para<table>
Tu <tbody> es innecsario, solo se usa si se lo asocias a un thead y un tfoot, podés tambien simplificar todo tu código, dándole clases a las celdas y poner todo en un css, incluso vertical-align, text-align, y demás.

Te recomiendo que comiences con los manuales, por ejemplo
http://librosweb.es

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 06/06/2012, 17:27
 
Fecha de Ingreso: diciembre-2010
Mensajes: 237
Antigüedad: 13 años, 4 meses
Puntos: 2
Respuesta: Como dar un margen negativo de una tabla html?
Bueno, ahora leere todo eso, de todos modos en http://d2hforum.com/ solo hay un index,
si queres ver mejor entra a http://d2hforum.com/forum.php ahi es donde estoy luchando con todo esto,
voy a intentar todo eso que me explicas y luego comento como me fue, demasiado complicado para entender siendo que no tengo mucha experiencia, yo generalmente aprendo o mal aprendo practicando, copiando, editando, jugando, siempre trato de ir a lo puntual para safar y cumplir con mi trabajo, creo que hay tanto por estudiar o tanto por saber que me llevaria años poder tener una pequeña nocion, vere que sale, gracias, ahi probe tu codigo, me repite lo mismo muchas veces y veo que pusiste de fondo el index, ese index solo lo puse para que no se acceda directamente al foro ya que habia pasado el link y luego decidi hacer algunas modificaciones.

Estube leyendo un poco superficial en http://librosweb.es esta muy bueno, luego de terminar el foro voy a leerlo todo detenidamente y revisare en otras paginas, ultimamente me estan dando ganas de estudiar, hasta ahora no lo hice por que siempre pienso que es tarde o como te dije quizas lleve mucho tiempo para poder aprender, ahora solo busco soluciones rapidas para terminar el estilo del foro como me habia comprometido a hacerlo, esto no es para mi sino para unos amigos, quiero desligarme de esto lo mas pronto posible, no tener mas compromiso con nadie y ponerme a leer y practicar tomando unos mates, tranquilo.
Última edición por iorio; 06/06/2012 a las 20:30
  #7 (permalink)  
Antiguo 06/06/2012, 23:19
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Como dar un margen negativo de una tabla html?
y si son muchos detalles y una cosa lleva a la otra, viendo tu tabla y los fondos de las celdas, y diciendo que a su vez la tabla tenía también un fondo imagine que la idea era poner la transparencias de las celdas sobre el fondo de la tabla, vi el resultado y el efecto no queda mal

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: margen, negativo, tabla
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:00.