Foros del Web » Creando para Internet » HTML »

contenido de pagina se distorsiona al hacer zoom

Estas en el tema de contenido de pagina se distorsiona al hacer zoom en el foro de HTML en Foros del Web. hola soy nuevo en el foro ante todo felicidades por su portal web muy útil y completo. bueno hablando del asunto estoy construyendo un sitio ...
  #1 (permalink)  
Antiguo 24/11/2012, 11:36
Avatar de alfredox91  
Fecha de Ingreso: noviembre-2012
Ubicación: Venezuela-Turmero- Aragua
Mensajes: 17
Antigüedad: 11 años, 5 meses
Puntos: 0
contenido de pagina se distorsiona al hacer zoom

hola soy nuevo en el foro ante todo felicidades por su portal web muy útil y completo.

bueno hablando del asunto estoy construyendo un sitio web informativo para una comunidad como parte de un trabajo de la universidad, soy novicio en esto de diseño web apenas empece hace unas semanas y mi problema es que la pagina distorsiona el contenido segun el zoom o tamaño que tenga la ventana donde se abre.

aqui se ve con el navegador con el zoom normal mi monitor es de 19pulg con resolucion de 1280x1024

https://www.dropbox.com/s/m8z9z8drw226w5x/Nueva%20imagen.png

pero cuando la abro en el mismo monitor pero con zoom aumentado o en una pantalla mas pequeña que la mía le ocurre esto

https://www.dropbox.com/s/pvhmxz1lh8bp89t/Nueva%20imagen%20%281%29.png

este es el codigo de la pagina por si alguien lo necesita para que me pueda decir que debo añadirle para que no ocurra eso

<html><head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>consejo comunal</title>



<style type="text/css">
h3 {
font-family: Adobe Fangsong Std R;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
}

</style>
</head><body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 153);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: left; background-color: rgb(204, 0, 0);"><a href="http://www.mppeu.gob.ve/"><img style="border: 0px solid ; width: 426px; height: 93px;" alt="" src="images/LOGOMINISTERIOPUBLICO.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp;<a href="http://www.misionsucre.gov.ve/"><img style="border: 0px solid ; width: 124px; height: 103px;" alt="" src="images/MISIONSUCRE.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <a href="http://www.upta.edu.ve/moodle/"><img style="border: 0px solid ; width: 140px; height: 105px;" alt="" src="images/upt.jpg"></a><br>
</div>

<dl>

<dt style="text-align: center;"><img style="width: 991px; height: 205px;" alt="" src="images/consejo-comunal.png"><br>
</dt>
</dl>

<div style="text-align: center;">
<h1 style="font-family: Adobe Fan Heiti Std B;"><span style="color: rgb(0, 255, 255); font-size: 32px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: rgb(255, 0, 0); display: inline ! important; float: none;"></span><span style="color: rgb(204, 0, 0); font-family: Adobe Fangsong Std R;">BIENVENIDOS
AL SITIO WEB INFORMATIVO
DEL
CONSEJO COMUNAL "23 DE ENERO POLIGONAL 3 Y 4"</span></h1>
<br>
<br>
</div>

<script language="JavaScript">
mensagem = prompt("Por favor, ingresa tu nombre",'');
if (mensagem==null) {
document.write("¡Hola, visitante!")
}else{
if (mensagem=='') {
document.write("<b><font face=arial size=2 color=#000000>¡Hola, visitante!</font></b>")
}else{
document.write("<b><font face=arial size=2 color=#000000>¡Hola "+mensagem+"! Bienvenido a nuestro sitio web</font></b>");
}
}
</script>
<hr>
<hr>
<table border="1" width="700">

<tbody>
<tr>
<td bgcolor="navajowhite" width="100"><a href="INDEX.html">INICIO</a>
</td>
<td bgcolor="navajowhite" width="100"> <a href="UBICACION.html">UBICACION</a>
</td>
<td bgcolor="navajowhite" width="100"> <a href="NOSOTROS.html">NOSOTROS</a>
</td>
<td bgcolor="navajowhite" width="100">
<div style="text-align: left;"> <a href="CONTACTENOS.HTML">CONTACTENOS</a></div>
</td>
<td bgcolor="navajowhite" width="100"> <a href="IMAGENES.HTML">IMAGENES</a>
</td>
<td bgcolor="navajowhite" width="100"> <a href="ZONADEDESCARGA.HTML">ZONA DE DESCARGA</a> </td>
</tr>
</tbody>
</table>

<hr>
<hr><br>

