Foros del Web » Creando para Internet » HTML »

Separación entre celdas con fondo de imagen

Estas en el tema de Separación entre celdas con fondo de imagen en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/09/2008, 13:10
 
Fecha de Ingreso: septiembre-2008
Mensajes: 2
Antigüedad: 9 años, 2 meses
Puntos: 0
Pregunta Separación entre celdas con fondo de imagen

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
  #2 (permalink)  
Antiguo 25/09/2008, 13:56
Avatar de estuardoeg  
Fecha de Ingreso: septiembre-2008
Ubicación: Guatemala
Mensajes: 23
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Separación entre celdas con fondo de imagen

iniciemos por algo.... y si utilizas mejor divs? would be cool!
  #3 (permalink)  
Antiguo 27/09/2008, 09:36
 
Fecha de Ingreso: septiembre-2008
Mensajes: 2
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Separación entre celdas con fondo de imagen

Cita:
Iniciado por estuardoeg Ver Mensaje
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
  #4 (permalink)  
Antiguo 27/09/2008, 14:42
Avatar de estuardoeg  
Fecha de Ingreso: septiembre-2008
Ubicación: Guatemala
Mensajes: 23
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Separación entre celdas con fondo de imagen

Ok,

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

Exitos!
  #5 (permalink)  
Antiguo 27/09/2008, 19:55
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Separación entre celdas con fondo de imagen

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> 
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 22:58.