Foros del Web » Creando para Internet » CSS »

Problema con menú e imágen

Estas en el tema de Problema con menú e imágen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/08/2010, 13:30
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Problema con menú e imágen

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 ^^
  #2 (permalink)  
Antiguo 01/08/2010, 15:55
Avatar de elbuensaint  
Fecha de Ingreso: marzo-2009
Ubicación: Chiwas
Mensajes: 178
Antigüedad: 8 años, 8 meses
Puntos: 7
Respuesta: Problema con menú e imágen

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?
  #3 (permalink)  
Antiguo 01/08/2010, 18:49
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Problema con menú e imágen

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!!!
  #4 (permalink)  
Antiguo 01/08/2010, 23:41
Avatar de elbuensaint  
Fecha de Ingreso: marzo-2009
Ubicación: Chiwas
Mensajes: 178
Antigüedad: 8 años, 8 meses
Puntos: 7
Respuesta: Problema con menú e imágen

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 ;)
  #5 (permalink)  
Antiguo 02/08/2010, 01:42
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Problema con menú e imágen

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 ^^ !!!
  #6 (permalink)  
Antiguo 02/08/2010, 13:43
Avatar de elbuensaint  
Fecha de Ingreso: marzo-2009
Ubicación: Chiwas
Mensajes: 178
Antigüedad: 8 años, 8 meses
Puntos: 7
Respuesta: Problema con menú e imágen

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
  #7 (permalink)  
Antiguo 03/08/2010, 14:18
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: Problema con menú e imágen

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

Etiquetas: Ninguno
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 19:15.