texto e image de fondo se mezclan y crean caos

ChessMaster · #1 (**permalink**) 13/07/2006, 18:24

Amigos: Tengo un menu, en el cual el texto de los enlaces tiene que estar alineado a la derecha, pero antes que llegue al border-right debe de haber una imagen(icono), ejmp:
menu1 [imagen1 de fondo]
menu2 [imagen1 de fondo]
menu3 [imagen1 de fondo]....todos alineados a la derecha....pero sucede que cuando pongo el icono como imagen de fondo, este mezcla con el texto del menu (lo que no sucede si lo coloco como imagen normal no como background, en el tag <img />)...y resultado=caos, amigos como podria solucionar este problema....

.mi-menu ul li a{
text-align:right;
background-image:url(../img/imagen1.gif);
background-repeat:no-repeat;
background-position:right;
}
.mi-menu ul li a:hover{
text-align:right;
background-image:url(../img/imagen2.gif);
background-repeat:no-repeat;
background-position:right;
}
Estoy usando la imagen como background para poder hacer el efecto a:hover....y se reemplaze la anterior imagen...gracias de antemano por sus aporte.

webosiris · #2 (**permalink**) 13/07/2006, 18:48

creo que se podría solucionar con la imagen de background y agregando tantos px de padding-right como px mida la imagen...

safe · #3 (**permalink**) 13/07/2006, 18:59

totalmente de acuerdo con webosiris.
Solo tenes que agregarle padding-right a los dos estados.

Código:

.mi-menu ul li a{
text-align:right;
background-image:url(../img/imagen1.gif);
background-repeat:no-repeat;
background-position:right;
padding-right:20px;
}
.mi-menu ul li a:hover{
text-align:right;
background-image:url(../img/imagen2.gif);
background-repeat:no-repeat;
background-position:right;
padding-right:20px;
}

Por otro lado, lo mejor para lograr el evento onover es usar un solo archivo de imagen con las imagenes de los dos estados y hacer el efecto cambiando la posicion de esa imagen. De esa forma evitarias el problema del retardo el efecto hasta que se cargue la segunda imagen.