22/10/2010, 05:21
| |||
| |||
| 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 |
|
22/10/2010, 08:13
| ||||
| ||||
| 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:
El CSS sería:<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>
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, |
|
13/04/2011, 02:55
| ||||
| ||||
 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
Código CSS:
Ver original 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: |
