Buenas,
estoy intentando crear una lista horizontal de imágenes pequeñas junto a un texto descriptivo a la derecha o a la izquierda de cada una de ellas. El problema es que el texto me pisa la imagen
el código que tengo es este:
Código:
<ul id="leyenda">
<li id="dolbySound">Dolby Sound</li>
<li id="teaBar">Tea Bar</li>
<li id="handicapped">Facilities for handicapped</li>
<li id="carPark">Car Park</li>
</ul>
Código:
ul#leyenda
{
border: 1px solid #000;
list-style: none;
padding-top: 10px;
margin: 0;
width: 65%;
height: auto
}
ul#leyenda li
{
float: left;
color: #777;
display: block;
padding: 0px 0px 5px 40px;
text-align: center;
text-decoration: none;
width: 35px;
}
ul#leyenda li#dolbySound{
background: transparent url(../resources/thx.JPG) no-repeat left;
}
ul#leyenda li#teaBar{
background: transparent url(../resources/bar.JPG) no-repeat left;
}
ul#leyenda li#handicapped{
background: transparent url(../resources/chair.JPG) no-repeat left;
}
ul#leyenda li#carPark{
background: transparent url(../resources/parking.gif) no-repeat left;
}
alguien sabe donde está el problema?
un saludo