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.