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,