Rueda del ratón no sube y baja la página

Batusai · #1 (**permalink**) 13/10/2009, 12:09

Hola,

he usado el buscador pero "ratón y background" me da infinidad de resultados y casi ninguno tiene nada que ver con lo que busco.

El caso es que tenía un problema con la imagen de fondo de una página, que se veía mal según las resoluciones de pantalla/navegador. Lo conseguí arreglar con un código que encontré en el Google pero ahora el problema es que cuando intento subir y bajar por la página no puedo hacerlo, solo cuando pincho en algún sitio del contenedor principal. Entonces sí me permite usar la rueda del ratón para subir y bajar. Pero cuando paso el puntero por las zonas laterales deja de moverse.

Supongo que es por alguna de las propiedades de alguna de las capas que he colocado. No sé si alguien sabría indicarme qué falla.

Pongo el código de las capas, en orden de "cuál contiene cuáles":

Código:

HTML {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; HEIGHT: 100%; OVERFLOW: hidden; PADDING-TOP: 0px
}
BODY {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; HEIGHT: 100%; OVERFLOW: hidden; PADDING-TOP: 0px
}
#background {
	Z-INDEX: 1; POSITION: absolute; WIDTH: 100%; HEIGHT: 100%
}
#scroller {
	Z-INDEX: 2; POSITION: absolute; WIDTH: 100%; HEIGHT: 100%; OVERFLOW: auto; TOP: 0px; LEFT: 0px
}

/* Las dos anteriores albergan el contenedor principal: container */

#container {
	margin: 0px auto 0px auto;
	height:1280px;
	width:800px;
	padding-bottom:20px;
}

La foto del fondo la pongo en una capa sin ninguna propiedad especial:

Código:

<DIV><IMG id="background" title="" alt="" src="images/fondo.jpg"> 
</DIV>

Obviamente pensé en cambiar los valores de la capa "background" pero el problema de resoluciones inicial vuelve, aunque pueda usar la rueda del ratón.

¿Alguien puede iluminarme? Gracias de antemano.

kseso? · #2 (**permalink**) 13/10/2009, 12:18

Cita:

HTML {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; HEIGHT: 100%; OVERFLOW: hidden; PADDING-TOP: 0px
}
BODY {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; HEIGHT: 100%; OVERFLOW: hidden; PADDING-TOP: 0px
}

propiedad overflow
Posíblemente si lo retiras ya puedas hacer scroll. Pero como no sabemos el resto de la estructura html...

Un saludo

P.D.: Conviene escribir en minúsculas el código.

Batusai · #3 (**permalink**) 13/10/2009, 12:31

Ha cambiado los valores a "auto" tanto para html como para body pero no sirve.

Pongo más código que podría afectar, quizá:

Código:

<BODY>
<DIV><IMG id="background" title="Fondo de pa web" alt="Fondo" src="images/fondo.jpg"> 
</DIV>
<DIV id="scroller">
<div id="container" class="centrar">

<div id="cabezal">

</div>

<div id="banner">
...

En cuanto al CSS la clase "centrar" y el código afectado por lo de arriba es así:

Código:

#container {
	margin: 0px auto 0px auto;
 	border:solid 0px #777; 
	height:1280px;
	width:800px;
	padding-bottom:20px;
}
 
.centrar
{
    position: absolute;
	/*nos posicionamos en el centro del navegador*/
	top:0%;
	left:19%;
	margin: 0px auto 0px auto;
    text-align:center;
    font-family:Verdana;
}


/************** CABECERA *****************/
#cabezal{
	background:url(images/cabezal.png);
	background-repeat:no-repeat;
	position: relative;
	width:750px;
	height:25px;
	/* margin-left:15px; */
	margin-bottom:10px;
}

kseso? · #4 (**permalink**) 13/10/2009, 12:40

Pon un enlace a la página para que se pueda reproducir el problema, Batusai.

Batusai · #5 (**permalink**) 13/10/2009, 13:27

Hola,

gracias por el interés en mi problema.

El boceto de la página lo puedes ver en http://www.hicsuntleones.es/prueba/prueba.php
Está algo cargado por un reproductor mp3 y algunos otros elementos de algo de peso.

En cuanto al problema, si te fijas, es que si pinchas en alguna parte del centro puedes subir y bajar con la rueda del ratón; pero en los laterales no hay manera.

kseso? · #6 (**permalink**) 13/10/2009, 13:52

Batusai, me ha sido imposible reproducir el problema. El scroll mediante la rueda me funciona siempre, pinchando en cualquier parte, antes o después de moverla, sobre los laterales o en la barra del scroll, hacia arriba o hacia abajo, incluso moviendo en diagonal el puntero simultáneamente a mover la rueda...
Quizás sea algo ajeno al css.
Utilizo FF (ver. 3.5.3), vi$ta y el ratón es un trust.
Quizás otros usuarios con otra configuración...

