Problema con Rollover

[Vendetta]

Pues estoy haciendo un menu con rollover pero tengo un problema que me resulta bastante extraño...

He hecho el primero boton del menu, lo he puesto y todo perfecto...el problema viene al poner el segundo, pongo este y el rollover no se muestra. Se queda la imagen como si tubiera el raton encima (las dos del menu) y no hace nada por mucho que pase el raton...Uso este codigo:

Código HTML:

<a href="URL" onMouseOver="if (document.images) document.maker1.src='NORMAL';" onMouseOut="if (document.images) document.maker1.src='HOVER';"><img src="NORMAL" width="139" height="55" name="maker1" border="0" alt="Portal"></a> 

Os dejaré dos URLs para que veais que con 1 boton si funciona pero con los dos, no...

shinobiswar.com/prueba1.html - Pagina con 1 boton
shinobiswar.com/prueba2.html - Pagina con 2 botones

Uso el mismo codigo para el segundo boton y lo pongo seguido...

[Mikmoro]

Mira qué manera tan sencillita de hacerlo sin javascript, sólo con CSS:

Ejemplo

[Vendetta]

Vale y...Como lo has hecho? Porque en el codigo fuente veo el CSS y los dos links, copio y pego en mi documento y no salen como rollover sale con la imagen que le pongo y lo veo normal. En ese codigo no veo ningun sitio donde poner la imagen normal y luego el hover =\

Luego he copiado todo tu codigo y lo he pegado en un html junto y no sale xD Dejo la URL donde he hecho o intentado hacer, el rollover con eso que me has dicho..

shinobiswar.com/prueba3.html

Gracias por responder :)

[Mikmoro]

Hay que ser un poco más curioso y fijarse en todo bien e investigar (no me rio de ti, sino de la sorpresa que te has debido llevar al ver que funciona y si lo coges y pegas no lo hace).

El truco se basa en el posicionamiento de la imagen de fondo. Todo empieza por hacer esta imagen:



Entonces la usas de fondo, de manera que con el enlace en reposo se ve sólo la mitad superior, y al pasar el ratón con

a:hover {background-position: left bottom;}

lo que haces es mostrar la mitad inferior.

Es un buen truco, porque además el cambio de imagen es mucho más rápido que con el onmouseover, ya que la imagen al completo está cargada y sólo cambia de posición el fondo.

No es mucho trabajo unir las imágenes de tus botones (pisado y sin pisar): yo como ves lo he hecho con dos en un minuto.

[Vendetta]

Iniciado por Mikmoro

Hay que ser un poco más curioso y fijarse en todo bien e investigar

Uh, como iba a pensar yo que habias hecho eso con la imagen si nunca he tocado CSS xD ni ninca habia visto esta forma.

Bueno ahora supongo que si me funcionara xD

He intentado separar el codigo CSS en otro archivo...He puesto el css en la carpeta CSS y luego en el html he puesto esto...

Código HTML:

<link rel="stylesheet" type="text/css" href="CSS/style.css">
<a href="#" class="indice"></a>
<a href="#" class="faq"></a> 

dentro de la etiqueta body pero los botones no salen...Solo esta el link que si pasas el raton se nota pero la pagina se queda en blanco, que hago mal? =\ porque no se, va asi no?

Gracias por la ayuda ^^

[Mikmoro]

Iniciado por Vendetta

Uh, como iba a pensar yo que habias hecho eso con la imagen si nunca he tocado CSS xD ni ninca habia visto esta forma.

Ya, ya, supongo que nunca lo habías visto, no te ofendas.

Ahora el problema será de dirección relativa, es decir: si te has llevado la CSS a una carpeta, y las imágenes están en otra al mismo nivel, la ruta relativa que tenían los selectores para poner de fondo las imágenes:

a.indice {width: 139px; height: 55px;background: url(img/indice.png) no-repeat;}
a.faq {width: 93px; height: 55px;background: url(img/faq.png) no-repeat;}

ya no sirve, y ahora debes indicar dónde están las imágenes de esta manera:

a.indice {width: 139px; height: 55px;background: url(../img/indice.png) no-repeat;}
a.faq {width: 93px; height: 55px;background: url(../img/faq.png) no-repeat;}

poniendo correctamente el nombre que hayas dado a tu carpeta de imágenes.

