Problema con fondos de celdas

Buenas tardes de nuevo.
Estoy haciendo una web y en alguna de sus páginas llevan fotos de fondo en algunas celdas. Yo hago la imagen del fondo con los mismos pixeles tanto de ancho como de alto que tiene la celda, para que así solo se vea una imagen. Pues aun así hay algunas celdas que al visualizarlas es como si se estirasen y la imagen vuelve a aparecer por la parte de abajo. Como si se quedase corta y el frontpage la duplicara para que no se quede espacio en blanco, pero ya te digo que la imagen es exactamente igual que la celda. Te envío una fotografía para que veas a lo que me refiero. Sobre todo pasa con mozilla, pero en explorer algunas veces también.
http://a.imageshack.us/img822/8785/fallo.gif
Gracias y un saludo

1 respuesta

Respuesta
1
Este problema lo vas a tener en muchas ocasiones cuando utilices imágenes como fondo de página, de tablas o de celdas. Aunque definas el tamaño de celda, FrontPage no lo respeta si necesita más espacio. Por ejemplo si introduces más líneas de texto de las que entran en el tamaño definido, FrontPage no respeta el tamaño de la celda y lo aumenta para que quepa todo el texto. Al aumentarlo, replica la imagen de fondo para rellenar toda la celda. Pero incluso esto depende del navegador del visitante de la web: tu defines un tamaño de celda y un tamaño para el texto que introduces en la misma, pero si el visitante ha definido en su explorador un tamaño de visualización de texto mayor, ocurrirá lo mismo.
La solución que te voy a proponer tal vez sea un poco chapuza, pero funciona, y consiste en modificar la imagen original. Por lo que veo, la imagen tiene un color de fondo uniforme, lo que tienes que hacer es aumentar el tamaño del fondo de la imagen. El motivo central, osea los pájaros, los mantienes al mismo tamaño, pero el fondo de la imagen lo aumentas de modo que el tamaño total de la imagen sea bastante superior al de la celda, y así evitas que FrontPage replique la imagen. Tendrás que hacer pruebas para ubicar el motivo central en la zona de la imagen que te interese para que aparezca centrado en la celda.
Esta solución requiere algo de retoque de la imagen, y tal vez sea un poco rupestre, pero con paciencia al final conseguirás el efecto deseado.
¿Pero al hacer lo que me dices no se va a quedar la imagen cortada? ¿Lo digo por que si no reduzco los pájaros al visualizarla la imagen empieza desde la esquina superior izquierda y si es más grande la imagen que la celda no saldrá entera no?
Un saludo
Se trata de mantener el tamaño de los pájaros pero aumentar el fondo de la imagen. Supongamos que tu imagen es de 10x10 cm, y los pájaros ocupan 9x9 cm. Deberás transformar la imagen para que los pájaros sigan siendo de 9x9 y ubicados en el ángulo superior izquierdo, pero el tamaño total sea, por ejemplo de 12x12 cm.
Como es difícil verlo solo con texto escrito, te pongo un vínculo a un documento que te he hecho con un ejemplo de como quedaría la imagen:
http://www.teoweb.es/pruebas/Imagenes.pdf
Es buena idea. El problema es que algunas imágenes van partidas por que son varias celdas. A ver como lo puedo arreglar.
¿Por qué en mozilla las galería de imágenes de frontpage se estiran?
Un saludo
Ten en cuenta que Frontpage es una aplicación de Microsoft y por tanto el resultado de cualquier diseño que hagas con FrontPage está pensado para que se ajuste a las especificaciones de Internet Explorer de Microsoft. El resultado en otros navegadores no siempre va a ser el mismo, pero este problema lo vas a tener con cualquier aplicación de diseño web.
Internet Explorer sigue siendo el navegador más usado pero lo cierto es que Mozilla se le va acercando cada vez más.
La única solución que tienes es no utilizar elementos de diseño que den distintos resultados dependiendo del navegador utilizado por tus visitantes. Otra posibilidad, si dispones de estadísticas de tus visitantes, es ver qué porcentaje de ellos utilizan un navegador u otro y en función de ello decidir si diseñas para todos tus visitantes o das preferencia a la mayoría.
Siento no darte mejores soluciones en este sentido, pero dudo que nadie pueda hacerlo, o en todo caso las posibles soluciones pasarían por la utilización de otro tipo de programación web, como por ejemplo utilizar flash y otros complementos (muy de moda en este momento), pero esto desde mi punto de vista complica el diseño e incluso puede hacer la navegación más incómoda a tus visitantes ya que en muchos casos tendrían que instalar complementos (plugins) en sus navegadores.
Yo soy partidario de la sencillez aunque el resultado final sea un poco más pobre, pero esto además de facilitar el diseño, yo creo que también facilita la navegación, cosa que te agradecerán los visitantes de tu web.
Buenos días.
Buena aclaración y buena explicación. Estoy cambiando las imágenes como me has dicho y haciendo pruebas a ver como queda. Creo que utilizare tablas que es más fácil. Pero tengo una duda. ¿Cómo puedo hacer una linea de separación entre dos columnas de una tabla sin que se vean las demás? Te mando una foto para que veas lo que te digo.
Gracias y un saludo
http://a.imageshack.us/img715/7971/pruebaq.gif
Te indico los pasos a seguir:
- Selecciona la columna en la que quieres establecer el borde.
- Botón derecho sobre la columna seleccionada > propiedades de celda.
- En la ventana que se abre clic en el botón "Estilo" > En la ventana "Modificar estilo" clic en botón "Formato" y elige la opción "Borde..."
- En la ventana Bordes y sombreado puedes definir los bordes uno a uno para el área seleccionada en la tabla.
A veces (no se por qué) las características así definidas no se reflejan correctamente en el resultado final. Si es así también puedes hacerlo a mano modificando el código. Te muestro a continuación el código de una celda para la que se han definido un borde en el lado derecho:
<td style="border-left-width: 0px; border-right-style: solid; border-right-color: #FF0000; border-right-width: 5px; border-top-width: 0px; border-bottom-width: 0px"> </td>
Otra posibilidad es insertar una columna entre las dos que quieres separar. En esta columna insertada combinas las celdas, defines un ancho de columna de 1pixel e insertas una imagen que sea una línea vertical.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas