LI und Grafix richtig ausrichten

[Kemikal]

Hallo ich mache grade ein Design bin auch fast fertig aber die navi damit habe ich mal wida problem

Also so sieht sie aus

So soll sie aussehen

HTML Code

<div id="navi_head"><div id="navi">
    <ul>
      <li>Home</li>
      <li>Board</li>
      <li>Downloads</li>
      <li>Kontakt</li>
      <li>Impressum</li>
    </ul>
     </div>
  </div>

CSS Code

#navi li {
    background-image:url(../image/nav_button.png);
    height:43px;
    width:197px;
    display:block;
    font-size:15px;
    text-align:center;
    font-weight:bold;
    margin-top:5px;
    font-variant:small-caps;
}
#navi_head {
    background-image:url(../image/navi_head.png);
    width:197px;
    height:47px;
    float:right;
    margin-right:12px;
}

Die Schrift auf denn Buttons muss noch ein stück runter weil sie so einfach zu hoch ist und ja das soll am ende halt wie auf dem 2ten Picture aussehen.

Ich hoffe jemand kann mir helfen wie ich das richten kann.

 

[neuroleptika]

Die Abstände der Liste solltest du erstmal auf null stellen:

  #navi ul {
list-style: none;
margin: 0;
padding: 0;
}

Die Hintergrund-Garfik und die Textgestaltung solltest du nicht über <li> sondern über <a> definieren. Die Höhenangabe in <li> halte ich für ungünstig.
Besser währe keine height-Angabe und dafür padding-top und padding-bottom für <a> angeben. Damit lässt sich der Text einfach ausrichten und die Navigation kann sich je nach Schriftgröße anpassen. Vorausgesetzt, die Grafiken haben in ihrer Höhe Reserven.