<div style="text-align: center;">
<h3 style="font-family: Adobe Fangsong Std R;"><cite><big><big><span style="background-color: transparent; color: black;"><span class="">BIENVENIDOS</span></span></big></big></cite></h3>
&nbsp; <big style="font-family: Arial Black;">Al sitio web informativo<big>
</big>del consejo comunal 23 de enero
poligonal 3 y 4, Aquí encontrará información relevante y de utilidad;
como la
historia del barrio 23 de enero,
imagenes&nbsp; del sector, informacion demografica, ubicacion satelital</big><span style="font-family: Arial Black;">
y </span><big style="font-family: Arial Black;">descarga de archivos
utiles.</big><br>
.<big><big><br>
<br>
<br>
</big></big></div>

&nbsp;
<script language="JavaScript">
<!-- Oculto para browsers antiguos
// Este y otros JavaScripts
// en - http://www.gratisss.bizland.com

var scrtxt= "Revisa la zona de descargas"
var lentxt= scrtxt.length;
var width= 100;
var countb= 8; // Numero de veces que tintinea el flash del primer mensaje //
var count= width+lentxt;
var nmsg=1; // numero de mensajes
var message= new initArray(" Tu comunidad online");
function initArray() {
this.length= initArray.arguments.length
for (var i= 0; i < this.length; i++)
this[i+1]= initArray.arguments[i]
}
function shift() {
var outtxt= ""
var dif= count-lentxt;
if (dif>0) {
for (var i= 1; i<=dif; i++) {
outtxt= outtxt+" "}
outtxt= outtxt+scrtxt.substring(0,width-dif)
}
else {
outtxt= scrtxt.substring(-dif,lentxt)
}
document.scrform.scrtext.value= outtxt
}
function scroll() {
var n;
if ((countb>0) && (count-lentxt==0)) {count=0}
if (count-->0) {
shift();
setTimeout("scroll()",65) // 65 tiempos de display entre letras //
}
else {
if (countb-->0) {
if ((countb % 2)==0) {
document.scrform.scrtext.value= " "
setTimeout("scroll()",250) //250 tiempos de Flash para el primer mensaje//
}
else {
document.scrform.scrtext.value= scrtxt;
if (countb==1) {
setTimeout("scroll()",2000)} //2000 tiempo de retardo para que aperezca mensaje despues de flash//
else {
setTimeout("scroll()",250)} // retardo de flashing para que comienze el mensaje //
}
}
else {
now= new Date();
n= 1+Math.floor(nmsg*Math.abs(Math.sin(now.getTime()) ));
if (n>nmsg) { n= nmsg}
scrtxt= message[n];
lentxt= scrtxt.length;
count= lentxt+width+1;
setTimeout("scroll()",150) //150 tiempo de retardo para mostrar el segundo mensaje //
}
}
}
// -->
</script>
<center>
<form style="background-color: rgb(102, 102, 0);" name="scrform" onsubmit="0"> <input name="scrtext" size="60" type="text"></form>
<script> scroll();</script><br>
<br>
<br>
<div style="text-align: center; background-color: rgb(102, 102, 0);"><a title="Document made with KompoZer" href="http://kompozer.net/"><img alt="Document made with KompoZer" src="http://kompozer.sourceforge.net/images/kompozer_80x15.png" border="0"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;<a href="https://www.dropbox.com/"><img style="border: 0px solid ; width: 129px; height: 29px;" alt="" src="images/dropbox.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
mision sucre, todos los derechos reservados
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;
&nbsp;<img style="width: 81px; height: 33px;" alt="" src="images/html.jpg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
<small style="color: rgb(204, 153, 51);"><big><span style="font-family: Adobe Gothic Std B; font-style: italic;">firefox</span></big>
</small>&nbsp;&nbsp;&nbsp; <a href="http://www.mozilla.org/es-ES/firefox/new/"><img style="border: 0px solid ; width: 66px; height: 33px;" alt="" src="images/images.jpg"></a><br>
</div>
</center>

</body></html>
  #2 (permalink)  
Antiguo 24/11/2012, 14:37
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: contenido de pagina se distorsiona al hacer zoom

Pues claro que se distoriona, esta hecho en tablas.

Para que mantenga un aspecto uniforme, necesitas manejar o diseño fluido o responsive design.
  #3 (permalink)  
Antiguo 24/11/2012, 17:14
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: contenido de pagina se distorsiona al hacer zoom

En primer lugar, bienvenido a FDW @alfredox91

Si con lo de hacer zoom te referís al Ctrl+ por parte del usuario en el navegador
, ya se ha hablado bastante al respecto, y no hay una solución posible ni responsive design o layout fluido que lo resuelva.
Sin embargo si te interesa, podés experimentar algo más con esto
http://www.forosdelweb.com/f53/zoom-...3/#post4115635

Salu2
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 24/11/2012, 18:56
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: contenido de pagina se distorsiona al hacer zoom

Cita:
Iniciado por emprear Ver Mensaje
, ya se ha hablado bastante al respecto, y no hay una solución posible ni responsive design o layout fluido que lo resuelva.
¿te refieres a cubrir todos los caso?

