Foros del Web » Creando para Internet » CSS »

Aparición de boton mintado sobre otro tras hacer clic

Estas en el tema de Aparición de boton mintado sobre otro tras hacer clic en el foro de CSS en Foros del Web. Hola, tengo un problema de css con el menú principal de mi web. Lo he creado con la técnica de sprite y no acabo de ...
  #1 (permalink)  
Antiguo 26/01/2011, 09:11
 
Fecha de Ingreso: octubre-2010
Ubicación: Valencia
Mensajes: 16
Antigüedad: 13 años, 6 meses
Puntos: 1
Aparición de boton mintado sobre otro tras hacer clic

Hola, tengo un problema de css con el menú principal de mi web.
Lo he creado con la técnica de sprite y no acabo de solucionar que cuando presiono el botón que sea, siempre aparece el botón de contacto, cuando el efecto que quiero es que sea siempre (cundo se pase porn encima y se haga clic) el estado hover del botón que se está presionando.
Para entenderlo mejor, entren en el siguiente [URL="http://www.christianrooibos.es/"]enlace[/URL] y hagan clic en cualquiera de los botones del menú principal para que vean que aparece el botón de cpntacto.
¿Cómo soluciono esto?
Muchas gracias y un saludo.
  #2 (permalink)  
Antiguo 27/01/2011, 16:51
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Aparición de boton mintado sobre otro tras hacer clic

Comprueba la siguiente declaración de tu CSS:

ul#menu-header li a:active, body#portfolio ul#menu-header li.menu-item-38 a
{
background: url("./images/sprite.png") repeat scroll -116px -75px transparent;
}

Estás definiéndo tú mismo mediante a:active lo que está ocurriendo. Puedes eliminar"ul#menu-header li a:active," del selector.
Puedes dar el mismo valor a los estados :hover y :active para cada botón.
Por ejemplo donde tienes "#menu-item-39 a:hover" sustitúyelo por "#menu-item-39 a:hover, #menu-item-39 a:active" y lo mismo para el resto.
  #3 (permalink)  
Antiguo 29/01/2011, 17:14
 
Fecha de Ingreso: octubre-2010
Ubicación: Valencia
Mensajes: 16
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Aparición de boton mintado sobre otro tras hacer clic

Gracias, pero creo que no lo consigo arreglar ni así. Pongo los estilos del botón portfolio por ejemplo:
y el css:
Código:
#menu-item-38 a {
	background: url(./images/sprite.png); 
	background-position: -116px 0px;
	}
#menu-item-38 a:hover {
	background: url(./images/sprite.png); 
	background-position: -116px -75px;
	}
ul#menu-header li a:active,
body#portfolio ul#menu-header li.menu-item-38 a {
	background: url(./images/sprite.png); 
	background-position: -116px -75px;
	}
Cambiando el css a lo siguiente que es lo que he interpretado de la respuesta anterior, tampoco lo consigo corregir.(no tengo mucha mucha idea eh):
Código:
#menu-item-38 a {
	background: url(./images/sprite.png); 
	background-position: -116px 0px;
	}
#menu-item-38 a:hover,
#menu-item-38 a:active,
body#portfolio ul#menu-header li.menu-item-38 a {
	background: url(./images/sprite.png); 
	background-position: -116px -75px;
	}
Lo curioso es que cuando aparece el estado hover en todos los botones cuando presionamos sobre el botón, aparece el estado hover de contacto en todos, y las coordenadas de cada uno de los botones para tal efecto, no son las mismas que las que tiene ese estado que aparece...es lo que no entiendo o no acabo de comprender, puesto que son -465px -75px.

En definitiva, que continúa igual, pero gracias por responder igualmente, a ver si alguien lo vé más claro con eso que he puesto.
Saludos

reEdito: Dejando solo lo siguiente, también aparece el error.
Código:
#menu-item-39 a {
	background: url(./images/sprite.png); 
	background-position: -232px 0px;
	}

Última edición por Crooibos; 29/01/2011 a las 17:47 Razón: Me olvidé de un detalle
  #4 (permalink)  
Antiguo 29/01/2011, 20:03
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Aparición de boton mintado sobre otro tras hacer clic

Me refería a lo siguiente:

#menu-item-38 a {
background: url(./images/sprite.png);
background-position: -116px 0px;
}
#menu-item-38 a:hover,
#menu-item-38 a:active{
/* Aquí las propiedades para cuando pasamos por encima*/
background: url(./images/sprite.png);
background-position: -116px -75px;
}

