Foros del Web » Creando para Internet » CSS »

lista horizontal con imagenes

Estas en el tema de lista horizontal con imagenes en el foro de CSS en Foros del Web. Hola, vereis estoy hciendo una lista para que un menu sea accesible.....bien la lista seria con un icono y debajo el texto que deribe el ...
  #1 (permalink)  
Antiguo 22/10/2010, 06:21
 
Fecha de Ingreso: octubre-2004
Mensajes: 230
Antigüedad: 13 años, 1 mes
Puntos: 0
lista horizontal con imagenes

Hola, vereis estoy hciendo una lista para que un menu sea accesible.....bien la lista seria con un icono y debajo el texto que deribe el icono pero no sabría como hacer para que cada <li> item </li> tuviese una imagen distinta y ademas se posicione encima del texto del <li> y tanto pinchandole a la imagen como al texto me vaya al enlace.....a ver si alguien me puede dar alguna pista.
Gracias
  #2 (permalink)  
Antiguo 22/10/2010, 09:13
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: lista horizontal con imagenes

Hola javihb

Tu problema lo podrías solucionar de dos maneras. Las dos te van a costar el mismo tiempo y esfuerzo, así que lo dejo a tu elección.

La primera es construir la lista englobando las imagenes dentro del enlace en la lista y mediante CSS darles un display block. De esta manera todos los caracteres irían a continuación y podrías pinchar tanto en la imagen como texto para ir al enlace. La ventaja de este es que no tendrías que especificar un ancho y alto para cada enlace y así este podría crecer lo necesario dependiendo de la imagen que tú definas. En cambio, se podrán seleccionar las imágenes en el navegador.

El HTML sería el siguiente:
Código:
<ul id="menu">
    <li><a href="enlace1.html" title=""><img src="enlace-a-imagen" alt="descripcion" /> Enlace 1</a></li>
    <li><a href="enlace2.html" title=""><img src="enlace-a-imagen" alt="descripcion" /> Enlace 2</a></li>
    <li><a href="enlace3.html" title=""><img src="enlace-a-imagen" alt="descripcion" /> Enlace 3</a></li>
<ul>
El CSS sería:
Código:
#menu li
{
    display: inline;
}

#menu li img
{
    display: block;
}

La segunda solución sería de, mediante CSS, darle a cada enlace un ancho y alto definido y padding superior, de manera que pudieramos situar en el espacio sobrante la imagen como fondo. El único inconveniente de este método es que tendríamos que definir un id o clase en CSS para cada uno de los elementos del menú, además de los problemas que nos pudieran causar el tener que definir el ancho y alto de cada uno de ellos (aunque el HTML te quedaría mucho más limpio)

El HTML para la segunda opción:
Código:
<ul id="menu">
    <li><a id="enlace1" href="enlace1.html" title="">Enlace 1</a></li>
    <li><a id="enlace2" href="enlace2.html" title="">Enlace 2</a></li>
    <li><a id="enlace3" href="enlace3.html" title="">Enlace 3</a></li>
</ul>

El CSS sería:
Código:
#menu li
{
    display: inline;
}

#menu li a
{
    display: block;
    height: 20px;
    padding-top: 80px; /* Espacio para la imagen */
    width: 100px;
}

#enlace1 { background: transparent url('url-a-imagen.jpg') no-repeat top left; }
#enlace2 { background: transparent url('url-a-imagen.jpg') no-repeat top left; }
#enlace3 { background: transparent url('url-a-imagen.jpg') no-repeat top left; }

Espero que te haya servido de ayuda,
  #3 (permalink)  
Antiguo 13/04/2011, 03:55
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 7 años
Puntos: 4
Exclamación Respuesta: lista horizontal con imagenes

Hola, me han recomendado que haga la pregunta en el foro css, a ver si me aclaro

Tengo un problema con las lista que contienen imágenes con enlaces, y debajo las imágenes un texto.

En el siguiente enlace veréis que la lista me funciona correctamente en Safari, FireFox, Chrome, Opera y Internet Explorer 8. PERO NO ME FUNCIONA CORRECTAMENTE CON LA VERSIÓN 9 DE INTERNET EXPLORER. En IE9 me salen las imágenes y el texto desordenado y sin sentido.

Podéis comprovarlo en este enlace:

http://s310876771.mialojamiento.es/p...ta_design.html

En los espacios vacíos para llenar el hueco he tenido que meter una imagen del mismo color del fondo, se que esto no es muy correcto...Por eso me gustaría primero de todo que se pueda visualizar correctamente con IE9, y si puede ser crear esta lista de forma más correcta y semántica pues mucho mejor.

