Foros del Web » Creando para Internet » HTML »

HTML funciona morbosamente horrible dependiendo del área del explorador

Estas en el tema de HTML funciona morbosamente horrible dependiendo del área del explorador en el foro de HTML en Foros del Web. Saludos. Reiteradas veces solucioné dudas gracias a esta página y hoy me decidí a postear un problema que me está sacando canas verdes. Aclaro que ...
  #1 (permalink)  
Antiguo 06/10/2010, 17:58
 
Fecha de Ingreso: octubre-2010
Ubicación: Dentro de un caleidoscopio
Mensajes: 3
Antigüedad: 13 años, 5 meses
Puntos: 0
Exclamación HTML funciona morbosamente horrible dependiendo del área del explorador

Saludos.
Reiteradas veces solucioné dudas gracias a esta página y hoy me decidí a postear un problema que me está sacando canas verdes.
Aclaro que soy el típico principiante que va aprendiendo sobre la marcha e improvisando a base de lo que lee en Internet xD!

Estoy armando una página de inicio bien simple (nada del otro mundo) en base a un foro que tengo en un conocido hoster de foros; usando un fondo, imágenes y un bloque de texto con scroll. Todo esto dentro de un DIV de 800x600px centrado tanto horizontal como verticalmente para que más allá de la resolución de la pantalla que utilice el usuario, la página home siempre se visualice en el centro exacto del monitor.

Adjunto el código y a continuación el problema:
(Pego el código tal cual; espero no estar haciendo spam, y si lo hago me disculpo)
Código:
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-strict.dtd">

<html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<html>
<head>
<style>
div {
position: absolute;
left: 50%;
top: 50%;
width: 800px;
height: 600px;
margin-top: -300px;
margin-left: -400px;
overflow: auto;
border: 0;
}
</style>
</head>

<body>
<body bgcolor="#000000">

<body background="http://i21.servimg.com/u/f21/13/71/79/66/intro10.png" style="background-repeat:no-repeat; background-position:center; background-attachment:fixed">

<div id="contenedor">

<a href="http://www.facebook.com/make.inu.akito" target="_blank">
<IMG STYLE="position:absolute; TOP:10px; LEFT:10px; WIDTH:155px; HEIGHT:165; border:0px" SRC="http://i21.servimg.com/u/f21/13/71/79/66/logo13.png"></a>

<a href="http://www.facebook.com/make.inu.akito" target="_blank">
<IMG STYLE="position:absolute; TOP:206px; LEFT:10px; WIDTH:155px; HEIGHT:133; border:0px" SRC="http://i21.servimg.com/u/f21/13/71/79/66/lema10.png"></a>

<div style=
"scrollbar-face-color: 000000; 
scrollbar-highlight-color: 000000; 
scrollbar-3dlight-color: ffffff; 
scrollbar-darkshadow-color: ffffff; 
scrollbar-shadow-color: 000000; 
scrollbar-arrow-color: ffffff; 
scrollbar-track-color: 000000;

color : #ffffff;
top: 310px;
left: 575px;
width : 405px;
height : 330px;
overflow : auto; ">

<font face="arial">