body#portfolio ul#menu-header li.menu-item-38 a {
background: url(./images/sprite.png);
background-position: -116px -75px;
}
Lo he tomado directamente de tu respuesta, no he entrado de nuevo en la página. Espero que funcione.
  #5 (permalink)  
Antiguo 30/01/2011, 05:02
 
Fecha de Ingreso: octubre-2010
Ubicación: Valencia
Mensajes: 16
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Aparición de boton mintado sobre otro tras hacer clic

Puaf, gracias otra vez pero ni así funciona...
  #6 (permalink)  
Antiguo 30/01/2011, 10:19
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Aparición de boton mintado sobre otro tras hacer clic

¿Conoces el complemento firebug para Firefox?
Suele ser de gran ayuda en estos casos. Te permite seleccionar un elemento de tu página y observar los estilos que tiene. Creo que puedes haber definido en más de un lugar las mismas propiedades.
Si usas IE puedes utilizar "Herramientas de desarrollo" en el menú "Herramientas" del navegador.
En el comentario anterior te indicaba que sólo había modificado por encima la parte que explica la idea. Si te fijas, en ese mismo código has definido dos veces el fondo de uno de los botones mediante los selectores #menu-item-38 a y body#portfolio ul#menu-header li.menu-item-38 a.
Puede que esté ocurriendo lo mismo con el "a:active" de los botones.
De nada servirán los cambios que hagas en tu CSS si vuelves a cambiarlos en otro lugar más adelante.
Revisa el código y utiliza alguna de esas herramientas u otra similar.
Quedo a tu disposición para cualquier duda.
  #7 (permalink)  
Antiguo 30/01/2011, 10:34
 
Fecha de Ingreso: octubre-2010
Ubicación: Valencia
Mensajes: 16
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Aparición de boton mintado sobre otro tras hacer clic

Hey, gracias otra vez por responder.
No uso IE, tengo mac y uso firefox con firebug si, es genial la verdad, para ajustar bien los sprites me ahorra mucho trabajo.
Ahora voy a hacer una copia de la hoja de estilos y empezaré de cero con este menú.
Evidentemente "el día "que consiga arreglar esto...lo explicaré porque está siendo un dolor de cabeza.
Saludos
  #8 (permalink)  
Antiguo 30/01/2011, 11:07
 
Fecha de Ingreso: octubre-2010
Ubicación: Valencia
Mensajes: 16
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Aparición de boton mintado sobre otro tras hacer clic

Listo sanxuan, parece que al final lo resolví y ya sé qué es lo que pasaba.
Como bien decías, cambiar algo en el css que más adelante se volvía a repetir como en un principio, sobreescribiría lo declarado anteriormente.

Comenté todos los botones excepto los dos primeros, Inicio y Portfolio para jugar con ellos.
Al hacer esto, cuando hacía clic y lo mantenía para ver qué era lo que ocurría (anteriormente decía que siempre mostraba a contacto en cualquira de los botones) ya no mostraba a contacto, sino a portfolio, y esto pasaba porque era la última declaración (a ver si no lo voy a estar diciendo bien haciéndome el listillo...) de aquél estado, contacto. En esta ocasión pasaba a ser portfolio la que aparecía.

Por lo tanto, el código de estar así en un principio...
Código:
#menu-item-37 a {
	background: url(./images/sprite.png);
	background-position: 0px 0px;
	}
#menu-item-37 a:hover {
	background: url(./images/sprite.png); 
	background-position: 0px -75px;
	}
ul#menu-header li a:active,
body#inicio ul#menu-header li.menu-item-37 a {
	background: url(./images/sprite.png); 
	background-position: 0px -75px;
	}
...lo he cambiado a esto otro y funciona:
Código:
#menu-item-37 a {
	background: url(./images/sprite.png);
	background-position: 0px 0px;
	}
#menu-item-37 a:hover,
ul#menu-header #menu-item-37 a:active,
body#inicio ul#menu-header li.menu-item-37 a {
	background: url(./images/sprite.png); 
	background-position: 0px -75px;
	}
Más ligero, más simplificado y mejorable...seguro, pero funciona...así que por ahora se quedará así hasta una próxima versión de la web.

Por si no lo mencioné, el que tenga esos nombres raros las clases e id, es debido a que ese código lo genera wordpress.

Muchas gracias sanxuan, ahora me toca pelearme con la navegación del listado de entradas...pero ese si me sigue dando la lata...será otro hilo.

Saludos y gracias otra vez.

Etiquetas: hover, sprite, estado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:05.