Navigacijos išdėstymas

Sveiki turiu tokį puslapio header'į (schematinis brėžinys): http://xes.lt/di-KEFJ.jpg

Html'e navigaviją apsirašiau taip:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
</ul>

Tada apsibrėžiau 'li' tag'o aukštį, plotį, įsikėliau fono paveikslėlį(apibraukta geltonai), nusistačiau jo poziciją ir t.t. Bet nelabai gaunasi padaryti, kad link'us(home,home,home) rodytų tos knopkės viduryje. Kaip reikėtų css faile kreiptis, kad žodis "home" būtų mygtuko viduryje?

Aš bandau rašyti:

ul li{
 padding: x1 x2 x3 x4;
}

bet nelabai gaunasi.

Ne i tema seip bet, o ne paprasciau nupiesti butu mygtuka?

naudok div id ir jame sukurk class pwz div id mygtukas' div class patsuzrasas

Ne i tema seip bet, o ne paprasciau nupiesti butu mygtuka?

taip vyko prieš 5 metus viskas. Dabar taupant kliento resursus ir optimizuojant kodą vengiama naudoti paveiksliukus ir jeigu įmanoma padaryti su CSS viskas daroma su CSS.