[css] How to center this site?

[mess_alex]

Hello,

I want to create a site in which widths will be declared in em units. I've done this before but now it's a bigger problem.

Here's the auxiliary image. Menu (with brown background) outlined with blue border will have position: absolute;
My question is: How to center this site? (I'll certainly add a DIV which will contain the whole site - except the menu)
Adding text-align: center to BODY doesn't help. I can use neither margin: 0 auto nor position: absolute; left: 50%; margin-left: -something, because it's impossible to declare width (cannot add px to em).

Best Regards, Aleksander Łaba

[Taltos]

Hi Alex,

What do you get when you try? Got a link for us to look at? It is usually much easier to help if we can look at a link and see the problem and view the source.

From your general description, it seems like you should be able to create a div that contains the whole site and use the margin: 0 auto in the CSS for it. Obviously that doesn't work or you wouldn't be posting. Need to be able to see the div structure and the CSS for those div's to know where to help.

Good Luck

[mess_alex]

Hi Taltos,

I don't have the code yet.
I'm not having a problem with code, for now I'm only asking for theoretical help - which means a idea for centering the site.

I can't use margin: 0 auto, because I can't declare width for the DIV that will contain the whole page. It's impossible to add pixels to ems.

[jumpenjuhosaphat]

I guess maybe I'm missing something. Why would you need to add pixels to ems? If you are using ems, why use pixels at all?

You should text-align:center the body(for IE) and margin:0 auto the main div that the page will reside in. You should set the width of the main div using em units.

[Gannyaa]

This is what I use in my CSS - mess_alex

[quote]body {
height: auto !important;
background-position: top center;
font-family: "Arial";
font-size: 11px;
color:#000;
padding:0px;
margin:0px;
}
#container {
width: 800px;
height: auto !important;
margin-left: auto;
margin-right: auto;
}[quote]

Hope that helps you. You may have to convert the em to px; although you can declare line height with em.

If you want check out my friend's art site, this is how I do a similar layout.
http://wynston.no-ip.biz/

[mess_alex]

Originally Posted by jumpenjuhosaphat

Why would you need to add pixels to ems? If you are using ems, why use pixels at all?

Because of the fluid layout I want to create (the page would expand and contract while changing the font size). And I can't use ems for left column because there will be photo which is only 230px width.

@Gannyaa, again margin: 0 auto won't help. But thanks for taking time to reply.

// EDIT

The topic has expired, at least for me. I've received an information according to which I have to build the site in a different way. But anyway, I'll appreciate if anyone gives the answer.

[jumpenjuhosaphat]

You can use ems to scale the photo. So when you place the photo, you would do it with a width in ems instead of pixels. You could use ems for every element--horizontal or vertical--on a web page. If the parent element has a font size of 10em, then set the image width to 23em. If you haven't set the size of the parent element, ie. the body, then take a guess and adjust the image until it looks the way that you want. Then if the page size is changed, the image will scale also.

[Taltos]

Sounds like it doesn't matter now but I have a fluid layout site where the containing div does not have a specified width. I use the margin-left:auto and margin-right: auto. Same as margin: 0 auto. It works fine. I don't think you would have had a problem. The one difference between your planned layout and mine is that my 1st column has a defined pixel width and my second column has no defined width. Sounds like you were planning to define your second column in em's.