Un saludo

Batusai · #7 (**permalink**) 13/10/2009, 13:57

A mí también me funciona... cuando visito la página con Firefox; pero el problema solo se me reproduce con IE7 e IE8, creo. Son las dos únicas versiones de IE con las que me dicen que se produce el problema.

Ni me había dado cuenta de que con Firefox eso no ocurre.

Mikmoro · #8 (**permalink**) 13/10/2009, 15:55

Buenas.
En primer lugar, tu página intenta cargar una imagen que no exsite:
<IMG id="background" title="" alt="" src="rabbit/fondo-ocean3.jpg">

En segundo lugar, te aconsejo que la página no aparezca con la música arrancada y que se pueda parar, sino todo lo contrario; es molestísimo.

En tercer lugar, es posible que tu reproductor, al tener que pararlo, capte el ratón en el control flash en IE y no permita el scroll hasta que no salga de él, que suele ocurrir.

Y por último, en el body tienes puesto overflow: hidden; en el contenedor scroller tienes un height del 100% (100% de nada, porque HTML no tiene altura definida), y ya es en #container donde defines un alto como height: 1280px, por lo que es en este en el que debe funcionar el scroll del ratón.

Batusai · #9 (**permalink**) 14/10/2009, 07:32

Hola,

muchas gracias por tu respuesta.

El enlace a la imagen de fondo está bien. Simplemente cambié la imagen varias veces por si el ser de un ancho y alto distinto influía o no en el resultado final. No influye.

Lo de la música yo lo veo igual que tú. Tienes toda la razón. Además es un consumo mayúsculo de recursos y hace que la carga inicial sea lenta.

El problema es que yo quería que el scroll del ratón funcionara en toda la página; y no he dado con la tecla para lograrlo. Por eso usé este foro como último recurso.

Muchas gracias por el interés. Saludos.

Mikmoro · #10 (**permalink**) 14/10/2009, 08:36

No te planteo problemas porque sí, sino para buscar soluciones.
1.- ¿Estás seguro de que aquí hay una imagen?
http://www.hicsuntleones.es/prueba/r...ndo-ocean3.jpg
es a donde apunta la imagen del principio de tu HTML, y no, no hay nada.
2.- Si estás de acuerdo, ¿no es posible que pares la música, teniendo en el reproductor un parámetro llamado "autoplay", o querías decir que no te dejan pararlo?
3.- Si haces el punto 2 arreglas el punto 3 (no hace falta pulsar en stop, por lo que el reproductor no secuestra el scroll).
4.- Una vez arreglado lo anterior, podremos entrar a mirar lo del scroll, pero sí te aseguro que una imagen tan grande de fondo y en fixed, hace que el scroll sea de por sí lentíiiiiisimo.

Batusai · #11 (**permalink**) 14/10/2009, 09:15

1.- Mea culpa. En las pruebas en local sí puse otras imágenes de fondo, pero esa que comentas y otras no las subí al servidor "en línea" donde hago las pruebas definitivas.

2.- Sí. Ya la he parado. En la prueba en local y en el servidor.

3.- ¿Si alguien entra y activa el reproductor de música o video, no captaría el ratón en el flash y volvería a tener el problema?

4.- La foto tan grande es inevitable. Lo que sí podría cambiar es el fixed, pero mi problema es que quien me pidió la página no acepta de ningún modo que la imagen se vea cortada, aunque sean 20 píxeles de abajo. Lo comprendo.
Con el método que encontré en Google pude fijar la imagen de fondo y que sea cual sea la resolución de pantalla del visitante, el zoom en su navegador y el navegador usado, la imagen siempre se ve igual: ocupando todo el fondo de forma proporcionada.

Pero sin duda el que ahora tenga el problema del scroll en IE sigue haciendo que la solución del fondo esté sin resolver.

A estas alturas me pregunto si hay alguna solución que incluya las dos circunstancias: tener fondo proporcionado y poder usar el scroll en IE.

Muchas gracias por tus respuestas. Estoy aprendiendo con ellas además de guiarme en estos problemas que planteo.

Mikmoro · #12 (**permalink**) 14/10/2009, 09:21

Cita:

Iniciado por Batusai

3.- ¿Si alguien entra y activa el reproductor de música o video, no captaría el ratón en el flash y volvería a tener el problema?

Sí, pero en ese caso él ha elegido activarlo, y al igual que ocurre en youtube, por ejemplo, sabrá que debe picar fuera del reproductor para recuperar el scroll.

Cita:

Iniciado por Batusai

4.- La foto tan grande es inevitable.

