Errores de Scroll

Soy diseñador gráfico y estoy realizando mi primer proyecto real de desarrollo web. Estoy haciéndolo en HTML5+CSS3 y estoy bastante contento con lo que llevo realizado porque me parece más sencillo que cuando estube jugando con xhtml.

Gracias a Youtube, foros como este y la cantidad de información que hay en la red he podido llegar a esto:

http://bit.ly/LVcgYl

Creo que el problema es el posicionamiento de los puntos que se iluminan sobre el esqueleto los que crean el problema. El esquelo es una imagen de fondo de una capa, encima hay otra capa con todos los puntos ocultos que se activan con jquery al hacer hover sobre los botones redondos numerados.

¿Porque tengo un scroll vertical tan grande? Lo curioso es que en local no me pasa (siempre con Chrome).

¿si hacéis estrecha la página para simular el ancho de un móvil veréis que al pasar rápidamente sobre los puntos numerados el scroll del navegador se vuelve loco (he usado un overflow:hidden en la capa de los puntos que son los que se salen de su ubicación pero no lo soluciona) y los puntos incluso podéis ver si os movéis rápidamente sobre ellos que aparecen sobre el footer.

¿Alguien tiene alguna idea de que pasa?

Muchas gracias

Espero que no te moleste pero revise tu código y lo más probable es que se trate de la posición inical en la que se encuentran los puntos, mi recomendación seria que todos los puntos los pusieras en una sola imagen y los fueras distribuyendo con css, espero ayudarte.

Gracias Erickito por tu ayuda. No acabo de entender tu propuesta, perdona la ignorancia ¿Te refieres a un único PNG que tenga todos los puntos? ¿Y de que manera activo las porciones de esa imagen para mostrar sólo los puntos necesarios en cada caso?

El caso es que antes de adaptar los esqueletos a responsive design funcionaba perfectamente. De hecho ya pregunté lo mismo porque tenía el mismo problema pero me aconsejaron poner un overflow=hidden y aunque no me dijeron donde lo puse a la primera en la caja contenedora que tiene la imagen de fondo de los esqueletos y las de los puntos y funcionó. El scroll dejó de hacer el loco y todo funcionaba perfectamente pero ha sido tocar el código para readaptarlo como ya he dicho y lo he destrozado

¿Alguna sugerencia?

Muchas gracias

Así es superlativo mi propuesta es que todos los puntos sean un PNG, osea que se convierta en sprites si no tienes idea de lo que son los sprites checa esto:

http://www.cristalab.com/tutoriales/menu-css-con-imagenes-precargadas-css-sprites-c65689l/

Gracias por tu respuesta. He usado sprites en botones con rollover, y aunque se preparar el sprite para este caso y usarlo sin problemas no tendría la solución. Me explico, la solución la debo tener más cerca, ya sea por el mal uso de position, float o algo que me estropea la maquetación. El sprite en png de los puntos me traería un trabajo que si sigo usando la maquetación actual continuaría teniendo el mismo problema.

Cuando te pones sobre un botón numerado bajo el contenedor de los esqueletos se cargan las imágenes durante milésimas de segundo pero en menos de un segundo se iluminan donde deben estar, sobre el esqueleto, lo que pasa que si te fijas los puntos los ves rápidamente en la parte inferior, además de que el scroll vertical del navegador delata que hay problema de caja.

Sigo sin dar con el problema del layout que debe ser el culpable.

Muchas gracias

agrega un overflow:hidden al id #maps_container

Perfecto nasho! Solucionado!

Pero ahora me gustaría entender el problema para entender la solución. Entiendo lo que hace overflow:hidden, oculta objetos desbordados, pero no entiendo este "desbordamiento" de mis cajas ¿porqué hace ese error visual de poner los puntos fuera que dura milésimas de segundo?

El código que hay online todavía no lo he corregido [url=http://bit.ly/LVcgYl ]para que vean el problema[/url]. Colocando overflow: hidden en #maps_container como apuntaba nasho se resuelve el problema pero no entiendo porque pasa ese error visual que todavía pueden ver [url=http://bit.ly/LVcgYl ]aquí[/url].

El código es el siguiente:

Código HTML :

 <div id="maps_container">
          <div id="mapbg"><img src="../../img/map.png" width="600px" height="600px" alt="map_background"/></div>
          <section id="maps">
            <div id="map" style="display: none;"> <img src="../../img/map.png" width="600px" height="600px" alt="mapa_puntos"/></div> <div id="map_p1" style="display: none;"> <img src="../../img/p1.png" width="600px" height="600px" alt="mapa_puntos"/></div> 
<!--Así con cada capa oculta para cada par de puntos que activaré con jquery-->
          </section>
        </div>

Código CSS :

#maps_container {
   width: 100%;
   height: auto;
   max-width: 600px;
   max-height: 600px;
   display: block;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
}

#mapbg {
   max-width: 600px;
   max-height: 600px;
   z-index: 1;
   width: 100%;
   margin: 0 auto;   
   position: relative;
}

#maps {
   z-index: 2;
   width: 100%;
   margin: 0 auto;
   max-width: 600px;
   max-height: 600px;
   position: absolute;
   top: 0;
   left: 0;

En resumen, maps_container es un contenedor que tiene mapbg en el fondo con la imagen de los esqueletos y encima maps con todas las capas ocultas de los puntos en png transparente que se activan con jquery mediante el efecto hover de los puntos numerados.

¿Pero me pueden explicar porqué pasa ese error visual?

Muchas gracias

P.D: ¿Porqué no me pone bien las URL la opción del candado de la barra de iconos al redactar el mensaje?

Según veo en tu js, usas un efecto de fade para mostrar/ocultar los puntos, entonces en el momento que pasas el mouse para activar puntos seguidos, hay 2 "visibles" por eso el scroll (en lo que tarda de ocultarse uno)

Podrías probar antes de agregar el overflow ponerle un position:absolute a cada punto (puedes asignarles una clase) y los posicionas todos hacia arriba "top:0" ... con eso todos los puntos deberian de tener la misma posición y no estar uno por debajo de otro...

Saludos.

Mil gracias nasho! Ya he posicionado en absoluto los puntos y ya no hay error visual, pudiendo ahorrarme el overflow.

Muchas gracias de nuevo!

Saludos