horizontale liste mit bildern...

[milu]

hallo,

ich versuche gerade ein horizontale liste zu erstellen. die liste soll oberhalb für jedes listelement ein bild anzeigen. das funktioniert leider nicht so richtig. die angezeigten bilder sind nicht bündig mit den unteren elementen der liste. des weiteren würde ich sie gerne anklickbar machen wollen. ich wäre sehr dankbar für hilfe...

anbei der verwendete code:

<ul id="navlist">                    <li>
<img width=140px src=Bild1.gif/> <a href="#">Auswahl-1</a>
</li>
<li>
<img width=140px src=Bild2.gif/> <a href="#">Auswahl-2</a>
</li>
<li>
<img width=140px src=Bild3.gif/> <a href="#">Auswahl-3</a>
</li>
<li>
<img width=140px src=Bild4.gif/> <a href="#">Auswahl-4</a>
</li>
</ul>

#navlist li
{
 display: inline;
 list-style-type: none;
}

#navlist a
{
 width: 140px;
 float:left;
 text-align:center;
}

#navlist a:img
{
 width: 140px;
 float:left;
 text-align:center;
}

ul#navlist
{
 margin-left: 0;
 padding-left: 0;
 white-space: nowrap;
}

#navlist a:link
{
 background-color: #f2f2f2;
}

vielen dank

mfg. milu