Hola a todos,
Desde hace un tiempo he querido hacer una plantilla para una web HTML5 responsive, con el fin de adaptarse al tamaño de pantalla de diferentes dispositivos, sin embargo he tenido problemas, ya que he querido colocar una tabla con un fondo de imagen, y dentro de el, texto, tal como se muestra en el código:
<div class="contenedor">
<header>
<h1>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="652px" height="602px" class="fondo_cuadro_imagen"><p class="texto">hola mundo</p> </td>
<td valign="top"><img src="imagenes/interior_04.png" width="348" height="602"/></td>
</tr>
</table>
</h1>
</div>
Y las fuentes css de la clase "fondo_cuadro_imagen" serian:
.fondo_cuadro_imagen {
background-color: transparent;
background-image: url("../html/imagenes/interior_03.png");
background-repeat: no-repeat;
background-position: top;
}
@media.screen.and.(max-width: 700px){
.fondo_cuadro_imagen{
background-image: url("../html/imagenes/interior_04.png");
}
El problema esta en que la frase "hola mundo", o cualquier texto en sí, hace que la tabla se mueva y la pagina queda desorganizada, perdiéndose la forma,
¿Que puedo hacer?, La dirección donde estoy subiendo los cambios de dicha web es: http://desarrollo.utalca.cl/fic/
Muchas gracias por la ayuda!!