Announcement

**leehack** · 14-Jan-2007, 11:41 PM

**Bun** · 15-Jan-2007, 02:47 AM

Originally posted by leehack

Thanks Lee.......so if my page is over to the left at the moment am I right in thinking that there should be a <div align left - </div> somewhere in the code and it would just be a case of me changing it to 'centre'

Thanks for your time

**wjcampbe** · 15-Jan-2007, 08:08 AM

No - it is not a case of changing something that is already there, but of adding a new global container.

You may be better doing this in the css file - create an id (example #pagecontrol) and assign descriptors (text-align: center; margin: auto 0

then in the outerlayer of your code, immediately after the opening body tag add the <div id="pagecontrol"> and immediately before the closing </body> tag, add a closing </div>.

**Bun** · 15-Jan-2007, 08:46 AM

Originally posted by wjcampbe

No - it is not a case of changing something that is already there, but of adding a new global container.

You may be better doing this in the css file - create an id (example #pagecontrol) and assign descriptors (text-align: center; margin: auto 0

then in the outerlayer of your code, immediately after the opening body tag add the <div id="pagecontrol"> and immediately before the closing </body> tag, add a closing </div>.

Hi Bill,

Thanks for the reply.......sorry but your instructions are beyond my scope of actinic knowledge and I'm afraid I don't know where to start

Would a step-by-step how too be possible?

Thank you for your time

**wjcampbe** · 15-Jan-2007, 10:21 AM

Open Actinic v8 and select the Home page.

Change to Design tab, and select Actinic Stylesheet in the dropdown page selector upper left.

Ignore the superfluous upper code display and go to the editable version of the code in the lower window.

Scroll to the very end of this window and type or paste

Code:

#pagecontrol {
text-align: center;
margin: auto 0;
borders: 0;
}

Apply changes then select Content page in the dropdown selector upper left.
click on the site logo.
Go to the layout code window and scroll till you find the opening <body tag. Immediately after the > which closes that tag type or paste

Code:

<div id="pagecontrol">

scroll to the bottom of the code and type or paste

Code:

</div>

immediately in front of the </body> tag.

**Bun** · 15-Jan-2007, 10:28 AM

Originally posted by wjcampbe

Open Actinic v8 and select the Home page.

Change to Design tab, and select Actinic Stylesheet in the dropdown page selector upper left.

Ignore the superfluous upper code display and go to the editable version of the code in the lower window.

Scroll to the very end of this window and type or paste

Code:

#pagecontrol {
text-align: center;
margin: auto 0;
borders: 0;
}

Apply changes then select Content page in the dropdown selector upper left.
click on the site logo.
Go to the layout code window and scroll till you find the opening <body tag. Immediately after the > which closes that tag type or paste

Code:

<div id="pagecontrol">

scroll to the bottom of the code and type or paste

Code:

</div>

immediately in front of the </body> tag.

Very much appreciated Bill. I'll give this a go later when I get back home

**Bun** · 15-Jan-2007, 03:57 PM

Originally posted by wjcampbe

Open Actinic v8 and select the Home page.

Change to Design tab, and select Actinic Stylesheet in the dropdown page selector upper left.

Ignore the superfluous upper code display and go to the editable version of the code in the lower window.

Scroll to the very end of this window and type or paste

Code:

#pagecontrol {
text-align: center;
margin: auto 0;
borders: 0;
}

Apply changes then select Content page in the dropdown selector upper left.
click on the site logo.
Go to the layout code window and scroll till you find the opening <body tag. Immediately after the > which closes that tag type or paste

Code:

<div id="pagecontrol">

scroll to the bottom of the code and type or paste

Code:

</div>

immediately in front of the </body> tag.

Hi Bill,

Yes, that worked but I had to add the code (<div id="pagecontrol"> and </div>) to two of the pages on my site, the home page and the main catalog page. Anyway, both of the page and indeed the whole site are now centred....which is what I was after, thank you very much indeed.

I've noticed that as well as centring the site it has also centred the store section text in the menu in the left navigation column, the store sections title in that column and the page names.

Is this to be expected?

It's not a major concern and to be honest I'm quite happy with it

Thank you for your patience Bill

**wjcampbe** · 15-Jan-2007, 04:21 PM

You had better check your add to cart, checkout, receipt and search results pages too, just in case they are not covered by the changes you have already made.

Yes, the text-align will apply to all internal divs until that property is given a new value in a lower div (i.e. if you added text-align: left; to the store section title div, then that and the store sections would be left aligned).

**Bun** · 15-Jan-2007, 06:08 PM

Originally posted by wjcampbe

You had better check your add to cart, checkout, receipt and search results pages too, just in case they are not covered by the changes you have already made.