Con eso le dices desde la hoja de estilo: en el nivel anterior al que estoy (../) en la carpeta "img", la imagen tal.

Mira a ver si era eso y si no lo subes para que podamos echarle un vistazo.

[Vendetta]

Iniciado por Mikmoro

Ya, ya, supongo que nunca lo habías visto, no te ofendas.

No hombre, si lo habia dicho en coña =P no como ofendido jeje

Y si, era eso ya funciona a la perfeccion supongo, aun no lo he puesto en el archivo real, he estado haciendo pruebas en un html aparte pero vamos, no deberia tener problemas a la hora de cambiar las url al header del foro xD

Muchas gracias por la ayuda y de paso, como veo que sabes bastante :P Si puedes, podrias ayudarme en este tema que hice hace unos dias? ( http://www.forosdelweb.com/f4/ayuda-modificacion-del-perfil-phpbb-613081/ ) nadie me ha respondido y no se si es porque no se entiende o porque nadie lo ha visto...

Me harias un favor si me ayudaras con eso ó.ò, Gracias de nuevo decidas lo que decidas

[Mikmoro]

Pues no respondí porque sólo leí "Ayuda en modificacion del Perfil", y pensaba que te referías al perfil de este foro y que habías puesto el mensaje en el foro equivocado.

No sé cómo construyes el bloque del perfil, pero si sale centrado tiene pinta de ser una tabla. Si es así, podrías probar a ponerle a la celda que contiene los datos un valign="top"

<td valign="top">...

Si no es eso, pon un enlace para poder verlo.

[Vendetta]

He editado el tema anterior, creia que estabas offline por eso edite o.o y cuando le doy a guardar veo que has respondido xD bueno, era esto:

Shit, parece que nunca vaya a terminar esto u.u

http://shinobiswar.com/prueba4.html

Sale un espacio entre el boton del faq y el de miembros ? He copiado la linea del faq y he cambiado las palabras faq por miembros, no entiendo -.-

El codigo que he usado es este

Código HTML:

a.indice, a.faq, a.miembros {display: block;float: left;}
a.indice {width: 139px; height: 55px;background: url(../images/menu1/indice-r.png) no-repeat;}
a.faq {width: 93px; height: 55px;background: url(../images/menu1/faq-r.png) no-repeat;}
a.miembros {width: 153px; height: 55px;background: url(../images/menu1/miembros-r.png) no-repeat;}
a:hover {background-position: left bottom;}

...u.u

Y en cuanto a lo del perfil, lo de valign ya esta puesto y bueno...la URL se supone que no deberia hacerla publica xD pero bue >.< luego edito y la quito:

deleted :P

[Mikmoro]

Ya la puedes quitar si quieres.

Ahora miro lo otro.

[Vendetta]

Muchas gracias >.<

Posteo para que puedas responder sin hacer doble post :P asi queda todo mas ordenador

[Mikmoro]

Parece mentira las cosas tan tontas en las que nos podemos equivocar: la cosa es que tu gráfico de las faq no mide 93px, sino 91, y en la css pone 93.

Me tengo que marchar. Luego miro si veo algo en lo del foro.

[Vendetta]

ouch siento haber molestado por eso

[Mikmoro]

Es este td el que contiene los datos del perfil, y al que debes ponerle el valign="top"

<td><a name="19"></a><b><span style=...

[Vendetta]

Anda, ya esta, muchas gracias ^^

[Vendetta]

Siento volver a retomar esto, Mikmoro...la verdad es que me esta tocando los pendientes reales pero no se que pasa ahora...

Todo bien...pero entre el logo y el segundo menu hay un espacio que no se como quitarlo...Puse muchos <br> para que el segundo menu quedara abajo...Si quito un <br> el primer cuadrado del segundo menu queda al lado del logo y si añado el <br> que falta, queda ese espacio entre logo y menu =\ he mirado que los tamaños esten bien, que no pase lo de antes y estan bien =\ el espacio no esta linkeado por loq ue no es parte de ninguna imagen...

Aqui dejo la url para que veas...

http://shinobiswar.com/prueba4.html

Saludos y Gracias de new y.y

[Mikmoro]

Quita todos los br's y añade al selector del enlace "a.m1" clear: left;

A ver qué tal.