background en los elementos a

naitmeir · #1 (**permalink**) 19/06/2009, 03:17

Buenas, quiero hacer el tipico menu q cuando pasas el raton por encima cambia el fondo ...

Para ello la intencion es dentro de la lista poner a los elementos a el una imagen de fondo, por ejemplo...

Código PHP:

  a{ 
     background:             url(../img/menu_act.png)170px -5px no-repeat; 
}

Pero que pasa.. que solo la pone hasta donde llege el tamaño del enlace si es una palabra corta ya no sale... lo he intentado poniendo width en el elmento a y en li y tampoco ... dejo todo el codigo.

Código PHP:

  #page .menu li{ 
    margin-bottom:          15px; 
} 
#page .menu li a{ 
    color:                         gray; 
    font-weight:              800; 
    width:                       180px; 
    background:              url(../img/menu_off.png)170px -5px no-repeat; 
} 
#page .menu a:hover{ 
    color:                         #749F33;  
     background:             url(../img/menu_on.png)170px -5px no-repeat; 
}

Un saludo y gracias de antemano

hades87 · #2 (**permalink**) 19/06/2009, 03:34

a #page .menu li a añadele un display:block y ya te quedará todo bien, de todas formas aquí tienes una guía que te ayudará

w0rldart · #3 (**permalink**) 19/06/2009, 03:42

Yo estaria mas por combinarlo con jquery, porque asi te sale un cacho menu que cambia de fondo al pasar el raton, pero con efectos y tal :)

hades87 · #4 (**permalink**) 19/06/2009, 03:58

no hace falta usar jquery para un menú así de simple, lo recarga mucho y la gente puede tener js deshabilitado

w0rldart · #5 (**permalink**) 19/06/2009, 04:09

Ya ya, pero yo digo utilizar jquery si quieres algo bonito

naitmeir · #6 (**permalink**) 19/06/2009, 04:35

No quiero algo bonito, quiero algo libiano y funcional. Si quiero ver algo bonito pongo Katie Price Jordan ( por decir algo ) en Google y listos xDDD jojojojo no te lo tomes mal! un saludo!

Por cierto ya esta arreglado el menu. Merci!

naitmeir · #7 (**permalink**) 19/06/2009, 11:37

No esta totalmente arreglado, funciona en todos los navegadores excepto en IE explorer para no perder la costumbre... no se ve ninguna imagen de fondo en la lista...

kseso? · #8 (**permalink**) 19/06/2009, 12:25

Añade a

Código css:

Ver original#page .menu ul li a {display: block; padding:Xpx;}

y si necesitas corregir la posición del fondo la declaración sería:

Código css:

Ver original"background: url(tu_ruta.jpg) no-repeat left top;

puedes cambiar los valores "left top" por px. Pero el punto de referencia (0 0) es la esquina superior izquierda)

Un saludo

naitmeir · #9 (**permalink**) 19/06/2009, 12:45

Pues va a ser que me sigue sin ir en IE, funciona igualmente de este modo con todos los navegadores excepto IE...

elpepadetodos · #10 (**permalink**) 19/06/2009, 13:04

pues en html seria

<body background="ejemplo de ordenador">

pero yo no se casi nada de php

kseso? · #11 (**permalink**) 19/06/2009, 13:13

mira a ver si esto te sirve de guía, cambio de imagen de los enlaces (aparte de otras cosillas) combinado con un sprite (un sólo archivo jpg con las distintas imágenes)
En código css está en el head

jomaruro · #12 (**permalink**) 20/06/2009, 01:51

Hola:

Pásate por la página de Mikmoro y revisa estos ejemplos, todos funcionan en todos los navegadores.

Saludos.