Problema con menú css sprites

[kahlo84]

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.

[xFantaSx]

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

[kahlo84]

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.

[xFantaSx]

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; }

[kahlo84]

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?

[xFantaSx]

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:

<div class="navi1">
  <ul>
    <a href="#"><li class="home"></li></a>
    <a href="#"><li class="looks"></li></a>
    <a href="#"><li class="belleza"></li></a>
    <a href="#"><li class="viajes"></li></a>
    <a href="#"><li class="shopping"></li></a>
    <a href="#"><li class="lector"></li></a>
    <a href="#"><li class="featuring"></li></a>
    <a href="#"><li class="premios"></li></a>
    <a href="#"><li class="varios"></li></a>
    <a href="#"><li class="roypedrin"></li></a>
    <a href="#"><li class="contacto"></li></a>
 </ul>
</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.

[kahlo84]

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.

[destinopolinesia]

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

[kseso?]

Iniciado por xFantaSx

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

Código HTML:

<div class="navi1">
  <ul>
    <a href="#"><li class="home"></li></a>
 </ul>
</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:

<ul>
    <li>
          <!-- cualquier contenido -->
    </li>
</ul>
 

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

Iniciado por kahlo84

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:

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.

[xFantaSx]

Iniciado por kseso?

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:

<ul>
    <li>
          <!-- cualquier contenido -->
    </li>
</ul>
 

:O El resultado no sería el mismo?, la verdad no soy experto y me gustaría saber cuál es la diferencia.

Iniciado por kseso?

Sí. Haberla hayla.

Código CSS:

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.

[kseso?]

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.