Fondo como Borde de Foto

tepitenio · #1 (**permalink**) 08/04/2010, 10:17

Tengo un problema que me sorprende no haber encontrado la solución. Seguramente le estoy pifiando en lo que estoy "googleando".

El tema es que tengo una tabla con fotos en las TD. Quiero hacer un borde a todas las fotos, para lo cual cree un PNG 15px mas grande de todos lados y lo pongo como background de cada TD.

Centro el fondo y centro el contenido de la TD, pero no me quedan PERFECTAMENTE centrados.

Debería ser un tema simple? O es sabido que es complicado?

Les dejo los códigos por las dudas:

<td a="" align="center" alt="City" border="0" height="200" href="tounew.html" img="" src="images/m-pic-1.png" style="background-image: url(images/fondofotomenu.png); background-repeat: no-repeat; background-position: center center; height:215px" valign="center" width="250">

La foto es de 250x250 y el fondo 265x215

PD: Ya se que siempre es mejor trabajar con CSS separado pero mi jefe me pidió así por problemas con el ftp.

tempto · #2 (**permalink**) 08/04/2010, 11:54

El borde de la foto es simple? porque si es así, puedes utilizar la propiedad border de css, los tiene sólido, punteado, línea discontínua...

Si el borde es más elaborado, inserta un div en la celda, dale de background la imagen con el borde y añade dentro del div la imagen sin el borde centrada

Salu2

Calizman · #3 (**permalink**) 08/04/2010, 11:55

Saludos!!

Primero: Cúal es el navegador con el que tienes el problema?
Segundo: No tienes una URL donde podámos ver el problema mas "realmente"?
Tercero: Intenta cambiar esto:

Código HTML:

Ver originalstyle="background-image: url(images/fondofotomenu.png); background-repeat: no-repeat; background-position: center center; height:215px"

por esto:

Código HTML:

Ver originalstyle="background: url(images/fondofotomenu.png) no-repeat center center; height: 215px;"

Y a ver que tal va.

Hasta Luego!

KaozC9 · #4 (**permalink**) 08/04/2010, 11:56

No te daré la solucion en codigo debido a que iré a almorzar en estos momentos, pero mira, haces que los TD se comporten como bloques, y que el fondo del TD sea el de la imagen, luego la imagen en posicion absoluta la centras.

aclaro que el TD tiene que tener tamaño del fondo.

otra cosa es que puedes trabajar el css por separado sin necesidad de subir otro archivo,

Código HTML:

Ver original<html>
<head>
<style type="text/css">
/* Aqui va el codigo CSS */
 
</style>
</head>
 
<body>
<!-- Aqui va todo tu code -->
</body>
</html>

tepitenio · #5 (**permalink**) 11/04/2010, 05:49

Tempto: Probé los DIVs pero no fueron.

Calizman: Los navegadores que uso: Firefox, Opera, Chrome (Todavía no testeado en Explorer ni Safari). El sitio está en desarrollo y no se puede ver publicamente.

Kaoz: No puedo agrupar los estilos ni siquiera en la página, pues me piden que trabaje con un CMS que es medio raro y no me deja entrar sino al BODY.

De todas maneras mi jefe se rindió y me dijo que lo deje así. Si se vuelve a poner quisquilloso pego el grito de vuelta.

Gracias a todos por ayudar!