HTML - Necesito ayuda para agregar texto a una web HTML5 Responsive

   
Vista:

Necesito ayuda para agregar texto a una web HTML5 Responsive

Publicado por Juan juan.salinas.aedo@gmail.com (4 intervenciones) el 07/03/2016 16:04:32
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:

1
2
3
4
5
6
7
8
9
10
11
<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>&nbsp;</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:

1
2
3
4
5
6
7
8
9
10
11
12
.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!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Necesito ayuda para agregar texto a una web HTML5 Responsive

Publicado por xve (1178 intervenciones) el 07/03/2016 20:19:22
Hola Juan, la verdad es que no tengo mucha experiencia utilizando responsive con tablas, ya que desde hace tiempo apenas las utilizamos...

Pero viendo tu código, tienes puestas anchuras y alturas fijas a los <td>, los cuales no modificas en el responsive... puede ser ese el problema?
He revisado la pagina que nos comentas, pero no he sabido ver muy bien donde esta este código... En responsive lo he visto bien.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Necesito ayuda para agregar texto a una web HTML5 Responsive

Publicado por Juan (4 intervenciones) el 07/03/2016 21:45:07
Hola XVE,

La verdad es que en esa dirección se me olvido subir unos archivos, el link exacto seria:

http://desarrollo.utalca.cl/fic/html/muestra.html

Saludos y gracias!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Necesito ayuda para agregar texto a una web HTML5 Responsive

Publicado por xve (1178 intervenciones) el 07/03/2016 22:07:28
He estado mirando nuevamente la imagen, pero no veo que cargue el responsive en la pagina... en que archivo css se encuentra el código responsive?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Necesito ayuda para agregar texto a una web HTML5 Responsive

Publicado por Juan (4 intervenciones) el 07/03/2016 22:26:33
Te lo dejo en este link;

http://desarrollo.utalca.cl/fic/css/estilos.css
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Necesito ayuda para agregar texto a una web HTML5 Responsive

Publicado por xve (1178 intervenciones) el 08/03/2016 08:12:30
Hola Juan, tienes mal puesto el estilo...

Lo tienes puesto así:
1
@media.screen.and.(

y va sin puntos!!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Felix

Necesito ayuda para agregar texto a una web HTML5 Responsive

Publicado por Felix (6 intervenciones) el 08/03/2016 01:11:39
Yo veo varios problemas en tu código. Respondo comentando.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="contenedor"> <!-- el div devería estar dentro de la etiqueta header. -->
 
 <header> <!--esta etiqueta abre pero nunca cierra.-->
 
        <h1> <!-- te recomiendo que no uses esta etiqueta de esta forma, lo mejor es darle formato al texto en el .css o directamente al texto-->
 
<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>&nbsp;</td>
 
<!--al colocar &nbsp; estas obligando al td a desordenarse-->
 
    <td valign="top"><img src="imagenes/interior_04.png" width="348" height="602"/></td>
 
  </tr>
 
</table>
 
</h1>
 
</div>

Lo más recomendable es darle estilo a tu diseño desde el .css y no usarlo directamente en el código html.

Yo lo haría así:

1
2
3
4
5
6
7
8
9
10
<header>
<div class="contenedor">
<table>
  <tr>
    <td class="fondo_cuadro_imagen"><h1>hola mundo</h1></td>
    <td><img class="img2" src="imagenes/interior_04.png"/></td>
  </tr>
</table>
</div>
</header>

estilo.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.fondo_cuadro_imagen {
    background-color: transparent;
    background-image: url("../html/imagenes/interior_03.png");
    background-repeat: no-repeat;
    background-position: top;
width: 652px;
height: 602px;
}
 
table {
width: 100%;
border: 0;
cellspacing: 0;
cellpadding: 0;
}
 
td {
valign: top;
}
 
.img2 {
width: 348px;
height: 602px;
}
 
@media.screen.and.(max-width: 700px){
	.fondo_cuadro_imagen{
		background-image: url("../html/imagenes/interior_04.png");
	}

Espero te funcione.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Necesito ayuda para agregar texto a una web HTML5 Responsive

Publicado por Juan juan.salinas.aedo@gmail.com (4 intervenciones) el 09/03/2016 14:06:41
Felix, te agradezco un montón tu ayuda, estuve usando tu código y al final quedo así,

http://desarrollo.utalca.cl/fic/html/muestra.html

Sin embargo, necesito que la imagen de los botones de la derecha queden abajo del cuadro de "hola mundo", sin que se pierdan al achicar la pantalla (por ej, en un smartphone),

Alguna idea de que puedo hacer?

De nuevo, mil gracias!!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Felix

Necesito ayuda para agregar texto a una web HTML5 Responsive

Publicado por Felix (6 intervenciones) el 09/03/2016 23:31:16
Eso no lo puedes lograr con tablas. Te recomiendo el uso de capas con <div></div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Necesito ayuda para agregar texto a una web HTML5 Responsive

Publicado por DAVID (94 intervenciones) el 08/04/2016 09:55:55
Hola buenas,
has probado a usar Bootstrap? Es un framework css/Html5 con un montón de ayuda y muy fácil de manejar. Es responsive. Te quitas tener que adaptar tu los css para los distinto tipos de dispositivos

Un saludo,
David
soluciones web
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar