Any CSS guru's out there? (pic)

I am building a blog on a Wordpress platform. I started with a template and have done quite a bit of modifying to get it looking like I want it to. The one thing that I am stuck on is how to add a graphic on top of an image header. I'm not even sure I'm asking the question correctly to be honest, so I drew up a quick draft of what I'm trying to do in PS.

I have the nav bar set up and the image header like I want it. I just want to drop that red area at the top on top of the image. Or more specifically I want the line part to be like a border on top of the image, and the logo box part to hang down into the image with the image underneath.

Any pointers on how to do it or where I would read about how to do it?

Thanks a bunch!
Chris

HOSTED PHOTO
please log in to view hosted photos in full size.

Best CSS tutorial on the web IMO...

CSS Tutorial

z-index?

http://www.tjkdesign.c​om …lf_how_elements​_stack.asp

Im not totally sure what it is you want to do, but if it involves something on top of something else, chances are youre going to need to set the z-index.

Check outCSS-Tricks, it has some pretty good tutorials and video podcast. Chris Coyer, the guy behind the site, uses WordPress for his blog site.

It depends on the layout if you're using floating or or static elements.

I've just done something similar but I was using a fixed header container with two floated elements One for the image and then used a floated element with a negative margin for the navbar. To ensure that all browsers honoured the layers I used z-index, but for Firefox/Opera it wasn't needed.

If it's a Flash header then you could have a few headaches!