Foros del Web » Creando para Internet » CSS »

mover solo eje (y) y conservar (x) con bacground-position

Estas en el tema de mover solo eje (y) y conservar (x) con bacground-position en el foro de CSS en Foros del Web. buen dia compañeros del foro, estoy desarrollando un menú donde utilizo sprits para la imagen de background... mi problema surge al necesitarlo totalmente css y ...
  #1 (permalink)  
Antiguo 18/01/2011, 14:59
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Pregunta mover solo eje (y) y conservar (x) con bacground-position

buen dia compañeros del foro,

estoy desarrollando un menú donde utilizo sprits para la imagen de background... mi problema surge al necesitarlo totalmente css y no poder usar java o algún lenguaje

veran tengo las siguientes clases...

Código CSS:
Ver original
  1. .item0{display:block;width:110px;height:79px;overflow:hidden;background:url(Menu.jpg) no-repeat -111px 0;}
  2. .item0:hover{background-position: -111px -79px;}
  3.  
  4. .item1{display:block;width:110px;height:79px;overflow:hidden;background:url(Menu.jpg) no-repeat -222px 0;}
  5. .item1:hover{background-position: -222px -79px;}
  6.  
  7. .item2{display:block;width:110px;height:79px;overflow:hidden;background:url(Menu.jpg) no-repeat -333px 0;}
  8. .item2:hover{background-position: -333px -79px;}

hasta aquí todo perfecto, en el hover muevo la imagen con background position, y al seleccionar un elemento le agrego class="activo" quedando por decir <li class="item1 activo"> y es aquí donde entra el problema... necesito que la clase activo mueva la imagen de fondo solo en el eje (y) conservando el eje (x) ya declarado en item(n)

alguien sabrá como puedo hacerlo? o necesariamente tendré que crear una clase distinta para cada elemento como activo1, activo2... etc?

Gracias!!!
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #2 (permalink)  
Antiguo 18/01/2011, 15:08
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: mover solo eje (y) y conservar (x) con bacground-position

¿Por qué no un selector .item0.activo, .item1.activo, .item2.activo?
Bueno, en realidad sería muy parecido a usar activo1, activo2,...

Sin usar JavaScript no se me ocurre otra forma.
  #3 (permalink)  
Antiguo 19/01/2011, 15:44
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: mover solo eje (y) y conservar (x) con bacground-position

Hola sanxuan muchas gracias por tu comentario,

y en efecto item2.activo resulta lo mismo que crear activo1, activo2,....

mi idea era mas para ahorrar lineas de código que la dificultad de crear las clases...
por ahora lo he creado las clases y dejado en:
Código CSS:
Ver original
  1. .item2{display:block;width:110px;height:79px;overflow:hidden;background:url(Menu.jpg) no-repeat -333px 0;}
  2. .item2:hover,.activo2{background-position: -333px -79px;}

pero va sigue abierta la pregunta por si alguien llegase a saber como modificar solo uno de los ejes y no forzosamente tener que declarar ambos
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 19/01/2011, 17:09
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: mover solo eje (y) y conservar (x) con bacground-position

Completo mi intervención.
Hay propiedades background-position-x y background-position-y... pero no forman parte del standard. No están soportadas en todos los navegadores.

Otra solución que se me ha ocurrido que puedas haber dejado pasar sin darte cuenta de ello:
si usas las constantes left, right, top o bottom junto a background o background-position no necesitarías dar los dos valores para estas propiedades.
Se puede usar background-position:top por ejemplo. Quizás te pueda servir.

Etiquetas: conservar, mover
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 04:39.