Foros del Web » Creando para Internet » CSS »

Problema con las imágenes de un menu

Estas en el tema de Problema con las imágenes de un menu en el foro de CSS en Foros del Web. Hola, tengo un problema con un menu. Os cuento lo que me ocurre: Tengo un menu al que le pongo las siguientes imagenes: - Una ...
  #1 (permalink)  
Antiguo 04/07/2009, 14:37
 
Fecha de Ingreso: abril-2009
Mensajes: 66
Antigüedad: 8 años, 7 meses
Puntos: 0
Mensaje Problema con las imágenes de un menu

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
  #2 (permalink)  
Antiguo 04/07/2009, 15:55
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problema con las imágenes de un menu

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.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 04/07/2009, 16:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con las imágenes de un menu

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.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 04/07/2009, 17:31
 
Fecha de Ingreso: abril-2009
Mensajes: 66
Antigüedad: 8 años, 7 meses
Puntos: 0
Mensaje Respuesta: Problema con las imágenes de un menu

Hola, gracias a los dos por contestar.

Cita:
Iniciado por hades87 Ver Mensaje
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.


Cita:
Iniciado por Mikmoro Ver Mensaje
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.
  #5 (permalink)  
Antiguo 04/07/2009, 17:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con las imágenes de un menu

Pero... ¿has mirado el ejemplo que te he puesto? es que es exactamente eso. ¿No te ha parecido y has pasado?
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 04/07/2009, 17:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con las imágenes de un menu

Si tienes esto:
Cita:
<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.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 04/07/2009, 17:52
 
Fecha de Ingreso: abril-2009
Mensajes: 66
Antigüedad: 8 años, 7 meses
Puntos: 0
De acuerdo Respuesta: Problema con las imágenes de un menu

Cita:
Iniciado por Mikmoro Ver Mensaje
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
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 08:03.