Creo que la manera que nos has explicado dargog es mucho más correcta y semántica, pero no sé si se puede aplicar a lo que yo quiero hacer. La verdad es que he provado de hacerlo de las dos maneras, pero no me han salido bien ninguna de las dos, puede ser que no haya aplicado todo correctamente.

En la primera solución que nos ha dado dargog me salen las imágenes de las puertas y el texto en vertical, y lo he puesto igual que su ejemplo.

En el segundo ejemplo que nos ha dicho dargog las imágenes no me salen, están invisibles, pero al poner el ratón encima puedo hacer clic a la imagen para verla en más resolución.

Mi código que no me funciona correctamente con IE9 es el siguiente:

Código HTML:
Ver original
  1. <ul class="imatges">
  2.         <li><a href="../imatges/vita%20design/square/MM-MR-M1-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-BL-NG_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  3.         <li><a href="../imatges/vita%20design/square/MM-MR-M1-BM-NE_RGB_600_lienzo.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-BM-NE_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  4.         <li><a href="../imatges/vita%20design/square/MM-MR-M1-RO-GR_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-RO-GR_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  5.         <li><a href="../imatges/vita%20design/square/MM-MR-M1-WM-MR_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-WM-MR_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  6.         <li><img src="../imatges/fafafa.png" alt="" width="120" height="255" /></li>
  7.         <li><div class="material2">SQUARE M1</div></li>
  8.         <li><div class="material2">SQUARE M1</div></li>
  9.         <li><div class="material2">SQUARE M1</div></li>
  10.         <li><div class="material2">SQUARE M1</div></li>
  11.         <li><div class="material2"><img src="../imatges/fafafa.png" alt="" width="1" height="1" /></div></li>
  12.         <li><a href="../imatges/vita%20design/square/MM-MR-M2-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M2-BL-NG_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
  13.         <li><a href="../imatges/vita%20design/square/MM-MR-M2-GR-CC_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M2-GR-CC_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
  14.         <li><a href="../imatges/vita%20design/square/MM-MR-M2-NCR-CN_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M2-NCR-CN_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
  15.         <li><img src="../imatges/fafafa.png" alt="" width="120" height="255"/></li>
  16.         <li><img src="../imatges/fafafa.png" alt="" width="120" height="255"/></li>
  17.         <li><div class="material2">SQUARE M2</div></li>
  18.         <li><div class="material2">SQUARE M2</div></li>
  19.         <li><div class="material2">SQUARE M2</div></li>
  20.         <li><div class="material2"><img src="../imatges/fafafa.png" alt="" width="1" height="1" /></div></li>
  21.         <li><div class="material2"><img src="../imatges/fafafa.png" alt="" width="1" height="1" /></div></li>
  22.         <li><a href="../imatges/vita%20design/square/MM-MR-M3-BL-BC-BO-GR_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M3-BL-BC-BO-GR_RGB_120.jpg" alt="porta vita design square M3" width="120" height="255"/></a></li>
  23.         <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M1-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-NPAD-M1-BL-NG_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  24.         <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M2-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-NPAD-M2-BL-NG_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
  25.         <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M2-GR-CC_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-NPAD-M2-GR-CC_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
  26.         <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M1-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-PAD-M1-BL_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  27.         <li><div class="material2">SQUARE M3</div></li>
  28.         <li><div class="material2">SQUARE M1 VIDRE</div></li>
  29.         <li><div class="material2">SQUARE M2 VIDRE</div></li>
  30.         <li><div class="material2">SQUARE M2 VIDRE</div></li>
  31.         <li><div class="material2">SQUARE M10</div></li>
  32.    
  33.     </ul>

Código CSS:
Ver original
  1. ul.imatges  {
  2.     width: 750px;
  3.     list-style: none;
  4. }
  5.  
  6. .imatges li {
  7.     margin-right: 19px;
  8.     display: inline;
  9.     width: 120px;
  10.     float: left;
  11. }
  12.  
  13. .material2 {
  14.     font-variant: normal;
  15.     font-size: 11.5px;
  16.     text-align: left;
  17.     width: 119px;
  18.     margin-right: 21px;
  19.     float: left;
  20.     font-family: Tahoma, Verdana, "Sans Serif";
  21.     margin-bottom: 25px;
  22.     display: block;
  23. }

Qué puedo hacer para que en IE9 se me vea como el resto de navegadores?

Qué me recomendáis para hacer este tipo de listas?


Gracias de antemano

Etiquetas: horizontal, imagenes, lista
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 09:50.