Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   mover solo eje (y) y conservar (x) con bacground-position (http://www.forosdelweb.com/f53/mover-solo-eje-conservar-x-con-bacground-position-877837/)

ArturoGallegos 18/01/2011 14:59

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!!!

sanxuan 18/01/2011 15:08

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.

ArturoGallegos 19/01/2011 15:44

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

sanxuan 19/01/2011 17:09

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.


La zona horaria es GMT -6. Ahora son las 06:51.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2014, Jelsoft Enterprises Ltd.

SEO by vBSEO 3.3.2