[SOLUCIONADO] Posicionar y redimensionar div respecto a otro

[isirivm]

Buenas noches a todos:
Tengo un problema que me trae loco, tengo un menú (lista de <li>) en horizontal como menú, con dentro de cada <li> el enlace correspondiente y tengo una barra abajo que hago que se mueva con jQuery, animando sus propiedades CSS para que segun hago hover en cada uno de los enlaces, se posiciones justo debajo de cada enlace, redimensionandose para que coincida con el tamaño de la palabra del enlace.
El problema me viene que el div que voy posicionando lo hago a base de variarle la propiedad left para situarlo a ojo justo al comienzo de la palabra y la propiedad with para redimensionarlo a ojo al tamaño de la palabra también, esto funciona correctamente en chrome, firefox e IE, pero en safari y en dispositivos móviles, varía el espacio entre letras de las palabras, que debe variar poquísimo, pero hace que se descuadre todo y el div que se desplaza ya no queda alineado ni al tamaño adecuado. He probado con el tipo de fuente Arial y Arial Narrow y nada, siempre varía, no son exactamente igual según el explorador. Existe alguna manera de saber el tamaño del <li> que contiene cada enlace (cada palabra) o calcular el tamaña exacto de las palabras o alguien que pudiera decirme como poder solucionarlo???
Por favor agradecería alguien me pudiera decir si es posible conseguir lo que quiero hacer para que funcione en todos los dispositivos o debo desistir y diseñarlo de otra manera.

Gracias , un saludo.

[Rafael]

Bienvenido.

Primero, si no pegas el código que estás usando es una adivinanza, y no se te va a poder ayudar nada.

Lo que sí noto es que la lógica de tu proyecto no es correcta. El hover debería estar contenido DENTRO del mismo elemento, no como un "elemento externo y pegado cerquita para que parezca"

Trata usando la propiedad background-position y un transition. Así lo que esté ahí realmente estará dentro del objeto.

[isirivm]

Perdón, el código que tengo implementado es este:

<!-- MITAD DERECHA DE CABECERA -->
<div class="cab-der">
<div class="cont-social">
<a href="#"><div class="icono-linkedin"></div></a>
<a href="#"><div class="icono-twitter"></div></a>
<a href="#"><div class="icono-facebook"></div></a>
</div>
<div class="cont-logo">
<img src="images/unlogo.png" alt="Logo" title="Un Logo"/>
</div>
<div class="cont-menu">
<ul class="list-menu">
<li class="item1"><a href="index.html">INCIO</a></li>
<li class="item2"><a href="quienes-somos.html">QUIENES SOMOS</a></li>
<li class="item3"><a href="servicios.html">SERVICIOS</a></li>
<li class="item4"><a href="instalaciones.html">INSTALACIONES</a></li>
<li class="item5"><a href="contacto.html">CONTACTO</a></li>
</ul>
</div>
<!-- Guía flotante-->
<div class="guia" style="left:470px; width:34px;"></div>
</div>

Como veis el div guía es el que se mueve y se redimensiona con este código jQuery:
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('.item2').hover(function() {
$('.guia').stop().animate({ "left" : "522px", "width" : "100px"}, 300);
}, function() {
$('.guia').stop().animate({ "left" : "470px", "width" : "34px"}, 200);
});

$('.item3').hover(function() {
$('.guia').stop().animate({ "left" : "638px", "width" : "66px"}, 300);
}, function() {
$('.guia').stop().animate({ "left" : "470px", "width" : "34px"}, 200);
});

$('.item4').hover(function() {
$('.guia').stop().animate({ "left" : "721px", "width" : "94px"}, 300);
}, function() {
$('.guia').stop().animate({ "left" : "470px", "width" : "34px"}, 200);
});

$('.item5').hover(function() {
$('.guia').stop().animate({ "left" : "834px", "width" : "67px"}, 300);
}, function() {
$('.guia').stop().animate({ "left" : "470px", "width" : "34px"}, 200);
});
});
//]]>
</script>
En cada archivo las posiciones se colocan según donde debe esta parada la guía y a las posiciones donde debe moverse.

No entiendo muy bien lo que me dices que hago bien, ya que para desplazar el div "guia" debo tener campo libre para ir situandose en el lugar correspondiente, por lo que si colocara el div dentro de cada uno de los <li> no se como crear la animación para que se mueva de un <li> al otro.

Gracias por responder, un saludo.

[pzin]

Deberías de usar $(this) para no repetir tanto código.

Tu problema podrías resolverlo fácilmente buscando la posición exacta de cada elemento en lugar de usar medidas concretas. Para puedes usar offset(). Aunque como no es relativo al padre, luego tendrás que restarle el propio offset del padre —porque es relativo a la ventana.

Cuando publiques código en el foro, intenta utilizar highlight para formatear bien el código.

[isirivm]

Perdonarme por el mal uso que hago al publicar post, soy novato en el foro. Segruiré vuestros consejos.

Muchas gracias por la contestación, me va a servir de mucho, estoy aún un poco verde en el uso de jQuery y Javascript, estoy en proceso de aprendizaje.

El uso de this me hace dudar, te refieres a usarlo en lugar del id de cada <li> no? pero como no tiene relación con el <div> "guia", debería colocarlo para que sean hermanos o padres e hijo no?

Voy a probar a cambiarlo guiándome con lo que me habéis aconsejado.

Un saludo.

[isirivm]

Gracias por vuestros consejos, por fin lo solucioné, utilizando la funcion position() y la función innerWith(), me calcula los valores que estaba buscando.

Un saludo.