css question: centering everything on the page

Pure L_Archive

css question: centering everything on the page

This is driving me nuts.

I've got all images absolutely positioned and things seem to be where they should. However, using a different display setting, the page is not centered.

I've been trying to wrap everything in a container div like this:

Code: Select all

<style>
div#container
{
margin-left: auto;
margin-right: auto;
width: 50 em;
}
</style>

<body>
<div id="container">
     <ALL OF MY BULLSHIT></ALL OF MY BULLSHIT>
</div>

But that doesn't seem to be doing the trick (i.e. centering everything). I'd like it to be centered no matter what the display is set to and no matter the browser size.

Is all of this determined by the size of my container width? Maybe I need a height description in there too? How does one choose the proper container size?

Thanks!

Benny_Archive

css question: centering everything on the page

2 by Benny_Archive

remove the space between 50 and em

width: 50em;

and you're set.

so yeah, i'm a pussy.

Pure L_Archive

css question: centering everything on the page

3 by Pure L_Archive

Thanks for the reply, Benny.

Still doesn't work.

If I position my images absolutely (in the center of the browser) and then I view it at a different display setting (say, 1280X960 vs. 1152X864) it still shifts with the different sized display.

I can center this thing with tables but I'd like to do it without. Isn't that the benefit of CSS?

Shit's still driving me crazy....

Benny_Archive

css question: centering everything on the page

4 by Benny_Archive

mm weird. i tried it in an html page and it works.

it´s like this.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document</title>
<style type="text/css">
div#container
{
margin:0 auto;
width: 50em;
}
</style>
</head>

<body>
<div id="container">
    text! whoa awesome!
</div>
</body>




</html>

so yeah, i'm a pussy.

Benny_Archive

css question: centering everything on the page

5 by Benny_Archive

wait, i re-read the thing.
the problem i guess is with the absolute positioning. you perhaps should use absolute for the main div and relative to the rest of the images.
(the images positioned relatively to the main div)

so yeah, i'm a pussy.

ole_Archive

css question: centering everything on the page

6 by ole_Archive

You could try to put that in your css file:

Code: Select all

body  {
   text-align: center;
}

Jon_Archive

css question: centering everything on the page

7 by Jon_Archive

in your master filesheet put the following in your body section:

Code: Select all

 text-align: center;

then everything should be centered. to un-center stuff, use either (if you wanted to have it right justified, for instance)

Code: Select all

position:absolute;right:

or

Code: Select all

<p align=right>

i'm afraid i can't remember off-hand which way round it is but it's definitely one of them. hope that helps.

the demand for perfection is always a sign of a misunderstanding of the ends of art. - john ruskin

Pure L_Archive

css question: centering everything on the page

8 by Pure L_Archive

I figured it out. It was all in the ordering of my various divs and spans that had things fouled up.

For the record, if anybody's having problems with doing this in IE vs. Firefox, you can do this for your container that needs to be centered:

Code: Select all

text-align: -moz-center;
#text-align:center;

That way, IE will only read the one with the "#" and Firefox will read the "-moz-center" bit.

unarmedman_Archive

css question: centering everything on the page

9 by unarmedman_Archive

Glad you figured it out, Pure L. There's a good blog on how to center absolutely positioned content right here:

Link

set body {text-align: center;} for older browsers, and the #container element text-align: left to realign the text properly. Worked a charm for the site I just finished up!

"The best argument against democracy is a five minute conversation with the average voter."
-Winston Churchill

Display posts from previous

Sort by