Pues en ese caso no hay mucho que hacer, qué remedio. Pero el propietario deberá saber que el scroll vertical es muy lento por su gusto.

Para el asunto del scroll lo miramos ahora con detenimiento (ahora que ya no salta la música

)

Batusai · #13 (**permalink**) 14/10/2009, 09:42

Si se pudiera picar fuera del reproductor y recuperar la utilidad del scroll del ratón sería un éxito rotundo. Pero por lo que dices interpreto que el IE es "defectuoso", porque el Firefox, que es el que suelo usar, no me da esos problemas.
Quizá no es que tenga ningún problema el IE sino simplemente que actúa de forma particular con configuraciones como la uso para evitar el problema del fondo descompensado que tenía.

La foto de fondo debe ser la que es o una similar. Muy amplia y pesada, sí, pero es que ellos lo quieren así.

Yo encantado de no poner música, sobre todo esa "pastillera", pero en este tema el que me pidió que le hiciera la página es categórico, a pesar de lo que le alerté contra eso. Quizá sus potenciales visitantes sí aprecien esos ruidos al llegar a la página por primera vez. Pero a gente como yo el escuchar esa música autoreproducirse me llamaría a cerrar la página a la mayor brevedad posible.

El origen es que quería un fondo que se autoajustara. Apliqué ese código porque es, de los que encontré en el Google, el primero en funcionar. No tengo reparos en desecharlo si me permite recuperar el scroll, pero necesitaría buscar otra solución al tema de la imagen de fondo.

En este momento estoy entre la espada y la pared. Si tiro hacia un lado me fastidia el otro.

Mikmoro · #14 (**permalink**) 14/10/2009, 10:18

Bueno, en primer lugar, tienes bastante jaleo con las pociiones absolutas de muchas cajas y demás, pero bueno, arreglar seo requiere bastante trabajo.

En el caso que nos ocupa, el asunto es este: en IE6, las superficies transparentes dejan de actuar, de tener "cuerpo" por así decirlo, y por eso no funciona el scroll fuera de lo que es el contenido. Esto lo hemos visto varias veces últimamente.

Simplemente añade al selector #scroller algo como una imagen de fondo falsa (que no exista), como background: url(1.jpg); y verás que entonces actúa correctamente.

Pruébalo a ver.

Batusai · #15 (**permalink**) 14/10/2009, 10:31

Lo del posicionamiento absoluto de las capas es probable que sea un desastre, porque estoy aprendiendo CSS sobre la marcha. Sabía un poco antes de meterme en este "fregao" pero no es lo mismo saber un poco que dominar y "ver" anticipadamente qué quieres hacer y cómo conseguirlo.
Necesito estudiar más las propiedades en CSS.

Pero como dices ahora tengo este problema... o tenía. ¡De mayor quiero ser como tú! Me has solucionado el problemón del scroll: http://www.hicsuntleones.es/prueba/prueba.php
¡Qué máquina!

Te estoy agradecido hasta el infinito.

Mikmoro · #16 (**permalink**) 14/10/2009, 10:41

¡Qué essaherao!

Me alegro de haberte ayudado. Y dile a tu cliente que esos enormes fondos estáticos ya no se llevan nada, nada (hace bastantes años

)

Hasta la vista.

Batusai · #17 (**permalink**) 14/10/2009, 11:20

El cliente es tan cutre que me encargó a mí su página en vez de a un "profesional" con tal de ahorrarse un dinero... y yo de pillar algún dinero, claro. Pero te aseguro que el trabajo y los disgustos que me ha dado este proyecto no me compensan lo que le voy a cobrar.

Además no puedo usar este trabajo para mi "galería de proyectos realizados" porque no me gustan algunos detalles, como lo del reproductor automático, el fondo cargante de 1 mega, y tal. Además la temática de esa web será muy... "alternativa"

Es decir, que no quiero venderme como webmaster aficionado con esa web. Tendré que esperar proyectos mejores en cuanto a estética y programación.

Muchas gracias de nuevo por la ayuda. Me has dado el alegrón del día. En serio.

Batusai · #18 (**permalink**) 15/10/2009, 16:48

Pues resulta que en la página donde compartís soluciones hay una que se adaptaba a lo que quería y con menos complicaciones: http://www.araudi.net/ejemplos/fondo_elastico.html

Saludos.

Mikmoro · #19 (**permalink**) 15/10/2009, 16:56

Lo sabía, porque es mia

pero se te veía contento con la que tú habías encontrado

Batusai · #20 (**permalink**) 15/10/2009, 17:07

si es sencillo, depurado y funciona... entonces es genial

En esa página hay algunos efectos chulos, y que quizá podría usar en alguna página alguna vez.

Muchas gracias de nuevo.