I inserted the following code at Inserts:

div#menu1 ul.rMenu {
position: relative;
top: -40px;
}

I succeeded in moving the menu bar onto the Header Image - but now there's a space between the header and the body... what am I missing?

I suggest you go read about CSS Positioning

Thanks. Will do! Bookmarked.

OK... I'm clearly a CSS newbie... but I'm guessing that the problem has to do with position. If I set it to "relative", I can get the buttons in the right place, but there's still space between the header image and the body. The space goes away if I change the position to "fixed" or "absolute", but then the buttons don't stay in the right place when I resize.

You shouldn't need positioning for this. Without a link to the site it's impossible to troubleshoot, but I imagine you have extraneous padding or margins. I'd use Firebug to check it out.

if you are going to be playing with positioning, I suggest using a fixed width layout.

It is fixed width. I guess where I'm having the learning problem is that I don't completely understand in this situation what relative positioning is relative to.

I have an image that I'm using as the header, and want the menu buttons to appear on the image. I was able to accomplish this by making the background transparent and moving the position of the menu up - but when I do this, a space persists between the image and rest of the content.

If I change from "relative", the space disappears, but the text position changes depending on the size of my browser window.

instead of using top, try playing with margin-top

We've discussed via PM but for the benefit of future readers here are the things we've talked about trying:

- trying bottom padding on the menu
- slicing the header image horizontally so that you are using one slice as the menu background and another as the header, with no space between

(those are separate suggestions, by the way)

margin-top! Did it! Thanks!!!

(I have so much to learn)

and thanks also very much to aQuickStudy! Clever solutions indeed!