Foros del Web » Creando para Internet » CSS »

Menu li hover, desplazamiento

Estas en el tema de Menu li hover, desplazamiento en el foro de CSS en Foros del Web. Hola chicos buenos días! Tengo un pequeño problema con un menú que me está volviendo loca. Es un menú horizontal normalito, pero al hacer hover ...
  #1 (permalink)  
Antiguo 05/01/2012, 04:12
Avatar de elacunza  
Fecha de Ingreso: mayo-2011
Mensajes: 46
Antigüedad: 12 años, 11 meses
Puntos: 0
Menu li hover, desplazamiento

Hola chicos buenos días!

Tengo un pequeño problema con un menú que me está volviendo loca.

Es un menú horizontal normalito, pero al hacer hover sobre el texto, las palabras (que en si cambian a negrita) empujan el resto de palabras que están a su derecha.

HTML

<div id="menu">
<ul class="menu">
<li><a href="#anchor1inicio" class="anchorLink">&nbsp;Sarrera</a></li>
<li><a href="#anchor2hotela" class="anchorLink">&nbsp;Hotela</a></li>
<li><a href="#anchor3jatetxea" class="anchorLink">&nbsp;Jatetxea</a></li>
<li><a href="#anchor4tarifak" class="anchorLink">&nbsp;Tarifak</a></li>
<li><a href="#anchor5galeria" class="anchorLink">&nbsp;Galeria</a></li>
<li><a href="#anchor6kokapena" class="anchorLink">&nbsp;Kokapena</a></li>
<li><a href="#anchor6kontaktua" class="anchorLink">&nbsp;Kontaktua&nbsp;</a></li>
</ul>
</div>

CSS

#menu{
margin-top:30px;
padding-top:20px;
float:right;
width:610px;
overflow:hidden;
font-family:DIN Alternate Medium,"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;
}

.menu{
display:inline;
width:610px;
overflow:hidden;
}

.menu li{
float:left;
list-style: none;
}

.menu li a{
font-size:15px;
text-decoration:none;
text-transform:uppercase;
font-family:DIN Alternate light, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;;
color: #959a6f;
outline: none;
font-weight:normal;
}

.menu li a:hover{
font-family:DIN Alternate medium, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;
color: #959a6f;
}



----

¿Alguna idea de qué puede estar pasando?
  #2 (permalink)  
Antiguo 05/01/2012, 09:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Sin ejecutar su código, por el cacharro con el que estoy, unos apuntes:
No declara tamaño ni en /li/ ni en /a/ por lo que depende del contenido.
Por lo general las versiones en negrita son sensíblemente más anchas que las normales (e su caso la ver. light) por lo que al pasar de una variante a otra hay un cambio en el espacio horizontal ocupado. Eso produce un reajuste en la anchura que afecta al elemento y los siguientes por lo que decía al inicio: la anchura es función del contenido.
  #3 (permalink)  
Antiguo 09/01/2012, 02:16
Avatar de elacunza  
Fecha de Ingreso: mayo-2011
Mensajes: 46
Antigüedad: 12 años, 11 meses
Puntos: 0
Respuesta: Menu li hover, desplazamiento

Muchas gracias Kseso, supongo que si es tema de tamaño negrita/normal, no habrá mucha solución.
Gracias por contestar!
Un saludo.
  #4 (permalink)  
Antiguo 10/01/2012, 08:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Menu li hover, desplazamiento

Si pretende evitar ese movimiento sin actuar sobre nada más (anchuras, cambio de efecto... etc) tiene a mano el letter-spacing.
Sí, ya se, laborioso y sin garantía de compensar al px (y por lo tanto evitar expansiones/contracciones).

Etiquetas: desplazamiento, hover, html
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 12:35.