My header is almost there...

[aaelghat]

Hi, my cart is here... http://lifeonrecord.com/cart/

I just have a few things I'm stuck on:

1) How do I get rid of the light blue square all the way in the top right corner?

2) How can I make the light blue navigation header and footer bar as wide as my header instead of taking up the whole screen?

3) How can I make those same navigation header and footers narrower (not as thick)?

4) How can I change the URL behind my logo in the top left to my web site home page instead of my cart home page?

5) How can I insert a vertical space between my header and my top navigation bar (if you click on the "Weddings" link in the header, you'll see that all my other pages have some spacing between the header and where the content starts.

6) How can I have the header and logo be the same distance from the left as my other web pages (weddings, events, etc.) so that when I go between those pages and the cart my header and logo don't jump to the left.

Muchas Gracias in advance!!!

[afo]

1) the "light blue square" is part of #logoWrapper in the stylesheet. I suppose you could make your header image extend across the site.

3) Play with the settings I highlighted in red

#navMain ul, #navSupp ul, #navCatTabs ul {
	margin: 0;
	padding: 0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
	}

4) Do you realize if someone is shopping and goes back to your website homepage, his/her session is lost?

[aaelghat]

Thanks, I took all the links in the header that opened up to pages in my web site and made them open up a new window so the session isn't lost. I suppose for the logo, it's not a big deal if it goes to my shopping cart home instead of the web site home.

How can I center the entire header? I looked all through the stylesheet, and I know how I can center the logo, but I'm unclear how I can center the entire header.

[afo]

Now that I look at it again, you're probably better off making the background for everything (logo included) the light blue instead of white. That way, there'll be no "seams" between the items.

BTW, the image http://lifeonrecord.com/cart/images/tag2.gif isn't showing. I'm getting the dreaded red X.

[TMC_Sherpa]

to get rid of the blue, remove the background-color from #logoWrapper in your css file, there is a blue background on your navbar, so it will be fine.
this also adds the space you are looking for between the logo/links and the navbar

change this chunk of code

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



to look like this

navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {background-color:#DFE6FB;
background-image:url(../images/tile_back.gif);
color:#FFFFFF;
font-weight:bold;
height:1%;
margin:auto; //<<<<CHANGE ME TO AUTO FROM 0em;

padding:0.5em 0.2em;
width:879px; //<<<< ADDME

}

and your footer and nav bar will be the same length as the logo/link in your header

[afo]

Great suggestions, TMC_Sherpa.

I guess it depends on whether the light blue background is supposed to be across the top portion of the screen or not.

[aaelghat]

Thanks for all the advice!

I added the margin:auto; line to the CSS file, but my header still isn't centered. Other than that, the only other thing is that the distance between the header and the nav bar is just a few pixels off from the header and the background graphic on the other web pages. Do you know how I can fine-tune that?

Also, how can I center the content on the product listing and product info pages so it's centered and 879 pixels wide?

Thanks again!

[TMC_Sherpa]

try adding

#mainwrapper{
margin: auto;
width: 879px;
}


the header looks centered to me, what browser are you using? Hm, if you want the center to be from the L in life to the right edge of the blue, I'll have to check. Right now its being pushed by the white space around the logo itself, with some negative margins it can probably be taken care of. this will probably change the total width, so the 879 may become smaller

I'm not sure what all this will do (probably bad things in IE, I'll have to check when I get out of work, but the text in the nav bar is scrunched up at the top of the line, removing line-height:0em from

#navMain ul, #navSupp ul, #navCatTabs ul
line-height:0em;
list-style-type:none;
text-align:center;
}
takes care of it in firefox, but I think that breaks IE....

[aaelghat]

Thank you, Thank You TMC_Sherpa!!! My header is done, and you've made my day.

Your help has been greatly appreciated!!