Page layout question

[gjh42]

Not exactly... r1formetoo is trying to get the ez-pages navbar next to the logo, not the header navbar below the logo.

I see the clearBoth at the bottom of the navigation block, but it doesn't seem to be doing anything. Add a clear to #logoWrapper and you will get the right effect:

#logoWrapper {
	width:200px;
	height:150px;
	float: left;
	clear: both;
	}

[r1formetoo]

Ok, I added the clear but it didn't seem to change anything...

Ian

[gjh42]

Did you refresh the site view? I now see things mostly where they should be. The header navbar doesn't have a height since its clearBoth is somehow not functioning, and that is why there is no green background for it. Can you post your current tpl_header.php in [php] and [/php] tags?

[gjh42]

Erratum: I misremembered the order for background-position - it should be horizontal then vertical.

#headerWrapper {
	background-image:url(../images/head_bg_2.gif);
	background-repeat: no-repeat;
	background-position: center 35px;/*adjust as required*/
	height: 191px;
	}

This should help the alignment of the background.
Also, giving #navMainWrapper a height will let its bg show:

#navMainWrapper {
    height: 23px;
    }

[r1formetoo]

Oh my god, it did it, it did it, it did it. Merry Christmas to me, merry Christmas to me, holy freakin A crap, merry Christmas to me. Thanks Glenn and merry Christmas to you too of course.

Ok, so here's what's next. I want to move everything upward so that there is nothing green above my lawn mower guy. This means relocating the "home" and "log in" to somewhere else. Could they perhaps be in with the ez links?

Ian

[gjh42]

Glad it's all working now! You could move the Home and Login to the ez-pages bar, but when logged in, the Login link changes to Logout and My Account links. That behavior wouldn't translate. Also, when there is something in the cart, Shopping Cart and Checkout links appear. This would make the lower bar too crowded.

I think you are best off leaving the header nav where it is, and making the background blend with the rest of the header. These stylesheet changes will do that:

#headerWrapper {
	background-image:url(../images/head_bg_2.gif);
	background-repeat: no-repeat;
	background-position: center 29px;/*changed 12-24*/
    height: 191px;
	}	

#logoWrapper {
	width:200px;
	height:150px;
	float: left;
	clear: both;
	}

#logoWrapper+.clearBoth {display: none;} <-------delete this now - you don't need it anymore
/*this is temporary and lets the ez-pages bar sit next to the logo -
you need to delete the <br class="clearBoth" /> in tpl_header.php as advised above.*/


...

/*navigation*/
...

#navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	}

#navMainWrapper {/*separate this selector to its own rule 12-24*/
	background: #D1E6FB; 
	padding: 0 0.2em;
	font-weight: bold;
	height: 29px;
	}

...

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #00aa00;/*changed 12-24*/
	white-space: nowrap;
	}

[r1formetoo]

Glenn, check out the page now. I haven't made a single change to it and yet now it has gone wild. The thing is jacked up. What happened?

Ian