feeling like an idiot - multiple issues

Here's my shop: http://evilbrandclothes.com/shop-temp/

I'm going to be moving it to a permanent folder once it's completed, but right now I don't really have high hopes of that happening.

As you can see, I was able to get the flash file to be centered up top with the background image showing on both sides, this is how it should be. The body, however, insists on being stuck on the left. I've changed everything I can think of and it is still over on the left.

Also, the background image is being repeated inside the bar with the search function. I have no clue why it is doing this and, again, I've looked everywhere and there is only one place where bg.jpg is being called for.

I actually don't want the left/right columns to be displayed AT ALL but I can't figure out how to do this. I've deleted all of their contents but I just can't figure out how to get them to not be there at all. I want the content to spread out over an area exactly the size of the top banner (647 pixels), with its own background image (body.jpg).

I ordered the manual and THEN saw that it took 12-36 hours to arrive which is something I was not aware of before. I have to have this thing done on Monday.

Any help would be greatly appreciated. I have a feeling these are all very basic problems, I just have ZERO experience with php/css. (yes, I've read the wiki's... )

The problem just got worse.

I just tried pulling the page up in IE and it's centered there. It never centered in Firefox so now I have no idea which thing that I changed in my frenzy actually worked and I have no idea why it didn't do so on Firefox.

However, the content section is still too wide. The only parameters I could find to set the width are all set to the same width as the top banner.

Also, I attempted to create a test customer account but my email address received no email (not in spam, either) although the customer DID show up in the admin section.

Any help on any of this would be awesome.

You can turn off the right and left columns by going to Admin/Configuration/Layout Settings and set Column Left Status and Column Right Status to 0.

Thank you TS. Any idea how I can get all the content centered? I want to emulate the main page of the site as closely as possible.

Try changing the width of the mainWrapper to 750px instead of 100%

Thank you, Kim!

I've got everything centered now (I changed every width parameter to 647px and put margin-left/right: auto; everywhere I could think of) but it looks like I'm having 2 issues.

The entire background has disappeared. I have no idea how difficult this is going to be to fix. I changed every width parameter I could find the 647px (the same width as the top flash banner) and I don't know which one in the css file to change to get the background back without slamming the main content back over to the left.

Also, in the menu navigation bars just above the main content the bg.jpg background image is showing through and it isn't noted anywhere in any of those sections.

3 issues I guess. In IE it appears to be searching for an image right below the "Home" link. I have no idea why it's doing this.

Thank you both for your help with this. I thought setting up this store was going to be easy since it's a pre-built but I guess not, lol.

Bumping.

I know I've looked at other stores and just about everyone has theirs setup exactly how I would like to have mine setup so I know it isn't anything out of the ordinary. I just need my content to be in a column that is 647 pixels wide and centered with a background image that shows on either side.

Thanks again to those who have helped so far.

You have the body background in #mainWrapper, and no background in the body {} declaration. Assuming the body.jpg image is what you want on each side of your page, move
background: url(../images/body.jpg);
up to the body declaration.

Thank you, gjh. The only immediate issue I'm still seeing is that the bg.jpg image is being called in the middle of the page still (back behind Home - Login - Search, and behind the categories).

Where can I change that to just black as well as get rid of the huge amount of space that's being wasted in there?