<b>Nippon Comodoro</b>, <i>enecé</i> según sus siglas, nació en Marzo del año 2009 con la premisa de unificar a todas las personas de Comodoro Rivadavia teniendo como punto en común el gusto por la cultura audiovisual japonesa, sin que esto tenga que pasar por el nivel de fanatismo sino por el de interés y curiosidad. Es decir que se trata de englobar tanto a la persona que se define a si misma como ‘otaku’ como a la que apenas vio animé pero posee cierta atracción hacia el género y está dispuesta a conocer más sobre el tema.
<br>
<br>
<b>La comunidad NC</b> se compone de una parte virtual; constituida por nuestra página web y la presencia en las redes sociales, y una parte real; cuya piedra angular siempre han sido las reuniones semanales primero llevadas a cabo en una plaza céntrica de Comodoro Rivadavia y actualmente tomando lugar en las inmediaciones del Salón Pietrobelli de la Cámara de Comercio gracias al apoyo de la Agencia Comodoro Cultura.
<br>
<br>
<b>Nuestro lento pero firme progreso</b> mediante la atención obtenida por parte de varios medios de comunicación local, la conformación de un staff estructurado y la consecución de auspiciantes; dio lugar a que en la segunda mitad del año 2010 comencemos la expansión oficial hacia Caleta Olivia y Sarmiento a través de reuniones mensuales programadas para cada localidad.
<br>
<br>
<b>NC vio la luz a partir de tres premisas básicas:</b>
<br>
<font color="yellow">• Reunir a la gente</font> - El punto que más se ha desarrollado hasta ahora siendo que después de año y medio de vida contamos con más de cuatrocientas personas en la comunidad y casi un centenar de reuniones en nuestro haber. Desde un punto de vista idealista la congregación de personas con gustos afines promueve y explota dichos gustos creando un ámbito social ameno el cual se presta para conocer gente y entablar relaciones de amistad, mientras que visto desde un enfoque utilitario crea una aglomeración con un denominador común que puede tomar parte en eventos y convenciones ya sea como público o como organización.
<br>
<font color="yellow">• Promover cultura y remover prejuicios</font> - Comenzando a colocar stands informativos en diversos eventos y buscando cobertura de los medios, NC entra en juego creando una interfaz abierta al público por la cual se trata de explicar de forma concreta la basta extensión que llega a tener la cultura alrededor de la animación japonesa; queriendo así corregir prejuicios y estereotipos desinformados establecidos con prisa en torno al animé y sus seguidores, al menos a nivel local.
<br>
<font color="yellow">• Organizar eventos</font> - Consigna que se nutre de las anteriores dos y que recién empezará a tomar forma a partir del año que viene. Por el momento no se puede divulgar información sobre esto.
<br>
<br>
<b>Breve cronología de NC:</b>
<br>
<font color="yellow">Marzo 2009:</font> Nacimiento de Nippon Comodoro, por entonces llamado <i>[NCR]</i>.
<br>
<font color="yellow">Abril 2009:</font> Primera reunión en la Plaza San Martín, Comodoro Rivadavia.
<br>
<font color="yellow">Mayo 2009:</font> Hamburgueseada, primera reunión medianamente elaborada.
<br>
<font color="yellow">Diciembre 2009:</font> <i>[NCR] Festival Animé</i> en <i>El Sótano</i> Multieventos.
<br>
Cancelación de <i>La Plaza</i> por casi dos meses.
<br>
<font color="yellow">Enero 2010:</font> Vuelta de la <i>La Plaza</i>.
<br>
<font color="yellow">Marzo 2010:</font> Aparición en programa de televisión <i>After TV</i>.
<br>
Nuevo nombre (NC) y comienzo de reestructuración.
<br>
<font color="yellow">Junio 2010:</font> Aparición en revista online <i>Ble</i>.
<br>
Formación de un staff de seis personas.
<br>
<font color="yellow">Agosto 2010:</font> Obtención de apoyo de la Agencia Comodoro Cultura.
<br>
<font color="yellow">Septiembre 2010:</font> Stand en la <i>Feria del Libro</i> de Sarmiento.
<br>
Primer NC Búnker (reuniones en el salón Pietrobelli).
<br>
Aparición en diario <i>El Patagónico</i>.

</font>
</div>

</div>
</body>
</html> 
Todo esto funcionaba perfecto en IE, Firefox y Opera; hasta que empecé a pedir screenshots para ir chequeando la visualización y me di cuenta de que más allá de que un usuario tenga una resolución del tamaño de una cancha de fútbol, si el área del explorador donde se muestra la página en sí (generalmente achicada por miles de barritas inútiles) tiene una altura menor a 600px todo el formato de la humilde paginita se va al re carajo.

PROBLEMA:
Vista en un área menor a 600 de alto pasa lo siguiente:
1) Toda la página se ve bastante más arriba, quedando fuera de la visualización unos 30 a 50 pixeles dependiendo del usuario en cuestión y de cuantas barritas de Farmville o Poringa tenga.
2) El scroll propio del explorador, que surge resultado de no poder mostrarse la longitud entera de la página, mueve las imágenes y el cuadro de texto pero no mueve el fondo; dando la sensación de que uno está jugando al tejo.
3) Si se ve la página 'bien' (área del explorador muestra 800x600 o más) y se hace zoom in o zoom out en cualquier explorador; las imágenes, el fondo y el cuadro de texto siguen sincronizados en cuanto a posición. En cambio si se ve la página 'mal' (área del explorador muestra menos de 800x600) todo se ve mal, pero horrible.

