Foros del Web » Creando para Internet » CSS »

Problema con menú css sprites

Estas en el tema de Problema con menú css sprites en el foro de CSS en Foros del Web. Hola, he creado un menú con css sprites, y va todo bien salvo por dos pequeños errores que me da, el menú lo podeis ver ...
  #1 (permalink)  
Antiguo 16/02/2012, 10:56
 
Fecha de Ingreso: diciembre-2008
Mensajes: 211
Antigüedad: 11 años, 2 meses
Puntos: 5
Problema con menú css sprites

Hola, he creado un menú con css sprites, y va todo bien salvo por dos pequeños errores que me da, el menú lo podeis ver aquí: http://pruebas-a22.blogspot.com/

Si os fijais la primera categoria del menú sale repetida en la segunda, y también hay unas pequeñas líneas blancas en la parte superior que tampoco sé porque salen, a ver si alguien me puede echar una mano.

Muchas gracias de antemano por vuestro tiempo.
  #2 (permalink)  
Antiguo 16/02/2012, 10:59
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 8 años, 6 meses
Puntos: 20
Respuesta: Problema con menú css sprites

Ayudaría un poco si dejas el código de tu css y el del menu html.

igual así por encima se puede ver que las lineas blancas que tienen arriba es por esta regla...

.tabs-inner .widget li a

las tienes así
border-left: 1px solid white
border-right: 1px solid #EEE

si quitas esas propiedades se quitan las lineas blancas
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #3 (permalink)  
Antiguo 16/02/2012, 11:04
 
Fecha de Ingreso: diciembre-2008
Mensajes: 211
Antigüedad: 11 años, 2 meses
Puntos: 5
Respuesta: Problema con menú css sprites

Ok, este es el código css:

