Header logo ovelapping header bar, how do I do it??

[batteryman]

I want the header image logo.gif to overlap the header bar as an design element to give the perception that the film is rolling out of the browser.

I have tried many different ways but I get odd result like the image moves up and I get the effect I want but then there a huge gap where the logo is vs. the columns, or the image and space is correct but the category images go to the top as well.

http://photographicbattery.com/

What are some ways that I could accomplish this.

Thanks in advanced
avel

[gjh42]

Instead of having the logo as a foreground image in #logo, make it the background image for #headerWrapper. Add the blue bar to the top of the background image with the film "covering" it, and make #navMainWrapper have no background-image or background-color.

You will probably need to specify the height of #headerWrapper and change #logo or #logoWrapper to display: none;.

[batteryman]

Okay I got it worked out however now I have another problem.. The header navigation bar in under the image and is not usable. How could I fix this.

I tried using the z-index attribute with it set to 1000 on #navMain so that its <div> would be on top of the logo image however it didnt work.


what next??

[gjh42]

You didn't follow my suggestion. You have the logo as a foreground image covering the whole header navbar. Find or add these declarations in your stylesheet and edit them to look as shown:

#headerWrapper {
	margin: 0em;
	padding: 0em;
	background-image: url(../images/logo.gif);
	}

#logoWrapper{
	background-color: transparent;
	float: left;
	height: 147px;
	}

#logo {
	display: none;
	}

Separate #navMainWrapper into its own declaration and edit the background like this:

#navMainWrapper {
	margin: 0em;
	background-color: transparent;
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffff00;
	height: 2em;
	}

[batteryman]

You didn't follow my suggestion.

Its not that your suggestion wasnt good.. I really just had a hard time understanding your suggestion and how to do it.Mental block on my end.

I am going to try your suggestion right now.. I like that you actually showed me what you meant. It helps me..

Avel

[batteryman]

I tried your suggestion and it didn't create the look I wanted. The image is a gif with a white transparency so that the film can cover the header bar to give it the effect of rolling out of the browser onto the banner image. Its does the job but not quite the effect I am going for..

Thank you though. If you have an idea on how to bring out my header navigation the is hiding behind my image please share it.

Thank you,

Avel