Desde ya les agradezco por darme el espacio de consulta y espero que algún alma caritativa me pueda ayudar.

Última edición por AkitoElPerro; 06/10/2010 a las 18:01 Razón: Me lo dijo el duendecillo
  #2 (permalink)  
Antiguo 06/10/2010, 18:49
 
Fecha de Ingreso: julio-2010
Mensajes: 91
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: HTML funciona morbosamente horrible dependiendo del área del explorador

primero que nada, ojala todos los temas sean asi de ordenandos como este xD

segundo, veo que tienes varias etiquetas abiertas...

no es necesario poner:
<html>

si ya tienes

<html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
-----------------------------

tienes 3 body's

<body>
<body bgcolor="#000000">
<body background="http://i21.servimg.com/u/f21/13/71/79/66/intro10.png" style="background-repeat:no-repeat; background-position:center; background-attachment:fixed">

te recomiendo poner solo uno <body>
y en el css poner
body{
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
background-color:#000;}


falta el estilo del id contenedor...

talvez entre eso esta el problema, recuerda q mi analisis fue a simple vista ;)
  #3 (permalink)  
Antiguo 06/10/2010, 19:03
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: HTML funciona morbosamente horrible dependiendo del área del explorador

AkitoElPerro:
Por lo pronto con un body {overflow: hidden;} podés eliminar el doble scroll,
El resto, dificil comtrolar que tiene o no tiene el cliente en su barra de herramientas. Al posicionarlo todo en pixeles y apuntando a que el cliente vea todo en el centro de su pantalla, estás "maniatado" si la resolucion es 800 x 600, a lo sumo podes ganarle al espacio deisponible un poco reduciendo el margen superior.

cualquier otra posibilidad implica cambiar todo tu diseño. Además tu forma de centrar la capa contenedora es incorrecta, deberías haber hecho algo como

div {
width: 800px;
height: 600px;
margin: 0px auto;
}
Por que no empiezas por eso y a partir de ahi ves como ubicar el resto

saludos

PD:
Uyyyyy, acabo de ver los tres Bodys... tanto concentrarme en el css me hizo olvidar semejante pequeño detalle. Olvidate de mis indicaciones y conseguite un manual de html urgentemente.
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 06/10/2010, 19:33
 
Fecha de Ingreso: octubre-2010
Ubicación: Dentro de un caleidoscopio
Mensajes: 3
Antigüedad: 13 años, 5 meses
Puntos: 0
Exclamación Respuesta: HTML funciona morbosamente horrible dependiendo del área del explorador

@juan_fer: Te agradezco por la pronta respuesta y aunque no me solucionó el problema si le da un poco más de orden a mi HTML.
Corregí lo de las etiquetas body pero no estoy seguro cómo ponerle estilo al id contenedor, ¿cómo lo hago?

@emprear: Te agradezo pero lo de
Código:
body {overflow: hidden;}
solamente desaparece la barra de scroll. Girando la rueda del mouse las imágenes y el bloque de texto se sigue yendo hacia arriba y abajo mientras que el fondo queda estático. Tampoco soluciona el problema de que un pedazo entero superior de la página queda sin poder verse.

Lo de:
Código:
div {
width: 800px;
height: 600px;
margin: 0px auto;
}
centra el fondo pero las imágenes y el bloque de texto adquieren posición a partir del top y left de la pantalla en lugar del contenedor.
La forma con la que lo centré la saqué de acá:
http://www.programacionweb.net/articulos/articulo/?num=461

Más allá de eso lo que quiero hacer creo que es bastante simple: es un fondo, algunas imágenes linkeadas y un bloque de texto con scroll. El problema es que no tengo experiencia alguna ubicando estos elementos.

¿Alguien sería capaz de darme asistencia vía msn o no se pide eso por acá?

Última edición por AkitoElPerro; 06/10/2010 a las 19:37 Razón: Link No Parse - No Woman No Cry

Etiquetas: resolución
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 03:55.