Can Not Center Wesite with margin: auto;

I can not figur out how to center my website. I have searched the forums and i have tried changing the margin in my css to margin: auto;

But it is not working!!!! Some please help i have to get this website done soon.

newest version of zen.
My Site
http://www.midamericasportz.com/zencart

Here is my css.
http://www.midamericasportz.com/zencart/includes/templates/custom/css/stylesheet.css

cageman555:

I can not figur out how to center my website. I have searched the forums and i have tried changing the margin in my css to margin: auto;

But it is not working!!!! Some please help i have to get this website done soon.

newest version of zen.
My Site
http://www.midamericasportz.com/zencart

Here is my css.
http://www.midamericasportz.com/zencart/includes/templates/custom/css/stylesheet.css

These sections of your stylesheet are conflicting with each other and the last one is overriding all of the other settings for the #mainWrapper rule.
I've highlighted what should be deleted.

#mainWrapper {

margin: auto;

background-color: #ffffff;

text-align: left;

width: 750px;

vertical-align: top;

border-right: 1px solid #9a9a9a;


}

#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {

margin: auto;

padding: 0em;

}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {

WIDTH: auto;
POSITION: absolute;
background-position: center center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: auto;
padding-bottom: 0px;

}

I really appreciate your help so much. I think your the first person to answer one of my questions!!!.

I saw what you meant and i deleted the two #mainwrapper but it is still not centered. Im not sure why its not working.

If anyone else has suggestions my site and style sheet is above on first post.

Also some of my Text is really small since i deleted the two #mainwrapper i.e. where it says search and manufacturer i know it is inheriting from somewhere i j ust dont know where

cageman555:

Also some of my Text is really small since i deleted the two #mainwrapper i.e. where it says search and manufacturer i know it is inheriting from somewhere i j ust dont know where

Try removing the highlighted portion from the following declaration

#mainWrapper {

margin: auto;

background-color: #ffffff;

text-align: left;

/* position:absolute;*/

vertical-align: top;

border-right: 1px solid #9a9a9a;


}

when i comment out position: absolute; it moves the right sideboxes out of the wrapper just a little bit (atleast on my screen) and now my wrapper is 100% of the page i want the wrapper to be centered with a background

cageman555:

when i comment out position: absolute; it moves the right sideboxes out of the wrapper just a little bit (atleast on my screen) and now my wrapper is 100% of the page i want the wrapper to be centered with a background

set the width in stylesheet.css as indicated.

#mainWrapper {

margin:auto;

background-color: #ffffff;

text-align: left;


/* position:absolute; */

vertical-align: top;

width:980px;


}

thank you so much!!!!! i have been receiving so much pressure getting this site done know i just have to style it. You are the only person who has helped me. Is there any way you can check out my other post on how to clone the manufacturer sidebox and turn it into a center box only on the main page. I want the manufacturers images to display horizontally Like New Products For "Month".

Ive managed to clone the original manufacturer sidebox that came with zen cart and place it below the "New Products for Month"

How do i buy you a cup of coffee!!!!!!

cageman555:

thank you so much!!!!! i have been receiving so much pressure getting this site done know i just have to style it. You are the only person who has helped me. Is there any way you can check out my other post on how to clone the manufacturer sidebox and turn it into a center box only on the main page. I want the manufacturers images to display horizontally Like New Products For "Month".

Ive managed to clone the original manufacturer sidebox that came with zen cart and place it below the "New Products for Month"

How do i buy you a cup of coffee!!!!!!

not sure if this will help but maybe you could clone this add-on to achieve what you want.

www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=941

click the link to my site in my signature.

ya that is what i put in last nite it has alot more files compared to to the original so i am going to attempt to clone it. the problem i had with the first one was that when i placed the side box in the center it was still the same width . I want the width the match the center box header.

And when i changed the width it would change the width on the side and the middle since they are a clone.

How does the header where it says "New Products for Month" (centerbox) expand across the center column. The width of it i mean?

Also where my manufacturer box is on the left and the search box the right there headers text is so tiny. I know it is being inherited from somewhere but where and how do i fix

cageman555:

ya that is what i put in last nite it has alot more files compared to to the original so i am going to attempt to clone it. the problem i had with the first one was that when i placed the side box in the center it was still the same width . I want the width the match the center box header.

And when i changed the width it would change the width on the side and the middle since they are a clone.

How does the header where it says "New Products for Month" (centerbox) expand across the center column. The width of it i mean?

another option might be this add-on "editable Home Page Centerboxes"

Nevermind about that last post i fixed that.

ok i will try the editible home page centerboxes. I really appreciate you help. How can i buy you a cup of coffee

cageman555:

Also where my manufacturer box is on the left and the search box the right there headers text is so tiny. I know it is being inherited from somewhere but where and how do i fix

in stylesheet.css find the following: change the font-size as indicated.

h3.leftBoxHeading, h3.leftBoxHeading a {

FONT-WEIGHT: bold;

FONT-SIZE: 1.3em;
background: url(../images/menu-bg2.png) repeat-x;

WIDTH: 97%;
COLOR: #fff;

TEXT-DECORATION: none;

}

ok my text issue is not fixed when i change the size of
font-size: 0.5em; .9em; it make those two heading the size i want them but it also makes the information links larger and the pag1 page 2 etc.. links larger

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{

font-size: 0.5em;

}

i changed the font to 1.3em like you side it made the search header basically the right size but moved it down and the box behind it wider and the following headers for the right side the text is much larger take a look. The text from the search header seems like it is pulling off another style sheet

cageman555:

i changed the font to 1.3em like you side it made the search header basically the right size but moved it down and the box behind it wider and the following headers for the right side the text is much larger take a look. The text from the search header seems like it is pulling off another style sheet

try deleting the highlighted portion.

h3.rightBoxHeading, h3.rightBoxHeading a {

FONT-WEIGHT: bold;
FONT-SIZE: 1.3empx;
BACKGROUND:  #000000 ;


WIDTH: 99%;
height: 12px;
COLOR: #fff;
 background: url(../images/menu-bg2.png) repeat-x;
TEXT-DECORATION: none;
}

The manufacturers sidebox heading is a <label> element, which is controlled by this rule:

stylesheet.css (line 101)```
h4, h5, h6, label, h4.optionName, legend, address, .sideBoxContent, .larger {
font-size: 0.5em;
}

So modify this rule

stylesheet.css (line 979)```
h3.leftBoxHeading, h3.leftBoxHeading a {
    background: url("../images/menu-bg2.png") repeat-x scroll 0 0 transparent;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    width: 97%;
}

like this

h3.leftBoxHeading {
    background: url("../images/menu-bg2.png") repeat-x scroll 0 0 transparent;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    width: 97%;
}

h3.leftBoxHeading label, h3.leftBoxHeading a {
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
}

your amazing that fixed it for the left box label. Now i would just use the same technique for the right box heading. Thank you so much if there is anything i can do to support you guys that help out people like me let me know!!!