Can't get layout to center!!

Here's the layout I've been working on for the past few days now.

http://fontestad.net/dev/layout-sliced.php

I pretty much have the code where I want it, but I want to center the layout so that it always appears in the center of the browser.

Can anyone help me out? I've tryed the margin 0 auto; i've tryed text-align center in the body tag, nothing seems to work.

Can anyone point me in the right direction.

I have a hunch on t what the problem is, but if i'm correct I'd need to recode the whole layout. :\

 

Looks centered to me?? I'm not getting what you need.

- Prilep

 

It's centered for me too (firefox 2)

 

it is not centered for me and I am using the latest FF.

I think the problem is you have your margins set as a style of the body. This is not the way you want to center a site. Remove that.

What you want to do is create a container div, place the site inside that, and then center it.

So it would be like

<div id="container">
   the rest of your site here
</div>

*/ the css would be : */

#container {
 width: 760px; */ or however wide your page will be */
 margin: 0 auto; */ this will center the container div and everything inside */
}

Code (markup):

cheers

 

It's centered for all resolutions up to 1024*768

I'm looking at it on 1400*900 and also on 1280*1024.

:\

jared I've tryed that already. But thanks.

 

Well I actually looked at your css. It is because you sliced it up using ImageReady and everything is absolutely positioned. You need to have some one code it by hand using correct markup (aka not just positioning everything absolute). Not to mention 1000px wide is pretty unconventional.

Alternately you can use kind of a "work around" for now that will center it although I don't really recommend css hacks like this.

You can set you table1 div to look like

#Table_01 {
	position:absolute;
	left:50%;
	width:1000px;
	margin-left: -500px;
	font-family: Trebuchet MS, Tahoma, Helvetica, sans-serif;
}

Code (markup):

and that should center it

cheers

 

Green rep for you Jared. Worked like a charm.

How much do you think someone would charge to properly code this css?

I may do that, but i'm on a LOW LOW budget...

struggling to pay my bills as is.... and if I can get by with the design how it is now, i may stick with it.

another thing that you can possibly help me with...

the affiliates menu appears fine in IE, but in firefox it's all messed up..
any ideas ?

 

Check that in 800x600 now. 100px from your left and right edges should be cropped off.

 

Well until i can get some $$$ and have a professional code it, it may have to stay this way.

87+ percent of my traffic is AT LEAST 1024*768 resolution, only ~ 13% has 800*600 or less.

But none the less thanks for the heads up. :\ I'll see if there is anything I can do to fix it in the mean time.

 

A couple of things:

Using absolute positioning for the over all layout is likely the worst way to do things. But, that, or tables, is all a wysiwyg editor/layout maker can do. Learn to write html and css; it's not rocket science.

Make your outer wrapper div {position: relative; width: xx (whatever you need); margin: 0 auto;}. Be sure you have a complete and proper DTD, so IE will act half-assed sane. That will center the document in the viewport, where possible. Overflow will simply be scrolled.

Don't put too much stock in resolutions. That's screen size. Users in the know, with large monitors, do not waste screen real estate by running applications maximized. Especially not browsers, editors or word processors. The browser here is only 800px wide in a 1280px monitor because that provides a comfortable width column for reading plus a sidebar. Editors need only be 80 fixed-width characters wide. Same with the Xterm. The word processor needn't be wider than a letter or A4 sheet of paper—about 800–900px, oddly enough. All those huge screens don't mean a thing. What size is the application window?

cheers,

gary

 

#wrapper { margin:0 auto; }

Code (markup):

This will center any DIV with the ID of wrapper. It wont work with classes unless you use;

.wrapper { margin:0 auto; display:block; }

Code (markup):

 

The suggestion I gave,

#wrapper {
    margin: 0 auto;
    position: relative;
    width: 950px; /*nominal value*/

Code (markup):

gives all the absolute positioned elements a positional reference, {position: relative;}. That's so they will 'move' with the outer container. The width is required because otherwise the div will simply take the width of the browser window, and the margin property for centering would be meaningless. The width property also satisfies IE's silly requirement that the positional reference have the property "hasLayout".

cheers,

gary

 

Indeed.

kk5st: Green rep. I've implemented it and works great. Even fixed a few other problems I was seeing in FF.