You can give #mainWrapper or any other element a
background-color: #000000;
to cover up the body background. (#000000 = black.)

Thanks again, gjh.

The only pressing issue that remains is the big gap between the Home/Login line and the actual products line. In IE it is looking for an image and in both there's a huge gap that shouldn't be there. What files should I be looking at to get that fixed?

BUMP

I've narrowed it down to what the manual calls the "Header Main Bar". It describes how to get rid of everything EXCEPT the Header Main bar. I don't even know what file controls it so I can figure out where this image is being called from.

Any ideas? The tpl_header file that I altered to add the flash banner looks like jibberish to me outside of the code that I entered so I can't figure out if it's in there or not. I've tried searching for img extensions but I haven't found anything in there.

Your main problem is that you have extra padding and other height-producing code in your stylesheet. You also have a huge amount of redundant or useless properties in there, like the
margin-left: auto;
margin-right: auto;
all over the place. Your stylesheet will be easier to understand and edit if you remove those. Part of your current stylesheet:```
/wrappers - page or section containers/
#mainWrapper {
text-align: left;
color: white;
width: 647px;
vertical-align: top;
background-color: #000000;
background-position: 50% 50%;
margin-left: auto;
margin-right: auto;
}

#headerWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
background-color: #000000;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#contentMainWrapper {
margin: 0em;
padding: 0em;
background: url(http://www.evilbrandclothes.com/img/body.jpg);
vertical-align: top;
background-position: top center;
width: 647px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
margin-left: auto;
margin-right: auto;
}

#tagline {
color: #000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin-left: auto;
margin-right: auto;
width: 47%;
}

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/navigation/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin-left: auto;
margin-right: auto;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin-left: auto;
margin-right: auto;
background-color: ;
font-weight: bold;
color: #ffffff;
height: 1%;
width: 647px;
text-align: center;
}

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

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
margin-left: auto;
margin-right: auto;
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;
margin-left: auto;
margin-right: auto;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #000000;
margin-left: auto;
margin-right: auto;
}

#navEZPagesTOC ul {
margin-left: auto;
margin-right: auto;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
margin-left: auto;
margin-right: auto;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin-left: auto;
margin-right: auto;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin-left: auto;
margin-right: auto;
}

#navMainSearch {
float: right;
margin-left: auto;
margin-right: auto;
}

#navBreadCrumb {
background-color: #cc9900;
margin-left: auto;
margin-right: auto;
}

#navEZPagesTop {
background-color: #ffff33;
margin-left: auto;
margin-right: auto;
}

#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navColumnOne {
}

#navColumnTwo {
}

Edited to remove superfluous properties with no change in output, except for the noted edits to tighten up spacing:```
/*wrappers - page or section containers*/
#mainWrapper {
	text-align: left;
	color: white;
	width: 647px;
	vertical-align: top;
	background-color: #000000;
	}

#headerWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	text-align: center;
	}
	
#contentMainWrapper {
	background: url(http://www.evilbrandclothes.com/img/body.jpg);
	vertical-align: top;
	background-position: top center;
	width: 647px;
	text-align: left;
	}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 

#tagline {
	color: #000000;
	font-size: 2em;
	text-align : center;
	vertical-align: middle;
	}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin-left: auto;
	margin-right: auto;
	width: 47%;
	}

.wrapperAttribsOptions {
	margin: 0.3em 0em;
	}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
	font-size: 0.9em;
	}
.navNextPrevList {
	display: inline;
	white-space: nowrap;
	padding:  0.5em 0em;
	list-style-type: none;
	}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	font-weight: bold;
	height: 1%;
	text-align: center;
	}

#navMain ul, #navSupp ul, #navCatTabs ul  {
	padding:  0em 0em; /*change to tighten up*/
	list-style-type: none;
	text-align: center;
	line-height: 1.0em; /*change to tighten up*/
	}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	white-space: nowrap;
	}

#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #000000;
	}

#navEZPagesTOC ul {
	padding:  0.5em 0em;
	list-style-type: none;
	line-height: 1.5em;
	}

#navEZPagesTOC ul li {
	white-space: nowrap;
	}

#navEZPagesTOC ul li a {
	padding: 0em 0.5em;
	}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
	}

#navMainSearch {
	float: right;
	}

#navBreadCrumb {
	background-color: #cc9900;
	}

#navEZPagesTop {
	background-color: #ffff33;
	}

#navBreadCrumb, #navEZPagesTop {
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	padding: 0.5em;
	}

#navColumnOne {
	}

#navColumnTwo {
	}

Thanks again, gjh. I put all those margin things in there because I was getting frustrated trying to figure out how to get the page centered and I just put that in everywhere I could possibly think of.

Your code got rid of a lot of wasted space which is great, but IE is still looking for an image that doesn't exist, and isn't being called for. I've tried looking at properties for the picture but all it gives is a directory for the image, not even a filename so I am completely lost as to why it's looking for an image at all. I know what USED to be there is the zencart logo but I haven't the slightest clue why it's looking for nothing or how I can get it to stop.

After I get that fixed I get to figure out why mail isn't being sent to test accounts but I have a feeling that has more to do with the server than zencart.

BUMP

I think I can take care of the broken image problem myself if someone could tell me where the code for the zencart logo in the header is located. I'll either just delete the entire line or maybe try putting a 1x1 gif or something in there.

You could add this to your stylesheet to eliminate the red x:

#logo {display:none;}

THANK YOU!!!

That has been driving me absolutely insane.

I'm going to make a real push tomorrow to finish this thing up but I believe everything that's left to do is covered in the manual. I just wanted to report back that the code you provided works perfectly for removing the logo, in case anyone else has the same issue and stumbles upon this post while looking for an answer.

Thanks again to everyone that helped. I'll be posting here if I have any more questions.