Problema con menú e imágen

[pann84]

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 ^^

[elbuensaint]

buenas...
no he entendido muy bien lo que quieres hacer. ¿Quieres que se muestre la imagen de fondo (donde ya dice contacto) y ademas encima se muestre el texto "Contacto"?

¿O solo quieres que se muestre la imagen como link y que haga el efecto hover?

[pann84]

Bueno a ver lo que quiero es que el sobre y la palabra contacto, al pasar el ratón por encima se pongan naranjas, y al clicar accedan a otra página, querer, es eso lo que quiero. Pero yo como los menús siempre los hice con listas, pensé que irían por ahí los tiros, pero si tienes otra solución también me vale. Muchas gracias!!!

[elbuensaint]

ok prueba esto:

Código HTML:

//ESTILOS CSS
.contact {
	text-align: right;
	list-style: none;
}
.contact li {
        width:ancho;
        height:alto;
	background: url(img/envelope_grey.png) no-repeat bottom left;

} 

.contact li:hover {
background: url(img/envelope_orange.png) no-repeat bottom left;
}
.contact li a:link,.contact li a:hover,.contact li a:visited {
        width:ancho;
        height:alto;
display:block;
} 
 


//CODIGO HTML

<div id="contactNavi">
          <ul class="contact">
            <li><a href="contacto.html"> </a></li>
          </ul>
        </div> 

con esto hara lo que quieres, las etiquetas <A> de la lista "contact" tendran el ancho y alto predefinido (en el css tienes que cambiar los dos width y los dos height por el tamaño de la imagen de fondo), asi que no importara si estan vacios o contienen texto, ya tendran un tamaño definido y para tus fines no necesitas poner texto ya que lo que vera el usuario sera la imagen de fondo que ya dice contacto, asi que basta con dejarle un espacio a la etiqueta.
Me cuentas si te funciono ;)

[pann84]

Muchas gracias, funciona perfectamente. Aunque lo que intentaba era no hacerlo con imágenes nada más, sino que "contacto" fuese texto, pero ha quedado perfecto y seguro que si sigo experimentando dejará hasta de funcionar que soy un poco desastre :P

Muchas gracias ^^ !!!

[elbuensaint]

pues si lo que quieres es implementar texto tambien, puedes usar la imagen de fondo solo quitando "Contacto" y posicionar el texto mediante padding para que quede enseguida del icono de la carta

[pann84]

GRACIAS!!!! Por fín me ha salido!!!!