Problema con las imágenes de un menu

[Leunamal]

Hola, tengo un problema con un menu. Os cuento lo que me ocurre:

Tengo un menu al que le pongo las siguientes imagenes:
- Una imagen lateral que va a la izquierda de la primera opción (redondeada) y es con la que tengo problemas.
- Un imagen central para cada opción que hace de relleno (Esta imagen es la que se repite con repeat-x).
- Otra imagen para separar una opción de otra.
- La imagen lateral derecha.

Bien, el problema que tengo es que antes tal como tenia el código puesto, pues al poner el ratón encima de la primera opción "se iluminaba" con hover, pero la imagen de la izquierda no. Por ello cambie el código html:

Código:

<div id="menu-pcpal">
  <ul>
    <li id="op-primera"><div id="mpcpal-centro"><a href="#"><div id="mpcpal-izq">Inicio</div></a></div></li>
    <li id="op"><div id ="mpcpal-centro"><a href="#">Método Gráfico</a></div></li>
...
</ul>
</div>

He puesto el div con el fondo del margen izquierdo del menu dentro de la etiqueta "a" para que cuando el ratón se situe encima se ilumine tambien esa parte.

El codigo css es el siguiente:

Código:

#menu-pcpal #op-primera a { 
	background: url(../../img/menu-pcpal/menu-pcpal-centro.png) repeat-x center;
	amargin-left: 16px; /* Permite visualizar el borde redondeado de la izquierda. */
	padding-left: 0px;
	padding-right:30px;
	margin-right:3px;
}

#mpcpal-izq{
	background: url(../../img/menu-pcpal/menu-pcpal-bordeizq.png) no-repeat left;
	padding-left: 30px;
}

El problema es que actualmente, se me pone el borde izquierdo a la vez que la imagen "menu-pcpal-centro.png" ya que esa es la imagen del "a" y el div del margen izquierdo está dentro de la etiqueta "a".

En la imagen siguiente se puede ver que sucede:
[IMG]h ttp://img4.imageshack.us/img4/5919/problemamenu.jpg[/IMG]

¿Alguien sabría como solucionarlo? Ahora mismo estoy probando con distintas combinaciones de padding y margin, a ver si consigo hacerlo.

Un saludo

[hades87]

Te recomendaría estos 2 tutoriales:

http://www.cristalab.com/tutoriales/...-listas-c130l/
http://www.cristalab.com/tips/menu-c...rites-c65689l/

Por que creo que andas algo liado, aún que lo que intentas hacer podrías usar tambien imágenes con el fondo transparente.

[Mikmoro]

Mira cómo está hecho esto (pasa el ratón por las opciones).
Sólo para que veas que la técnica es que el lateral izquierdo es el fondo del enlace, y dentro lleva un span con el resto.

[Leunamal]

Hola, gracias a los dos por contestar.

Iniciado por hades87

Te recomendaría estos 2 tutoriales:

Por que creo que andas algo liado, aún que lo que intentas hacer podrías usar tambien imágenes con el fondo transparente.

Estoy liado, pero porque no he encontrado aun algun ejemplo donde suceda lo mismo. Los tutoriales estan muy bien, pero no se ajustan a mi caso.

Iniciado por Mikmoro

Mira cómo está hecho (pasa el ratón por las opciones).
Sólo para que veas que la técnica es que el lateral izquierdo es el fondo del enlace, y dentro lleva un span con el resto.

Debí haber subido las imagenes para que viesen como son:

Borde izquierdo:

Código:

h ttp://img158.imageshack.us/img158/5019/menupcpalbordeizq.png

Centro:

Código:

h ttp://img197.imageshack.us/img197/7936/menupcpalcentro.png

Puse las imagenes de esa forma para que los botones pudiesen tener cualquier ancho.

Para que se viese bien el contenido de la etiqueta a hice esto:

Código:

 <li id="op-primera"><div id="mpcpal-centro"><a href="#"><div id="mpcpal-izq"></div><div id="enlace">Inicio</div></a></div></li>

Se ven bien por defecto, sin embargo, si pongo el ratón encima de la opción izquierda el contenido de enlace cambia de estado, pero lo otro no. Pero si pongo el ratón encima del borde izquierda este se modifica.

Lo ideal es que al poner el ratón encima de a se modificase los dos divs que estan dentro, pero al haber 2 imagenes, solo se modifica una.

¿Habría alguna manera para hacer que cambie otro elemento (a parte de la etiqueta donde está el ratón) cuando se pone el ratón encima de una etiqueta?

Un saludo, y gracias por ayudar.

[Mikmoro]

Pero... ¿has mirado el ejemplo que te he puesto? es que es exactamente eso. ¿No te ha parecido y has pasado?

[Mikmoro]

Si tienes esto:

<li id="op-primera"><div id="mpcpal-centro"><a href="#"> <div id="mpcpal-izq"></div> <div id="enlace">Inicio</div></a></div></li>

tu selector deberá ser:

a:hover #mpcpal-izq, a:hover #enlace {... lo que sea}

y cambiarán a la vez.

[Leunamal]

Iniciado por Mikmoro

Pero... ¿has mirado el ejemplo que te he puesto? es que es exactamente eso. ¿No te ha parecido y has pasado?

Hola Mikmoro. Ahora mismo acabo de revisar bien el ejemplo. He editado mi código siguendo el ejemplo y funciona perfecto. Pensaba que las opciones de esa menu eran tan solo 1 imagen y no 2, me despistó que estuviesen separadas. Mil disculpas por no haberlo visto bien a la primera.

Ahora mismo me pondré con el lado derecho y listo :). No sé porque no se me ocurrió antes poner como fondo del enlace a que era realmente lo que más problema daba al cambiar.

Gracias de nuevo por ayudarme.

Saludos