Separación entre celdas con fondo de imagen

marolafm · #1 (**permalink**) 25/09/2008, 12:10

Como pueden ver, soy nuevo en el foro; y para no empezar mal, aqui les dejo un problema que a alguno les ha causado más de un dolor de cabeza (a mi el primero).

El problema es el siguiente:

Tengo una tabla con los bordes con una imagen de fondo aplicada mediante un css; y en las esquinas una imagen pequeña, aplicada directamente desde la tabla.
Las imágenes a lo vertical, se ajustan perfectamente, pero en la horizontal se queda un espacio que es el fondo.

Si alguien puede solucionarlo le estaría muy agradecido.

La página la pueden visitar aquí: http://luiggy.es/prueba.html

Si quieren el código, aqui está:

Código:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>..:: La web de Luiggy ::..</title>
<style type="text/css">
<!--

body {
	background-color: #000000;
}

/* ESTILO BORDE TABLA */

/* ..:: Lados ::.. */
 
/* top */
.top{
background-image:url(imagenes/tabla/top.gif);
background-repeat: repeat-x;
background-position: center;
}

/* down */
.down{
background-image:url(imagenes/tabla/down.gif);
background-repeat: repeat-x;
background-position: center;
}

/* Imagen lateral izq */
.lateral_izq{
background-image:url(imagenes/tabla/left.gif);
background-repeat:repeat-y;
background-position:center;
}

/* Imagen lateral der */
.lateral_der{
background-image:url(imagenes/tabla/right.gif);
background-repeat:repeat-y;
background-position:center;
}

/* Este es de texto */
.texto{
background-color:#ffffff;
}

-->
</style></head>
<body>
<table width="690" height="138" border="none" align="center" cellspacing="0" cellpadding="0">
  <tr>
    <td width="12" height="18"><img src="imagenes/tabla/top-left.gif" width="12" height="12" /></td>
    <td width="666" class="top">&nbsp;</td>
    <td width="12"><img src="imagenes/tabla/top-right.gif" width="12" height="12" /></td>
  </tr>
  <tr>
    <td height="102" class="lateral_izq">&nbsp;</td>
    <td class="texto">&nbsp;</td>
    <td class="lateral_der">&nbsp;</td>
  </tr>
  
  <tr>
    <td><img src="imagenes/tabla/down-left.gif" width="12" height="12" /></td>
    <td class="down">&nbsp;</td>
    <td><img src="imagenes/tabla/down-right.gif" width="12" height="12" /></td>
  </tr>
</table>

</body>
</html>

Saludos!
Espero sus respuestas

estuardoeg · #2 (**permalink**) 25/09/2008, 12:56

iniciemos por algo.... y si utilizas mejor divs? would be cool!

marolafm · #3 (**permalink**) 27/09/2008, 08:36

Cita:

Iniciado por estuardoeg

iniciemos por algo.... y si utilizas mejor divs? would be cool!

Podrias poner un ejemplo, ya que estoy empezando en esto y no me entero mucho.

Saludos

estuardoeg · #4 (**permalink**) 27/09/2008, 13:42

Ok,

checa http://webstudio.com.gt/marolafm/ alli te puse una versión de lo que reguieres!

Exitos!

ssclamp · #5 (**permalink**) 27/09/2008, 18:55

La solución de estuardoeg es la mejor, pero, por si por algún motivo necesitas seguir maquetando con tablas te dejo tu código arreglado (tenías desajustados algunos tamaños y es necesario añadir una clase de mínimo tamaño a las celdas que hacen el marco, además las imágenes que componen el marco es mejor que las coloques como fondos de celda).

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>..:: La web de Luiggy ::..</title>
<style>
.mini {
	font-size: 1px;
}
</style>

</head>
<body bgcolor="#000000">
<div align="center">
<table width="690" height="126" border="0" cellpadding="0" style="border-collapse: collapse">
  <tr>
    <td width="12" height="12" background="top-left.gif" class="mini">&nbsp;</td>
    <td width="666" height="12" background="top.gif" class="mini">&nbsp;</td>
    <td width="12" background="top-righ.gif" height="12" class="mini">&nbsp;</td>
  </tr>
  <tr>
    <td height="102" width="12" background="left.gif" class="mini">&nbsp;</td>
    <td height="102" class="texto" bgcolor="#FFFFFF">&nbsp;</td>
    <td background="right.gif" width="12" class="mini">&nbsp;</td>
  </tr>
  <tr>
    <td background="down-lef.gif" width="12" height="12" class="mini">&nbsp;</td>
    <td height="12" background="down.gif" class="mini">&nbsp;</td>
    <td background="down-rig.gif" width="12" height="12" class="mini">&nbsp;</td>
  </tr>
</table>

</div>

</body>
</html>