Posicionar imagenes en barra de menú

[Snapy]

Hola a tod@s,

Con la super ayuda de nadie he puesto unas imágenes en la barra de menú que deberán llevar a los usuarios a twitter, facebook...

 

Problemas:

- No direcciona a una web de ejemplo que he puesto en el código en el logo de facebook (ver la dirección de mi tienda que acompaño).

- Sale una molesta línea gris encima de los logos cuando pasas el cursor por encima, (estará relacionado con el menú delos productos de la tienda)

 

mi tienda: espiacenter.com/prestashop

 

los códigos que he puesto:

 

 

-Bloctopmenu.tpl:

<li id="jackypulgas">

<a href="lavanguardia.com" target="_blank"><img src="{$img_dir}rib-facebook.png"/></a>

</li>

<li id="jackypulgastwitter">

<a href="twitter" target="_blank"><img src="{$img_dir}rib-twitter.png"/></a>

</li>

<li id="jackypulgasyoutube">

<a href="rss" target="_blank"><img src="{$img_dir}rib-youtube.png"/></a>

</li>

<li id="jackypulgasrss">

<a href="li" target="_blank"><img src="{$img_dir}rib-rss.png"/></a>

</li>

<li id="jackypulgasli">

<a href="rss" target="_blank"><img src="{$img_dir}rib-li.png"/></a>

</li>

 

 

en superfishmodifies.css:

#jackypulgas {

width: 26px;

float: left;

margin-top: -8px;

margin-left: 85px;

}

 

#jackypulgas a img {

float: left;

}

 

#jackypulgastwitter {

width: 26px;

float:left;

margin-top: -8px;

margin-left: 4px;

}

 

#jackypulgastwitter a img {

float: left;

}

 

#jackypulgasrss {

width: 26px;

float:left;

margin-top:-8px;

margin-left:4px;

}

 

#jackypulgasrss a img {

float: left;

}

 

#jackypulgasli {

width: 26px;

float:left;

margin-top:-8px;

margin-left:4px;

}

#jackypulgasli a img {

float: left;

}

 

#jackypulgasyoutube {

width: 26px;

float:left;

margin-top:-8px;

margin-left:4px;

}

#jackypulgasyoutube a img {

float: left;

}

 

 

un saludo y muchas gracias.

Edited May 24, 2013 by Snapy (see edit history)

[J.Parra]

Hola, no soy ningún experto, pero si tienes problemas con los enlaces prueba a ponerlos con rutas absolutas de este modo:

 

href="http://www.lavanguardia.com"

 

Luego para el "molesto" efecto, habría que ver que efecto en concreto es, pero yo probaría a añadir en cada ID del CSS "text-decoration: none" de este modo:

 

#jackypulgas {

width: 26px;

float: left;

margin-top: -8px;

margin-left: 85px;

text-decoration: none;

}

[nadie]

Por cierto, ahora que lo leo, hubiera sido mejor usar una "clase" que un "id"; para no repetir la misma instrucción 5 veces en el css.