Comunidad de diseño web y desarrollo en internet online

Fondo menu y hover

Citar            
MensajeEscrito el 13 Sep 2012 10:17 am
Hola, estoy haciendo una web y me encuentro un problema en el menú, al pasar el ratón por encima de la opción de menú correspondiente este debe cambiar el fondo, esto está bien, el problema es que entre opción y opción hay un separador que es una imagen que he puesto como fondo del li que contiene a la opción y al hacer hover se sigue viendo esta imagen del menú siguiente. Os dejo una url a un ejemplo para que veais lo que digo. El ideal es lo que pasa en el último menú (contacto).

http://pruebas.ainvar.net

¿Alguien sabe como hacerlo?

Gracias

Por ainvar

8 de clabLevel



Genero:Masculino  

soy weberooooooo!!!!!!!!!!

firefox
Citar            
MensajeEscrito el 13 Sep 2012 08:04 pm
Creo que seria mas facil si utilizar un border que una imagen ya que es practicamente imposible que un boton en estado over tape la linea respectiva

Por ofitools

0 de clabLevel



 

msie
Citar            
MensajeEscrito el 14 Sep 2012 09:40 am
Ofitools tiene toda la razón.
En estos casos es mejor emplear bordes.
Yo lo que haría, para empezar, es poner un borde de color azul en la derecha de cada enlace del menu, menos en el último elemento del menu.
Sería así:

Código :

#cabecera #menu a{
    border-right:2px solid #80f2fe;
}
#cabecera #menu a:last-child{
    border-right:none;
}

Para evitar que el borde de color azul ocupe toda la altura del menu, empleamos los margenes:

Código :

#cabecera #menu a{
margin-top:12px;
}

Quitale el padding a los enlaces del menu. (ahora tienes padding-top:12px) Y tambien la altura (ahora tienes height:30px).

Ahora solo falta que al pasar el raton por encima, "desaparezca" el borde. Lo pongo entre comillas porque no lo vamos a hacer desaparecer, sino que le cambiaremos el color para que coincida con el del fondo y no se vea.

Código :

#cabecera #menu a:hover{
    border-right:2px solid #999a8f;
}


Lo he hecho todo un poco de memoría y no se si funcionará a la perfección.
Pruebalo y me cuentas!!!

Por terreo76

12 de clabLevel



 

Diseñador web

firefox
Citar            
MensajeEscrito el 14 Sep 2012 05:48 pm
Hola, primero gracias a ambos por contestar, terreo76, yo hice una chapuza, que es aumentar el ancho del enlace en el hover, esto funciona, aunque mueve un poco el texto, así que voy a probar tu solución a ver que tal.

De nuevo gracias por la ayuda.

Por ainvar

8 de clabLevel



Genero:Masculino  

soy weberooooooo!!!!!!!!!!

firefox
Citar            
MensajeEscrito el 14 Sep 2012 06:07 pm
Siento decir que esto no funciona, pues el problema es el mismo que con la imagen de fondo, el borde derecho del menu anterior sigue siendo visible, así que de momento me quedo con mi chapuza. Gracias de todos modos.

Por ainvar

8 de clabLevel



Genero:Masculino  

soy weberooooooo!!!!!!!!!!

firefox
Citar            
MensajeEscrito el 15 Sep 2012 08:13 pm
En vez de aumentar el tamaño has que el evento hover tenga un border-lef de color gris que tape el separador y asi el texto no se mueve ni visualmente se amplia el ancho del botón

Por daidalos

Claber

126 de clabLevel



 

chrome
Citar            
MensajeEscrito el 16 Sep 2012 08:25 pm
Buena idea daidalos, Gracias.

Por ainvar

8 de clabLevel



Genero:Masculino  

soy weberooooooo!!!!!!!!!!

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.