Menu bar aligning

[Astroo]

I am placing my menu graphics but having issues. How the menu is supposed to look like is the current page button should partially overlap a rectangular bar and the other buttons of the other pages will sit in the background slightly overlapped by the rectangular bar. The alignment at the moment is no where near that. I'm not sure if the way I'm attempting to code it is correct or not. I'm using <div style="fixcenter"> in the header and </div> in the footer to keep my page centered on the page and I have my menu graphics set to position:relative; so it will fallow along with the page too. Is there a better way of trying to do this? Link to the page Here.

 

I'm using STSv4.5.8 for designing and i'm placing this code in the sts_template.html file.

 

<div id="Earringsbtn" style="position:relative; left:220px; top:32px; width:126px; height:90; z-index:2;"><img src="images/Earrings_btn.png" width="124" height="127"></div>
<div id="Menubar" style="position:relative; left:70px; top:18px; width:975px; height:50; z-index:3"><img src="images/menubar.png" width="1010" height="54"></div>
<div id="Home" style="position:relative; left:91px; top:32px; width:104px; height:90; z-index:4"><img src="images/Home_btn.png" width="128" height="116" id="Earrings"></div>
<div id="Chinese" style="position:relative; left:350px; top:32px; width:101px; height:90; z-index:2"><img src="images/ChinesePendants_btn.png" width="128" height="131"></div>
<div id="Chains" style="position:relative; left:479px; top:32px; width:102px; height:90; z-index:2"><img src="images/Chains_btn.png" width="115" height="128"></div>
<div id="Braclets" style="position:relative; left:602px; top:32px; width:115px; height:90; z-index:2"><img src="images/Braclets_btn.png" width="117" height="113"></div>
<div id="Pendants" style="position:relative; left:726px; top:32px; width:114px; height:90; z-index:2"><img src="images/StonePendants_btn.png" width="114" height="114"></div>
<div id="Necklaces" style="position:relative; left:841px; top:32px; width:101px; height:90; z-index:2"><img src="images/Necklaces_btn.png" width="116" height="116"></div>
<div id="JewleryAccessories" style="position:relative; left:32px; top:31px; width:0px; height:110; z-index:2"><img src="images/JewelryAccessories_btn.png" width="120" height="117"></div>

[Astroo]

Ok, I figured out how to do it without pushing everthing on my page down. To get everything lined up I changed the height and width to zero, then changed the Top so everything lines up evenly and changed the left until they were spaced properly. I found I had to have the height and width set to zero so the rest of my page objects aren't pushed down.