Foros del Web » Creando para Internet » CSS »

Background en listas con un menu contextual

Estas en el tema de Background en listas con un menu contextual en el foro de CSS en Foros del Web. Hola! Estoy haciendo un menu contextual (tras hacer click en el boton derecho se muestra el menu), y me gustaria darle un estilo similar a ...
  #1 (permalink)  
Antiguo 05/03/2007, 03:32
 
Fecha de Ingreso: julio-2003
Mensajes: 141
Antigüedad: 14 años, 5 meses
Puntos: 5
Background en listas con un menu contextual

Hola!
Estoy haciendo un menu contextual (tras hacer click en el boton derecho se muestra el menu), y me gustaria darle un estilo similar a este:



Fijaos que el menu tiene dos columnas, una donde estan las imagenes (Features, Documentation, ...) y otra donde aparecen los textos ...
De momento quiero buscar una solucion utilizando listas, no quiero maquetar con tablas, pero no consigo que la columna para los iconos, mantenga un fondo uniforme sin notarse un espacio en blanco entre "li".
Código HTML:
<style type="text/css">
  #menu { list-style: none; margin: 0; padding: 0 }
  #menu li { background-image: url ( fondo_x.gif);
  #menu a { text-decoration: none; }
</style>

<ul id="menu">
  <li><img src="icono1.gif" alt="" /><a href="" title="">Texto 1</a></li>
  <li><img src="icono2.gif" alt="" /><a href="" title="">Texto 2</a></li>
  <li><img src="icono3.gif" alt="" /><a href="" title="">Texto 3</a></li>
</ul> 
¿Alguna idea al respecto de como conseguir ese estilo?
Lo unico que consigo es o bien esto (se me repite la imagena lo largo de todo el "li"):


O bien se nota los saltos entre los "li":



Saludos!
  #2 (permalink)  
Antiguo 05/03/2007, 04:08
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
Re: Background en listas con un menu contextual

Hola, Daca.
Te felicito: una pregunta muy bien planteada.

Podrías probar a añadir a tu selector "#menu li" la propiedad "background-repeat: repeat-y;"

#menu li { background-image: url(fondo_x.gif);
background-repeat: repeat-y;
}

A ver si te sirve.

Mikel.
  #3 (permalink)  
Antiguo 05/03/2007, 04:41
 
Fecha de Ingreso: julio-2003
Mensajes: 141
Antigüedad: 14 años, 5 meses
Puntos: 5
Re: Background en listas con un menu contextual

Hola Mikmoro !
Gracias por decir que plantee bien la pregunta, una imagen vale mas que mil palabras ¿no? ...

Respecto a tu solución, decir que si funcionó, aunque yo ya probé esa opción pero no sirvió en su momento, de todas formas seguro que la aplique mal.
Gracias, y ahora adjunto como queda el tema.

Código HTML:
<style type="text/css"> 
  #menu { list-style: none; margin: 0; padding: 0 } 
  #menu li { 
      background-image: url ( fondo_x.gif);  background-repeat: repeat-y; 
      padding: 4px; 
  }
  #menu a { text-decoration: none; margin-left: 2%; }
  .imagen_left { margin-left: 1%; vertical-align: middle; }
</style> 

<ul id="menu"> 
  <li><img class="imagen_left" src="icono1.gif" alt="" /><a href="" title="">Texto 1</a></li>
  <li><img class="imagen_left" src="icono2.gif" alt="" /><a href="" title="">Texto 2</a></li>
  <li><img class="imagen_left" src="icono3.gif" alt="" /><a href="" title="">Texto 3</a></li> 
</ul> 
Firefox:


I.Explorer (version 6)


Saludos!

Última edición por Daca; 05/03/2007 a las 07:54
  #4 (permalink)  
Antiguo 05/03/2007, 05:01
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
Re: Background en listas con un menu contextual

Sí, si lo habías probado y no funcionaba y ahora sí, algo estaba mal

Podrías probar con esto:

#menu li img { position: relative;
top: 6px;
}

A ver si te sirve.

Mikel.
  #5 (permalink)  
Antiguo 05/03/2007, 05:06
 
Fecha de Ingreso: julio-2003
Mensajes: 141
Antigüedad: 14 años, 5 meses
Puntos: 5
Re: Background en listas con un menu contextual

Gracias Mikmoro, pero parece que respondimos a la vez, mira la solucion que dí ...

Saludos!
  #6 (permalink)  
Antiguo 05/03/2007, 05:22
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
Re: Background en listas con un menu contextual

Ah, pues también, perfectamente válida.

Me alegro de que te funcione bien. Hasta la vista.

Mikel.
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 03:56.