Hjälp med html och css

Hej.

Håller på o knåpa ihop en webbsida som ni säkert redan förstått. Har dock lite problem med att få min meny att fungera som jag vill.

Har bara tagit den "nödvändigaste" koden för att ni ska förstå hur jag bygger upp det. Div-taggen "container" kan man säga är där hela sidan byggs i. Varje "current" är för just den sidan man är på, kolla css:en så förstår ni. Bilderna som används som knappar är på 110x50 pixlar.

Exempel 1:
<div id="container">

<ul>
<li id="startsida_current"><a href="index.php"></a></li>
<li id="lyssna"><a href="lyssna.php"></a></li>
<li id="information"><a href="information.php"></a></li>
</ul>
</div>

Exempel 2:
<div id="container">

<ul>
<li><a id="startsida_current" href="index.php"></li>
<li><a id="lyssna" href="lyssna.php"></li>
<li><a id="information" href="information.php"></li>
</ul>
</div>

Det här är en del av scc:en. Tar alltså bara med en av taggarna för knapparna då den enda skillnaden hos de andra (typ) är att margin är "margin: 0 220px", "margin: 0 330px" osv, och den koden ni behöver för att förstå resten.

body{
position:relative;
background-color: #202020;
}

div#container{
margin:0 auto;
width:700px;
}

#startsida{
background-image:url(bilder/knapp_startsida.png);
margin: 0 0px;
position:absolute;
width:110px;
height:50px;
}
#startsida:hover{
background-image:url(bilder/knapp_startsida_hover.png);
}
#startsida_current{
background-image:url(bilder/knapp_startsida.png);
margin: 5px 0px;
position:absolute;
width:110px;
height:50px;
}
#startsida_current:hover{
background-image:url(bilder/knapp_startsida_hover.png);
}

Den enda gången då det fungerar som jag vill är när jag skriver följande:

<li><a href="index.php"><div id="startsida_current"></div></a></li>
<li><a href="lyssna.php"><div id="lyssna_"></div></a></li>
<li><a href="information.php"><div id="information"></div></a></li>

Men jag vill ju inte använda en div-tagg till varje menyknapp.

Skulle uppskatta om någon kunde hjälpa mig lite, och även komma med förslag på en förenkling av css och html-kodningen.

#menu ul, #menu ul li {
margin:0;
padding:0;
}

#menu ul li {
float:left;
display:inline;
width:110px;
height:50px;
}

/* Alternativt att du buntar ihop dem */
#startsida, #information, #lyssna {
float:left;
display:inline;
width:110px;
height:50px;
}

/* Varpå du ändrar bakgrundsbild för dina olika id:n */
#startsida{
background-image:url(...);
}
#information{
background-image:url(...);
}

Tack, ska prova det sen när jag får tid.

De här sidorna kan ni kolla layouten på:
Startsida
Lyssna
Information

Så som dem är nu är ju helt skumt som sagt, de är långt ifrån klara.