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

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

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

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;.

21 Sep 2007, 05:11

#3

Zen Follower

Join Date:: Jul 2004
Posts:: 327
Plugin Contributions:: 0

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

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??

21 Sep 2007, 06:45

#4

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

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

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;
	}

21 Sep 2007, 16:55

#5

Zen Follower

Join Date:: Jul 2004
Posts:: 327
Plugin Contributions:: 0

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

gjh42:
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

21 Sep 2007, 17:37

#6

Zen Follower

Join Date:: Jul 2004
Posts:: 327
Plugin Contributions:: 0

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

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

21 Sep 2007, 19:03

#7

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

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

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.

15 Oct 2007, 04:37

#8

t313c0mun1s7

New Zenner

Join Date:: Jul 2006
Posts:: 32
Plugin Contributions:: 0

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

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.

03 Dec 2007, 14:40

#9

Zen Follower

Join Date:: Nov 2007
Posts:: 138
Plugin Contributions:: 0

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

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;
}

03 Dec 2007, 18:25

#10

Zen Follower

Join Date:: Jul 2004
Posts:: 327
Plugin Contributions:: 0

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

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;
}

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.

03 Dec 2007, 18:56

#11

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

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

A background-repeat in #headerWrapper will have no effect on the body background. There must be something else going on here, or else you did not describe the situation accurately.

03 Dec 2007, 21:58

#12

Zen Follower

Join Date:: Nov 2007
Posts:: 138
Plugin Contributions:: 0

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

sorry batteryman

www.sweetzouzou.com

When I didn't get this modification to work, I added the code back to move the logo back out front. I am running out the door right now, but can make the changes again in a few hours.

gjh42, I want the background repeat in the body to show the fading background, but not in the header.

Thx! Sweet

04 Dec 2007, 00:45

#13

Zen Follower

Join Date:: Nov 2007
Posts:: 138
Plugin Contributions:: 0

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

I switched the code back and the header still repeats the back-ground logo. See below for the code from my stylesheet.

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

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

#logo {
display: none;
}

#navMainWrapper {
color: #6C3306; /*"bakers chocolate"*/
width: 100%;
height: 25px;
background-color: transparent;
}

body {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 74.5%; /*text size (default 79.5%)*/
margin:10px 0; /*default 30px*/
background:#fff; /*color of page background (white default fff)*/
background-color: transparent;
background-image: url('../images/fading_background_12.png');
background-position:top;
background-repeat:repeat-x;
}

04 Dec 2007, 00:52

#14

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

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

OK, your body background is repeating correctly (repeat-x).

Your headerWrapper background (the logo) is repeating because that is the default behavior. You do need to specify background-repeat: no-repeat; under #headerWrapper{}.

Do that and let's see how it behaves. Is the location of the logo the problem? The bg start position can also be specified.

04 Dec 2007, 01:10

#15

Zen Follower

Join Date:: Nov 2007
Posts:: 138
Plugin Contributions:: 0

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

Thx very much. I tried early to no repeat the logo but had the code in the wrong place (in the logowrapper). Someday I'll figure this out on my own ;-).

The location is ok for now , but as long as here helping :smile: what is the bg start position?

Thx Sweet!

04 Dec 2007, 01:18

#16

Zen Follower

Join Date:: Nov 2007
Posts:: 138
Plugin Contributions:: 0

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

1 more thing, I just realized the "home link" associated with the logo is gone. I like this feature to click the logo and head back to the main page. How can I add this feature back into the background logo image??

Sweet

04 Dec 2007, 02:13

#17

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

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

You can't have a link from a background image.

You can make #logo {} have a size and #logoWrapper {} have a location (with CSS margins), and put pixel_trans.gif in it so IE won't choke; then this transparent image will exist in the same position as the bg image and can be clickable.

Background positioning is done with something like

background-position: 23px 111px;

The first number is the distance of the left edge of the image from the left edge of the element, and the second is top of image from top of element. If you use negative lengths, the start point will move outside the element.

There are numerous refinements of this, but this will get you started.

04 Dec 2007, 04:49

#18

Zen Follower

Join Date:: Nov 2007
Posts:: 138
Plugin Contributions:: 0

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

Excellent! Thanks for the help!

Sweet

04 Dec 2007, 14:12

#19

Zen Follower

Join Date:: Nov 2007
Posts:: 138
Plugin Contributions:: 0

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

I tried the below and no joy.

#logo {
display: none;
height: 295px;
width: 81px;
}

#logoWrapper {
display: pixel_trans.gif;
background-color: transparent;
height: 160px;
float: left;
margin: .5em 1em 0em 0em;
}

04 Dec 2007, 16:05

#20