How to center the layout

mirco65 · #1 Feb 17, 2011, 07:58 AM

I have big confusion on how to set properly the Layout of atahualpa.

http://www.vocemea.it/

This is the website but as you can see the Header image is not centered
idem for the logo

everything is align to left and go out from the div in the right

Can you give me help to set properly all settings and in what settings I can do it?

thanks

Mirco

lmilesw · #2 Feb 17, 2011, 09:49 AM

In ATO>Style & edit Header Area>Logo Image: Styling add a width and auto margins as below. The width is arbitrary.

HTML Code:

width: 400px; 
margin-right: auto;
margin-left: auto;

mirco65 · #3 Feb 17, 2011, 03:03 PM

nothing! I insert it but the logo and the header images doesnt stay in the center...
nothing
This probably because the logo is 700 px and the header images is 700 px too?

lmilesw · #4 Feb 17, 2011, 10:39 PM

Try setting the width to 600 px or resize your logo image.

mirco65 · #5 Feb 18, 2011, 01:46 AM

I made it in this way.
The black border is to show the div

I saw that is the div that go to the center but not the image inside the div...
So I resolved doing the div os same dimension of the image but... is not very elegant way.
Do you know how to center the image inside the div?

width: 210px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000000;

lmilesw · #6 Feb 18, 2011, 07:08 AM

Put the following in ATO>Add HTML/CSS Inserts>CSS Inserts to see if it works. Part of this issue is that your logo is 700px wide. From what I can see it should be more like 200px but the following may work for you instead of resizing the logo. It will make the logo appear a bit smaller though.

HTML Code:

img.logo {
width: 600px;
margin-left: auto;
margin-right: auto;
}