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

[Thiemo]

Ich weiß nicht genau, wie es am Ende aussehen soll, aber vielleicht hilft dir das weiter. Dein Fehler war unter anderem, dass du mehrere floats ineinander verschachtelt hast.

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

#navlist li
{
 float: left;
 list-style-type: none;
 margin: 0 1em 0 0;
 width: 140px;
}

#navlist a
{
 display: block;
}

#navlist a img
{
 display: block;
}

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

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