Foros del Web » Creando para Internet » CSS »

texto e image de fondo se mezclan y crean caos

Estas en el tema de texto e image de fondo se mezclan y crean caos en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/07/2006, 19:24
Avatar de ChessMaster  
Fecha de Ingreso: marzo-2006
Mensajes: 39
Antigüedad: 11 años, 9 meses
Puntos: 0
texto e image de fondo se mezclan y crean caos

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.
__________________
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares! ......Tome la frase de Caricatos.:-)
  #2 (permalink)  
Antiguo 13/07/2006, 19:48
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
creo que se podría solucionar con la imagen de background y agregando tantos px de padding-right como px mida la imagen...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 13/07/2006, 19:59
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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.
__________________
oohh... quisiera ser godines!!!

Última edición por safe; 13/07/2006 a las 20:24
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 13:34.