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

[gjh42]

If you change the header background gif so that it includes the blue bar and white background "behind" the film, and make #navMainWrapper transparent, you will get exactly the look you want and have the navbar functional.

[T313C0mun1s7]

I was needing to do basically the same thing as my logo was too tall and it took up too much real estate at the top of the page. In my case moving the top links over the logo was just to help everything move up a little. It looks much better now.

I have a couple of notes to add however. I had to make some additional changes as this worked wonderfully in Firefox, but broke in IE6. In IE6 the page was shifted down by only the amount the nav links would normally push down to the logo. Then there was a space the height of the logo that was white and covered the bottom of the logo to the beginning of the rest of the page. To make it look the same in both browsers I basically moved the height attribute to the headerWrapper ID and totally eliminated the logoWrapper from both the style sheet and the tpl_header.php file. meaning that I have this in my stylesheet:

/********************************************************************/
/********************   Header nav over logo mod   ******************/
/********************************************************************/

#headerWrapper {
	margin: 0em;
	padding: 0em;
	background-image: url(../images/logo.gif);
	height: 199px;
	}
	
#navMainWrapper {
	margin: 0em;
	background-color: transparent;
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffff00;
	height: 2em;
	}
	
/********************************************************************/
/******************   End Header nav over logo mod   ****************/
/********************************************************************/

and I completely deleted the logoWrapper div and everything in it. It worked like a charm.

[Sweet ZouZou]

I have a similar problem with a large logo, but I also have a repeating background so of course when I tried the above, the logo repeats across the header wrapper. I tried adding background-repeat: none; but this didn't work. Is there anyway to stop the repeat in the headerWrapper but keep the repeat in the body?


#headerWrapper {
text-align: right;
margin: .5em 1em 0em 0em;
color: #6C3306; /*"bakers chocolate"*/
background-image: url(../images/SweetZouZou2.jpg);
background-repeat: none;
height: 204px;
}

[batteryman]

I have a similar problem with a large logo, but I also have a repeating background so of course when I tried the above, the logo repeats across the header wrapper. I tried adding background-repeat: none; but this didn't work. Is there anyway to stop the repeat in the headerWrapper but keep the repeat in the body?


#headerWrapper {
text-align: right;
margin: .5em 1em 0em 0em;
color: #6C3306; /*"bakers chocolate"*/
background-image: url(../images/SweetZouZou2.jpg);
background-repeat: none;
height: 204px;
}

Hello what is your url? I would like to take a look at your site. I will be able to give you a better answer.