[SOLUCIONADO] Menú con Imagenes

[bandolera]

Hola chicos.
Quisiera saber cómo hacer un menú con imagenes como la imagen que muestro?

Gracias.

[Triby]

No se pueden mostrar imágenes directamente desde live.com u outlook.com, necesitas subirla a un sitio como imageshack.us o similar.

[bandolera]

Iniciado por Triby

No se pueden mostrar imágenes directamente desde live.com u outlook.com, necesitas subirla a un sitio como imageshack.us o similar.

Lo siento.
Yo quería saber cómo puedo poner imagenes en un menú utilizando HTML Y CSS. Para que se vea como el menú del outlook.com
Gracias.

[pzin]

Triby se refería a que técnicamente no se puede. No se ve la imagen que has puesto. Tienes que guardarla en algún servicio te han dicho y luego publicar aquí la URL de la imagen.

[bandolera]

La imagen es esta:
Y en internet he visto algunas otras que tienen imágenes en el menú.

Creo que Joomla maneja imagenes también pero cómo insertan las imagenes en el menú?

[Triby]

Hay que crear un estilo para cada elemento del menú, cada uno con su imagen de fondo, ejemplo:

Código CSS:

/* Suponiendo que es con lista no ordenada (UL) */
#menu {
      list-style-type:none;
      margin:0;
      padding:0;
      /* Seguramente necesitarás otras propiedades como borde, etc. */
}
#menu li {
     /* Todos los li con la misma configuración */
     margin:0;
     padding:2px 5px 2px 25px; /* Mayor margen a la izquierda, para poner la imagen */
}
#menu li .configuracion { background:#fff url(ruta/nombre_imagen.gif); top left no-repeat; }
#menu li .micuenta { background:#fff url(ruta/nombre_imagen.gif); top left no-repeat; }
#menu li .facturacion { background:#fff url(ruta/nombre_imagen.gif); top left no-repeat; }
 

No es tan difícil, cierto?

[pzin]

También tienes una opción algo más avanzada, usando una fuente de iconos, para lograr la misma cosa.

Por ejemplo, vas a We Love Icon Fonts, miras a ver qué familia o familias te gustan, y luego importas la(s) que te guste(n). Por ejemplo zocial:

Código CSS:

@import url(http://weloveiconfonts.com/api/?family=zocial);
 

Creas una regla CSS:

Código CSS:

[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
 

Y en tu HTML pones los iconos:

Código HTML:

<a class="zocial-dribbble">Enlace</a>
 

[bandolera]

Iniciado por Triby

Hay que crear un estilo para cada elemento del menú, cada uno con su imagen de fondo, ejemplo:

Código CSS:

/* Suponiendo que es con lista no ordenada (UL) */
#menu {
      list-style-type:none;
      margin:0;
      padding:0;
      /* Seguramente necesitarás otras propiedades como borde, etc. */
}
#menu li {
     /* Todos los li con la misma configuración */
     margin:0;
     padding:2px 5px 2px 25px; /* Mayor margen a la izquierda, para poner la imagen */
}
#menu li .configuracion { background:#fff url(ruta/nombre_imagen.gif); top left no-repeat; }
#menu li .micuenta { background:#fff url(ruta/nombre_imagen.gif); top left no-repeat; }
#menu li .facturacion { background:#fff url(ruta/nombre_imagen.gif); top left no-repeat; }
 

No es tan difícil, cierto?

sip, no es difícil cuando se sabe cómo.
Gracias.

[bandolera]

Iniciado por pzin

También tienes una opción algo más avanzada, usando una fuente de iconos, para lograr la misma cosa.

Por ejemplo, vas a We Love Icon Fonts, miras a ver qué familia o familias te gustan, y luego importas la(s) que te guste(n). Por ejemplo zocial:

Código CSS:

@import url(http://weloveiconfonts.com/api/?family=zocial);
 

Creas una regla CSS:

Código CSS:

[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
 

Y en tu HTML pones los iconos:

Código HTML:

<a class="zocial-dribbble">Enlace</a>
 

Interesante

Gracias.
Ya tengo para practicar todo mi fin de semana.