Need some help with code

Hi guys.
I'm having a problem placing 3 text links over an image.
I found a code for it but it doesn't work.
I'm not familiar with CSS at all.
Here is how it looks now (the image is missing now, only the links are showing:Rings, Earrings, Pendants)
www.belljewels.com
The 3 images in that row are placed in a table.
Could you please let me know what I'm doing wrong.
Thank you.
Here is a code I'm using:

<div style="padding: 0px 0px 0px 0px; float: left;">
<img src="boxes.gif">
<div style="padding: 0px 0px 0px 0px; float: right"><A href="http://www.belljewels.com/Products-Gemstone_Rings.html">Rings</a></div><br clear="all">
<div style="padding: 0px 0px 0px 0px; float: right"><A href="http://www.belljewels.com/Products-Earrings.html">Earings</a></div><br clear="all">
<div style="padding: 0px 0px 0px 0px; float: right"><A href="http://www.belljewels.com/Products-Necklaces.html">Pendants</a></div><br clear="all">
</div>

 

What's <br clear="all">?

Do you mean <br style="clear: both;">

?

 

You're making this harder than it has to be. Make a div the width and height of your image.

<div style="width: 100px; height: 100px;"></div>

Give it a background style:

<div style="width: 100px; height: 100px; background-image: url('./gfx/myimage.png');"></div>

Then, inside the div type your text:

<div style="width: 100px; height: 100px; background-image: url('./gfx/myimage.png');">
<a href="link.html">Link</a>
<a href="link.html">Link</a>
<a href="link.html">Link</a>
</div>

If you want the links to center, put text-align: center in your div tag.