Código:
.navi1 {
  display: block;
  height: 82px;
  margin:0 auto;
  position: relative;
  width: 900px;
}
.navi1 ul {
  float: none;
 
}
.navi1 ul li {
  height: 82px;
  background-image: url(http://i1188.photobucket.com/albums/z415/jcarlosc84/menu-3.jpg);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;

  position: absolute;
}

.navi1 ul li.home { background-position: 0px 0px; left: 0px; width: 90px; }
.navi1 ul li.looks { background-position: -90x 0px; left: 90px; width: 90px; }
.navi1 ul li.belleza { background-position: -180px 0px; left: 180px; width: 90px; }
.navi1 ul li.viajes { background-position: -270px 0px; left: 270px; width: 90px; }
.navi1 ul li.shopping { background-position: -360px 0px; left: 360px; width: 90px; }
.navi1 ul li.lector { background-position: -450px 0px; left: 450px; width: 90px; }
.navi1 ul li.featuring { background-position: -540px 0px; left: 540px; width: 90px; }
.navi1 ul li.premios { background-position: -630px 0px; left: 630px; width: 90px; }
.navi1 ul li.varios { background-position: -720px 0px; left: 720px; width: 90px; }
.navi1 ul li.roypedrin { background-position: -810px 0px; left: 810px; width: 90px; }
.navi1 ul li.contacto { background-position: -900px 0px; left:900px; width:90px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.home:hover { background-position: 0px -82px; }
.navi1 ul li.looks:hover { background-position: -90px -82px; }
.navi1 ul li.belleza:hover { background-position: -180px -82px; }
.navi1 ul li.viajes:hover { background-position: -270px -82px; }
.navi1 ul li.shopping:hover { background-position: -360px -82px; }
.navi1 ul li.lector:hover { background-position: -450px -82px; }
.navi1 ul li.featuring:hover { background-position: -540px -82px; }
.navi1 ul li.premios:hover { background-position: -630px -82px; }
.navi1 ul li.varios:hover { background-position: -720px -82px; }
.navi1 ul li.roypedrin:hover { background-position: -810px -82px;}
.navi1 ul li.contacto:hover { background-position: -900px -82px;  }
Y este el del menú:

Código:
<div class="navi1">
  <ul>
    <li class="home"><a href=""></a></li>
    <li class="looks"><a href=""></a></li>
    <li class="belleza"><a href=""></a></li>
    <li class="viajes"><a href=""></a></li>
    <li class="shopping"><a href=""></a></li>
    <li class="lector"><a href=""></a></li>
    <li class="featuring"><a href=""></a></li>
    <li class="premios"><a href=""></a></li>
    <li class="varios"><a href=""></a></li>
    <li class="roypedrin"><a href=""></a></li>
    <li class="contacto"></li></ul>
</div>
Muchas gracias.
  #4 (permalink)  
Antiguo 16/02/2012, 11:11
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 8 años, 6 meses
Puntos: 20
Respuesta: Problema con menú css sprites

Pues lo que pasa es que has olvidado poner una "x".

Así lo tienes:
.navi1 ul li.looks { background-position: -90x 0px; left: 90px; width: 90px; }
Así debería ser:
.navi1 ul li.looks { background-position: -90px 0px; left: 90px; width: 90px; }
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #5 (permalink)  
Antiguo 16/02/2012, 11:14
 
Fecha de Ingreso: diciembre-2008
Mensajes: 211
Antigüedad: 11 años, 2 meses
Puntos: 5
Respuesta: Problema con menú css sprites

Buf, vaya si era fácil, ya decía yo.... jajajaj pues muchisimas gracias!

Por cierto para cambiar el tamaño al menú, habria que hacer otra imagen y volver a cambiar los valores, o habría alguna forma de reducirlo si tener que tocar tanto el código?
  #6 (permalink)  
Antiguo 16/02/2012, 11:18
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 8 años, 6 meses
Puntos: 20
Respuesta: Problema con menú css sprites

El tamaño se podría reducir si:
-Reduces el tamaño de cada botón, igualmente tendrías que reducir el tamaño de las imágenes.
-Haces un div contenedor y dejas el menú en dos filas.
-Quitas algunos botones.

Otra cosa es que en tu html debería ser así:

Código HTML:
Ver original
  1. <div class="navi1">
  2.   <ul>
  3.     <a href="#"><li class="home"></li></a>
  4.     <a href="#"><li class="looks"></li></a>
  5.     <a href="#"><li class="belleza"></li></a>
  6.     <a href="#"><li class="viajes"></li></a>
  7.     <a href="#"><li class="shopping"></li></a>
  8.     <a href="#"><li class="lector"></li></a>
  9.     <a href="#"><li class="featuring"></li></a>
  10.     <a href="#"><li class="premios"></li></a>
  11.     <a href="#"><li class="varios"></li></a>
  12.     <a href="#"><li class="roypedrin"></li></a>
  13.     <a href="#"><li class="contacto"></li></a>
  14.  </ul>
  15. </div>

Si te fijas el link "a" está conteniendo el elemento de la lista y no el elemento al link, de esta forma quedará linkeado y no tendrás que hacer lo que está en la página con el cuadrito gris de la esquina.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #7 (permalink)  
Antiguo 16/02/2012, 11:23
 
Fecha de Ingreso: diciembre-2008
Mensajes: 211
Antigüedad: 11 años, 2 meses
Puntos: 5
Respuesta: Problema con menú css sprites

Genial, pues ahora mismo lo cambio, ya lo tengo todo ok salvo el tamaño, que reduciré las imágenes ahora, no hay otra jeje

Muchas gracias por todo!

Un saludo.
  #8 (permalink)  
Antiguo 16/02/2012, 23:30
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 8 años, 9 meses
Puntos: 6
Respuesta: Problema con menú css sprites

yo jugaría un poco con la opacidad de esas listas y su hover justamente para resaltar mas el hover mira el thumbnail de nuestro footer polinesia2012.com
  #9 (permalink)  
Antiguo 17/02/2012, 07:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 12 años, 8 meses
Puntos: 539
Respuesta: Problema con menú css sprites

Cita:
Iniciado por xFantaSx Ver Mensaje
Otra cosa es que en tu html debería ser así:

Código HTML:
Ver original
  1. <div class="navi1">
  2.   <ul>
  3.     <a href="#"><li class="home"></li></a>
  4.  </ul>
  5. </div>
Permítame indicarle el error.
Una lista |ul| sólo puede tener como hijo directo los |li|
Y dentro de cada |li| ya puede colocar cualquier otra etiqueta que necesite.
Así que obligatoriamente la estructura de una lista debe ser:
Código HTML:
Ver original
  1. <ul>
  2.     <li>
  3.           <!-- cualquier contenido -->
  4.     </li>
  5. </ul>

/***************************** ************************/

Cita:
Iniciado por kahlo84 Ver Mensaje
Por cierto para cambiar el tamaño al menú, habria que hacer otra imagen y volver a cambiar los valores, o habría alguna forma de reducirlo si tener que tocar tanto el código?
Sí. Haberla hayla.
Código CSS:
Ver original
  1. transform: scale(.X);
Siendo X un valor inferior a 1. Cuanto más cercano a 0 más pequeño se hace el elemento. Siendo .5 el equivalente a la mitad del original.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 17/02/2012 a las 08:20
  #10 (permalink)  
Antiguo 17/02/2012, 14:46
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 8 años, 6 meses
Puntos: 20
Respuesta: Problema con menú css sprites

Cita:
Iniciado por kseso? Ver Mensaje
Permítame indicarle el error.
Una lista |ul| sólo puede tener como hijo directo los |li|
Y dentro de cada |li| ya puede colocar cualquier otra etiqueta que necesite.
Así que obligatoriamente la estructura de una lista debe ser:
Código HTML:
Ver original
  1. <ul>
  2.     <li>
  3.           <!-- cualquier contenido -->
  4.     </li>
  5. </ul>
:O El resultado no sería el mismo?, la verdad no soy experto y me gustaría saber cuál es la diferencia.
Cita:
Iniciado por kseso? Ver Mensaje
Sí. Haberla hayla.
Código CSS:
Ver original
  1. transform: scale(.X);
Siendo X un valor inferior a 1. Cuanto más cercano a 0 más pequeño se hace el elemento. Siendo .5 el equivalente a la mitad del original.
No sabía xD. parece que le generé un poco de trabajo extra al compañero.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #11 (permalink)  
Antiguo 17/02/2012, 17:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 12 años, 8 meses
Puntos: 539
En cuanto a la estructura de la lista, con independencia de su visualización, créame, es esa.
Bueno, tambien puede consultar las especificaciones. No tengo a mano el enlace.
Y la diferencia es o hacerlo bien o jugar a la oca.

Sobre la forma de redimensionar las imágenes, la forma correcta y que más ventajas tiene es la que usted indicó.
Lo de transform lo indiqué a título complementario.

Etiquetas: sprites
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 18:10.