KISS the correct way of centering a shop

Juto · June 15, 2010

It has been brought to my attention that lots of people and the dev-team have an issue on centering a shop using the correct doctype declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Which is needed in order to validate to w3c-standard and to make it "cross browser"

In your stylesheet you have the tag BODY, this tag is responsible for the viewport and should look like this:

BODY {

/*For the background image, if used*/

background-image: url('images/body_background.png');

background-repeat: repeat;

background-attachment: fixed;

/*Set standard font size to 100%*/

font-size: 100%;

/*Set the margins and width of the shop. Note the use of "auto" and the rule for overflow*/

margin-top: 16px;

margin-left: auto;

width: 780px;

margin-right: auto;

padding: 0;

overflow: scroll

}

/*Define a new class like so, to set the height of the shop (the others are optional)*/

/*This affects the behaviour of the shop within the BODY tag above*/

.bodytable {

background-color: #EFEFEF; /*Of course you could use another background image here*/

border-collapse: separate; /*Optional*/

border-spacing: 6px; /*Optional*/

padding: 0;

height: 590px;

width: 100%

}

Next step is to open all your files in document root, which is where you have your index.php file

First add this just before the title tag:

<!--[if lte IE 7]>

<![endif]-->

Next is to find wher your body table begins, its most likely after the inclusion of the header:

Change the lines to:

<?php require(DIR_WS_INCLUDES . 'header.php'); ?>

<tr>

......

Thus we have referenced our css class for the body, and can set the height of the shop.

You can see it in action at www.tyraochsally.se or www.ji-fashion.com

Kind regards

Sara

OSCmasters

Juto · June 17, 2010

Addition:

For the overflow you could optionally use:

overflow:auto;

This rule will give the shop scrollbars only when needed.

Regards

Sara

OSCmasters

mcbsolutions · September 22, 2010

It has been brought to my attention that lots of people and the dev-team have an issue on centering a shop using the correct doctype declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Which is needed in order to validate to w3c-standard and to make it "cross browser"

In your stylesheet you have the tag BODY, this tag is responsible for the viewport and should look like this:

BODY {

/*For the background image, if used*/

background-image: url('images/body_background.png');

background-repeat: repeat;

background-attachment: fixed;

/*Set standard font size to 100%*/

font-size: 100%;

/*Set the margins and width of the shop. Note the use of "auto" and the rule for overflow*/

margin-top: 16px;

margin-left: auto;

width: 780px;

margin-right: auto;

padding: 0;

overflow: scroll

}

/*Define a new class like so, to set the height of the shop (the others are optional)*/

/*This affects the behaviour of the shop within the BODY tag above*/

.bodytable {

background-color: #EFEFEF; /*Of course you could use another background image here*/

border-collapse: separate; /*Optional*/

border-spacing: 6px; /*Optional*/

padding: 0;

height: 590px;

width: 100%

}

Next step is to open all your files in document root, which is where you have your index.php file

First add this just before the title tag:



<meta http-equiv="X-UA-Compatible" content="IE=8" > 



Next is to find wher your body table begins, its most likely after the inclusion of the header:

Change the lines to:



<?php require(DIR_WS_INCLUDES . 'header.php'); ?>





<table class="bodytable">

<tr>

......

Thus we have referenced our css class for the body, and can set the height of the shop.

You can see it in action at www.tyraochsally.se or www.ji-fashion.com

Kind regards

Sara

OSCmasters

Hi Sara, this looks good. Thanks for this. Been looking for an easy way to center shop, that supports all browsers, etc.

I believe a typo is in

<!--[if lte IE 7]>

it should be

<!--[if lte IE 7]-->

Also, want to make sure I do this right. Should the bodytable class be like this

<!-- body // -->
<table class="bodytable">
<tr>
<table border="0" width="100%" cellspacing="3" cellpadding="3">

or this

<!-- body // -->
<table class="bodytable" border="0" width="100%" cellspacing="3" cellpadding="3">
<tr>

Thanks!

Juto · February 6, 2011

Hi Sara, this looks good. Thanks for this. Been looking for an easy way to center shop, that supports all browsers, etc.

I believe a typo is in

Also, want to make sure I do this right. Should the bodytable class be like this

<table class="bodytable">
<tr>
<table border="0" width="100%" cellspacing="3" cellpadding="3">
or this

<table class="bodytable" border="0" width="100%" cellspacing="3" cellpadding="3">
<tr>
Thanks!

Hello. No it's not a typo see: Syntax of Conditional Comments: http://msdn.microsoft.com/en-us/library/ms537512(v=VS.85).aspx

For the body table it should be just <table class="bodytable"> How the table looks is set in the css for the clas bodytable.

You could have a look at My Shop (Whiach also have a som other nice features) :)

Sara

KISS the correct way of centering a shop

Recommended Posts

Juto

Juto

mcbsolutions

Juto

Archived

Browse

Activity