Yes, the text-align will apply to all internal divs until that property is given a new value in a lower div (i.e. if you added text-align: left; to the store section title div, then that and the store sections would be left aligned).

Hi,

Yes, I see what you mean about the �add to cart�, �checkout�.....etc. The add to cart and checkout pages are all centred so I'm very happy with that.....but as with the other pages (Home page and Catalog) the text and some of the boxes where customers enter their details are also centred.....not too keen on them.

If you could expand on how I could have some pages with the text aligned left in your post above I'd appreciate it.

Sorry to be a pain and thank you for your patience

**leehack** · 15-Jan-2007, 06:33 PM

Bun

As a rule, things are usually left aligned without anything having been done. If this is not to your satisfaction, then you make a change. My initial instruction is (in my opinion) the simplest and most effective way of centering a site, especially if you are not too hot on coding.

The method i provided, grabs everything you see already and centre aligns it. It changes nothing inside the site, just purely the overall site becomes centered.

If you are going to create a <div> within your code and also then assign it a class in your stylesheet, then you might as well just do <div align="center"></div>.

I would only suggest creating a class if you are going to apply this to a number of coding elements already in place, ie to an existing table. This can be countered by the argument that having a class from which you can change all pages at once (once it is setup) is much better, however after your site is centered, when are you ever realistically going to want to change this - never.

I am also a little surprised that this

#pagecontrol {
text-align: center;
margin: auto 0;
borders: 0;
}

has worked, as the auto setting is currently doing the top and bottom margins, not the left and right.

To center something, it is:

margin: 0 auto;

The settings i.e. (0 and auto) work from North round to West, so with the above 0 and auto, you are saying 0 margin at the top, right margin auto, bottom margin 0 and left margin auto. If you wrote those out in full, it would look like:

margin: 0 auto 0 auto;

However as the last 2 settings are the same as the first two, you only need do margin: 0 auto; as it will repeat the setting for you.

**Bun** · 15-Jan-2007, 08:47 PM

Originally posted by leehack

Bun

As a rule, things are usually left aligned without anything having been done. If this is not to your satisfaction, then you make a change. My initial instruction is (in my opinion) the simplest and most effective way of centering a site, especially if you are not too hot on coding.

The method i provided, grabs everything you see already and centre aligns it. It changes nothing inside the site, just purely the overall site becomes centered.

If you are going to create a <div> within your code and also then assign it a class in your stylesheet, then you might as well just do <div align="center"></div>.

I would only suggest creating a class if you are going to apply this to a number of coding elements already in place, ie to an existing table. This can be countered by the argument that having a class from which you can change all pages at once (once it is setup) is much better, however after your site is centered, when are you ever realistically going to want to change this - never.

I am also a little surprised that this

#pagecontrol {
text-align: center;
margin: auto 0;
borders: 0;
}

has worked, as the auto setting is currently doing the top and bottom margins, not the left and right.

To center something, it is:

margin: 0 auto;

The settings i.e. (0 and auto) work from North round to West, so with the above 0 and auto, you are saying 0 margin at the top, right margin auto, bottom margin 0 and left margin auto. If you wrote those out in full, it would look like:

margin: 0 auto 0 auto;

However as the last 2 settings are the same as the first two, you only need do margin: 0 auto; as it will repeat the setting for you.

Hi Lee,

Had a go at what you suggested and the result was the same as with Bill's idea. Is there a way to centre the site but leave all the text as was.....aligned left?

Thank you for your time

**leehack** · 15-Jan-2007, 08:53 PM

Detail what you are doing Bun as you are doing it incorrectly.
Either you are not putting it in the right place, you have a number of different things each from different ideas still lingering or there is an overriding CSS style.

if on your page you put <div align="center">, immediately after the opening body tag which will look like <body> or it may look like <body onload> etc.

and put </div> at the bottom just before the </body>

I can guarantee it will work as long as you have removed any other things you have tried to do and there is no overriding CSS style.

I'd post the code from the page you are trying to do this on, it will turn out a lot quicker and easier for us all.

**Bun** · 15-Jan-2007, 08:54 PM

Originally posted by Bun

Hi Lee,

Had a go at what you suggested and the result was the same as with Bill's idea. Is there a way to centre the site but leave all the text as was.....aligned left?

Thank you for your time

Sorry Lee,

I forgot to say I added the <div align="center"> directky after <body onload="<actinic:variable name="OnLoadScript" value="PreloadImages" />"> and put the "></div>. just before the </body> at the like in Bill's example.

**leehack** · 15-Jan-2007, 08:56 PM

Paste the code in here so i can see it.

Announcement

Centring Site Smart Theme

Centring Site Smart Theme

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment