I have some pictures with a H1 tag right below them. Heres my code:

#buttons
{
    background: url(images/bg.gif) repeat-y center;
    margin: -1% auto 0 0;
}
/*the -1% was added because of a 4px gap in between header and the buttons; */

h1
{
    font: 20px/5px "Times New Roman", Georgia, serif;
    text-align: center;
    padding-top: 3%;
    margin-bottom: 7%;
    backgound: url(images/bg.gif) repeat-y center;
}

<div id="buttons">
                <img src="http://www.webmaster-talk.com/images/nav-home.gif" alt="home" />
                <a href="legacy.htm"><img src="http://www.webmaster-talk.com/images/nav-legacy.gif" alt="legacy" /></a>
                <a href="downloads.htm"><img src="http://www.webmaster-talk.com/images/nav-downloads.gif" alt="downloads" /></a>
                <a href="contact.htm"><img src="http://www.webmaster-talk.com/images/nav-contact.gif" alt="contact" /></a>
            </div>
        </div>
        <div id="content">
            <h1>The Voice of Calvary Legacy</h1>

the H1 is getting covered up. I tried the z-index and it didn't work. Help!!!
Thanks,
Carter

if it helps, here's the link voice of calvary legacy

Try putting this as part of your h1 CSS:

position: relative;
top: 2px;

I don't like relative positioning. But I figured it out. I put the h1 tag outside of my div. Thanks for trying. That would have worked I just don't like relative positioning.
Carter

Why not? If used properly, they are quite a relief and an eye-opener in your approach to build a website.

I agree but for this purpose, it wouldn't be good choice in my humble opinion. Sorry if I was mean.