LI und Grafix richtig ausrichten

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

Also so sieht sie aus
http://img3.imagebanana.com/img/flw9qeef/Zwischenablage02.png

So soll sie aussehen
http://img3.imagebanana.com/img/7xi0qhj1/Zwischenablage02.png

HTML Code

[code]

  • Home
  • Board
  • Downloads
  • Kontakt
  • Impressum
[/code][B]CSS Code[/B] [html]#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; }[/html]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.

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

  • sondern über definieren. Die Höhenangabe in
  • halte ich für ungünstig.
    Besser währe keine height-Angabe und dafür padding-top und padding-bottom für
    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.