Buenas a todos, tengo un problemilla que seguramente se arregle fácilmente, pero que me está estresando sobremanera, y yo que soy novatilla pues ya no se me ocurren más posibilidades para arreglarlo.
Tengo un menú de contacto que maquetar con CSS, lo estoy haciendo con una lista normalita (también probé a hacerlo con un simple link pero no hay manera). el problema es que, no es un link de textos in mas sino que tiene una pequeña imagen delante, que en el hover cambia de color al igual que el texto.
He probado a ponerlo como fondo, como imagen de viñeta... etc etc y sigue sin salirme, lo más que he logrado ha sido que aparezca y que cambie si, pero justo debajo del texto sin permitirle ningún tipo de margen... ais que mal me explico. A ver que intente hacerlo más visual, porque yo me explico que da pena:
Este es el menú, o el botón que debo hacer, en gris normal, y en amarillonaranja en hover, pero cambia la imagen tambien.
Y este es mi código:
Código:
CÓDIGO CSS
.contact {
text-align: right;
list-style: none;
}
.contact li {
}
.contact li a {
text-decoration: none;
color: #666;
background: url(img/envelope_grey.png) no-repeat bottom left;
padding: 10px 41px 0 0;
}
.contact li a:hover {
color: #eca026;
background: url(img/envelope_orange.png) no-repeat bottom
left;
}
CÓDIGO XHTML
<div id="contactNavi">
<ul class="contact">
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>
Muchas gracias de antemano ^^