Centering site and Fixed width for X-Cart 4.3
 

Hi,

I am using X-Cart 4.3 and as a stock layout the site grows and shrinks dynamically as you change your screen size. I have been searching the forums on how to set a permanent width to the site. 1024px seems to be the current standard for sites now. I also wanted the site to center in the browser.

Does anyone have information on this for X-Cart 4.3?

I also noticed that in the main edit templates that there are CSS files for IE6,IE7 and Firefox. Do you have to set each CSS for each type of browser?

Any help, idea's or suggestions would be great.

Thanks,

Re: Centering site and Fixed width for X-Cart 4.3
 

Several threads in the forum about this. Try setting "page-container" "width:1024px" and "margin:0 auto"

Re: Centering site and Fixed width for X-Cart 4.3
 

there are alt skins also for 4.3 so check there, but yes marin:0 auto;

will get the trick done.

Re: Centering site and Fixed width for X-Cart 4.3
 

I thought the big top sites still use between 950 to 960 and not beyond this, Also most top sites still use centred fixed width, is this not the standard?

Correct me if I am wrong (Yep most do browse in 1024, but a lot of users still are below that, and this will cause scrollbars...

Like my daughters tiny notebook, sites that don't accommodate for this audience will be put off.

Just take a look at top sites:
BBC
CNN
SKY
CBS
FACEBOOK

And so on.... I personally never used a fixed of 1024. Not yet anyways.

Re: Centering site and Fixed width for X-Cart 4.3
 

I use between 900 and 980. 1007 will not leave a vert scroll bar at 1024 x 768

Re: Centering site and Fixed width for X-Cart 4.3
 

To expand on what Ashley has said, Yes, 1024 is the most commonly used screen width, but browsers need some of that width for their own "chrome," in the way of a vertical scroll slider.

Also, as wide screens gain popularity, many windows user are opting to put their menu bar on the side instead of the top. This also takes up some of that 1024 real-estate. That is why 950 - 980 pixel wide screens are common, to allow room for the "chrome"

Another option instead of fixed width is to use max-width and min-width. These css properties have not been supported by Internet Explorer in the past, but are supported in IE7 and IE 8. These properties do just as you would expect. They allow you to have flexible layout but with cut-off points. You can say "anything narrower than (min-width: xx px ) will appear as a fixed width with a horizontal scroll bar, and anything wider than (max-width: xx px) will appear as a fixed width with your background filling out the extra space.

Re: Centering site and Fixed width for X-Cart 4.3
 

I was just brought up with following the standards and what top sites are using..

Yet to see top sites designers using over 1000 (As fixed width)

Re: Centering site and Fixed width for X-Cart 4.3
 

Min witdth and max widht do work, but sometimes, well most times they make the design look awkward if there is any graphical representation.

Nothing like a nice pic or slide show that is 700 px wide in the midle of a 1600 px wide monitor.

I see this alot on my monitors.

Menus way outside of the middle column design. That's why I prefer fixed width.

Ash

Re: Centering site and Fixed width for X-Cart 4.3
 

I'm sure Tim didn't mean for this thread to turn into a debate on design aesthetics, however IMHO, if a design looks awkward on a monitor, it is not the fault of setting min and max widths, it is the fault of NOT using these setting.

Sure, if all your site has is a static 700 px wide slide show, then it would not make sense to use a flexible layout. But there are times when it is very advantageous to use a liquid, a hybrid, or flexible layouts instead of a fixed width.

For the record, more than half of my designs are fixed width layouts. The rest are hybrids with min and max settings. But every site that I design, I take into account what the screen will look like on different platforms, with different browsers, and at different monitor settings, and design accordingly.

Re: Centering site and Fixed width for X-Cart 4.3
 

Well I just replied back with constructive comments, as before my comments,some advice was telling the original poster, to set at what I consider a non web standard fixed width (And added my personal comments so that it would help the user).....

Also I am sure all comments have been some help

Re: Centering site and Fixed width for X-Cart 4.3
 

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

Re: Centering site and Fixed width for X-Cart 4.3
 

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

Re: Centering site and Fixed width for X-Cart 4.3
 

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

Re: Centering site and Fixed width for X-Cart 4.3
 

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

Re: Centering site and Fixed width for X-Cart 4.3
 

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.

Re: Centering site and Fixed width for X-Cart 4.3
 

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.

Re: Centering site and Fixed width for X-Cart 4.3
 

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.

Re: Centering site and Fixed width for X-Cart 4.3
 

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

Re: Centering site and Fixed width for X-Cart 4.3
 

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.