X-Cart forums

[Tim Glavin]

Thanks for all the replies and advice.

For the record. there are three lines that center and set the width. I actually figured it out myself from just simple CSS settings that I was already using in another website.

These settings are in the main.css file

html,body {
height: 100%;
background-color: #ffffff;
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;

The margin left and right auto cause the page to auto center. These commands are not present in the stock template.
Then just below that in the stock template they set a minimum width and all you have to do is set the max width.

min-width: 780px;
max-width:995px;

Just an FYI, but in the template I am using. 4.3 neon lights
If you set the max width smaller than 995, it causes text to roll over to another line in the cart checkout and looks bad. Who ever designed this template basically set-it up to be used at approx. 1000px or wider.

BTW, Amazon.com is set to a minimum of 980. But their site is completely dynamic. If you have a wider monitor and browser settings the site adds products and images that are not there if the browser and monitor are narrower. Very cool stuff....

Thanks all

[D Brugge]

Tim,

There is a quirk in the older versions of IE that causes them to not recognize "margin:auto" unless you set the body to text-align:center; you can then set the wrapper (in the case of the 'neon' templates either content-container or page-container) to text-align:left to keep all of your type from centering on the page.

This will keep the margin:auto working for folks who still use IE6 or IE7

[phwuser]

Which file can I change the centering site and fixed width? Can you provide us the filename? Thanks!

[Tim Glavin]

As I stated above it's in the main.css file right in the edit templates at the top.
See ya!

[Brian Peat]

Just to add to this, if you're using a skin (I'm using the chrome skin) you can edit the altskin.css file instead of the main file.

[rogier]

For FireFuck you've to ad

html,body {
height: 100%;
width:100%;
background-color: #ffffff;
margin: 0 auto !important;
text-align: -moz-center;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
min-width: 780px;
border: 0px none;
}

in the main.FF style sheet. otherwise it won't work in firefox.

[Wolfgang Hofbauer]

Am I reading it wrong or is the manual telling me that there is a single spot you place the width and as it is a main setting you can use an "if" statement to ensure the customer sees the fixed width and the admin has flexi.

Can not remember the page at the moment, stumbled across it some months ago but was thinking of doing that now and can not for the life of me find it again.

Making it fixed is better for layout design and the majority of my target market is still under 1000px.

Any samples or ideas on where and how to do this would be appreciated.

[ARW VISIONS]

in your css file set the width of page-container to whatever you want then add margin:0 auto;

[Wolfgang Hofbauer]

Thanks ARW VISIONS That was simpler compared to using an "if" statement and all.

Should have tried for the simple way first instead of attempting to use the more advanced method described in the manual.