por que si tienes responsive design en un navegador que lo soporte, definitivamente si resuelve la mala estética de una web al hacer zoom ctrl +.
  #5 (permalink)  
Antiguo 24/11/2012, 19:22
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: contenido de pagina se distorsiona al hacer zoom

Si, todos los casos (ó la mayor cantidad posibles). esa es la idea del "responsive design"

Si conocés algún ejemplo en que se corrija el zoom del navegador, sería muy interesante verlo

Salu2
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 24/11/2012, 20:01
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: contenido de pagina se distorsiona al hacer zoom

Cita:
Iniciado por emprear Ver Mensaje
Si, todos los casos (ó la mayor cantidad posibles). esa es la idea del "responsive design"

Si conocés algún ejemplo en que se corrija el zoom del navegador, sería muy interesante verlo

Salu2
¿Corregir el zoom del navegador?

No se si hablamos de algo distinto

Hay muchos ejemplos en que se corrije el aspecto de una web con zoom, no el zoom en sí. (No se que tenga de malo el zoom para corregirlo )

De todos modos la idea, es minimizar el efecto sobre la estética de la web que produce el zoom en una web.

Eso se puede hacer con un maquetado fluido, o con responsive design, si el diseño lo permite.
  #7 (permalink)  
Antiguo 24/11/2012, 20:37
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: contenido de pagina se distorsiona al hacer zoom

según dice el usuario
Cita:
el zoom o tamaño que tenga la ventana donde se abre.
(ver las imágenes que pone de muestra)
zoom y tamaño de pantalla son 2 cosas completamente diferentes, yo me refiero específicamente al primero, y no es controlable hasta dónde sé (además de las consideraciones hechas en el post que cite, hacia el final)

Salu2
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 24/11/2012, 20:54
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: contenido de pagina se distorsiona al hacer zoom

Que curioso, yo me refiero al segundo. Tamaño de pantalla.

De todos modos, considero que no hay que controlar el zoom, si no el aspecto de la web al hacer zoom.

Saludos.
  #9 (permalink)  
Antiguo 24/11/2012, 21:58
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: contenido de pagina se distorsiona al hacer zoom

Justamente, si comparás las imágenes se nota que es lo primero, le está dando a Ctrl+, eso solo puede ser controlado, y parcialmente, con javascript.
Firefox permite hasta un 800 %
IE 9 hasta 1000%
Chrome hasta 500%

Además cada navegador usa un método distinto, FF e IE por ejemplo, bajan la resolución de pantalla (480px y 144px de ancho para el zoom máximo) mientras Chrome mantiene el tamaño siempre en al ancho de la resolución gráfica del sistema)

claro que hay que manejar el aspecto de la web, pero para eso deberías saber como cada diferente nivel de zoom afecta ese aspecto.

Salu2
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 25/11/2012, 00:15
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: contenido de pagina se distorsiona al hacer zoom

A eso me refiero.

Pienso que se refiere a ajuste de resolucion de pantalla. En el caso de firefox e IE9 como mencionas baja la resolución, por eso es como ver la web en otra pantalla, pero en chrome y Safari funciona distinto.

No es muy común que alguien haga zoom a una web esto lo solemos hacer los webmasters para probar como se vería en resoluciones menores. Se me hace difícil pensar que alguien lo haga muy a menudo siendo solo un internauta.

De todos modos muy bueno tu ejemplo con javascript, pero dudo que el que preguntó en este tema entienda el punto.
  #11 (permalink)  
Antiguo 25/11/2012, 06:46
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: contenido de pagina se distorsiona al hacer zoom

Cita:
Iniciado por memoadian Ver Mensaje
pero dudo que el que preguntó en este tema entienda el punto.
Eso es lo bueno del debate en este foro , siempre se encuentran coincidencias

Salu2
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #12 (permalink)  
Antiguo 25/11/2012, 09:12
Avatar de alfredox91  
Fecha de Ingreso: noviembre-2012
Ubicación: Venezuela-Turmero- Aragua
Mensajes: 17
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: contenido de pagina se distorsiona al hacer zoom

hola que tal, gracias por sus respuestas, bueno en general tienen razón el zoom es algo que poco se vera que haga el usuario o usuaria que visite el sitio, la iniciativa de mi pregunta era por curiosidad o conocimiento mas que todo por saber porque ocurre esa distorsión en mi sitio y a otros como por ejemplo este mismo foro uno le aplica zoom y todo se mantienen en su lugar. abrí la pagina principal o el index en una mini laptop de 10 pulgadas y apenas si se distorsiona solo tengo que aplicar un zoom - y listo, pero es por esto mismo que me daba un poco de joda (perdón por la palabra) ya que no es algo muy digamos funcional que un usuario que entre al portal desde un dispositivo con pantalla pequeña tenga que aplicar zoom ya sea + o - para navegar bien en ella.

Etiquetas: contenido, css, input, zoom, formulario
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 11:46.