Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

How do I center the whole page?

J

jive

macrumors 6502a
Original poster
Apr 14, 2006
501
0
Scotland
How do I center the whole page? Through some googling it's been suggested that I should cover the whole page in one table and then center that... But err, it didn't seem to work (or I was doing it all wrong)...


http://www.dougallan.com/mock.html


Cheers for any help :]


Make it as basic as possible please - I'm useless as coding - it's all been made using Dreamweaver so far...
 
P

pengu

macrumors 6502a
Mar 20, 2005
575
0
Diddily Daddily...
wrap the whole content (ie everything inside the <body>) in a <div> with either an ID or a class that you havent used.
then give that ID or class left and right margins of "auto", and a width of whatever u want.
then (to fix it for MSIE) give the <body> a text-align style of center.

example:

HTML: 
css:
body
{
text-align: center;
margin: 0;
padding: 0;
}

div#contentBox
{
margin: 0 auto 0 auto;
width: 800px;
}

<body>
<div id="contentBox">
<ul><li>Nav item 1</li></ul>
<div class="content">Moo hello there!</div>
</div>
</body>


oh. and take all the absolute positioning out of your css, OR make the centered box position: relative;
 
epochblue

epochblue

macrumors 68000
Aug 12, 2005
1,671
0
Nashville, TN
What you looked up is the best way to do it. Wrap the entire page (everything inside <body></body>) inside a div, and give that div an id (for example, "container").

Then, you'll add some CSS to center the div.

Code: 
HTML:
<body>
  <div id="container">
     ...rest of page here...
  </div>
</body>


Code: 
CSS:
body {
  text-align: center; /* for ie6- */
}

div#container {
  text-align: left; /* fix alignment for ie */
  margin: 0 auto;
  width: 500px; /* if you want the width to be fixed, set to whatever you want */
}

Edit: pengu kinda beat me to it :)
 
j26

j26

macrumors 68000
Mar 30, 2005
1,725
613
Paddyland
It's years since I did any coding, but looking at the source, your layers in the style are set for absolute positons.

If the whole thing is wrapped in table tags an centred, then changing it to relative and playing about with the positions should do it.
 
P

pengu

macrumors 6502a
Mar 20, 2005
575
0
Diddily Daddily...
j26 said:
It's years since I did any coding, but looking at the source, your layers in the style are set for absolute positons.

If the whole thing is wrapped in table tags an centred, then changing it to relative and playing about with the positions should do it.
Click to expand...
:eek:
gahhh!

tables are NOT for layout. they are for (suprise suprise) TABULAR data.


oh yeah. epochblue is right. you should set the text-align of the centered div to either left or justified.
 
j26

j26

macrumors 68000
Mar 30, 2005
1,725
613
Paddyland
pengu said:
:eek:
gahhh!

tables are NOT for layout. they are for (suprise suprise) TABULAR data.


oh yeah. epochblue is right. you should set the text-align of the centered div to either left or justified.
Click to expand...

I said it was years :D
 
J

jive

macrumors 6502a
Original poster
Apr 14, 2006
501
0
Scotland
pengu said:
wrap the whole content (ie everything inside the <body>) in a <div> with either an ID or a class that you havent used.
then give that ID or class left and right margins of "auto", and a width of whatever u want.
then (to fix it for MSIE) give the <body> a text-align style of center.

example:

HTML: 
css:
body
{
text-align: center;
margin: 0;
padding: 0;
}

div#contentBox
{
margin: 0 auto 0 auto;
width: 800px;
}

<body>
<div id="contentBox">
<ul><li>Nav item 1</li></ul>
<div class="content">Moo hello there!</div>
</div>
</body>


oh. and take all the absolute positioning out of your css, OR make the centered box position: relative;
Click to expand...

What do I replace the absolute positioning with? Of do I just get rid of it all together?
 
P

pengu

macrumors 6502a
Mar 20, 2005
575
0
Diddily Daddily...
either take it out (it will revert to the default, "static") OR set the new DIV to position: relative (and leave the absolute positioning in), if you need to use absolute positions for the content within.
 
emorydunn

emorydunn

macrumors 6502
Jun 5, 2006
457
0
Austin Texas
If you don't want to use CSS use the <center> HTML tag, so it would look like this:

<body>
<center>
The content of the page
</center>
</body>
 
P

pengu

macrumors 6502a
Mar 20, 2005
575
0
Diddily Daddily...
not only is <center> deprecated, the align="" attribute of <div> is deprecated, AND they are both intended to align the TEXT CONTENT of the object, not the object itself.

why the hell are people so scared of css. it makes life EASIER.

here are some tips (i am a professional web developer btw)
step 1. quit dreamweaver.
step 2. move Dreamweaver.app to Trash.
step 3. Download one of many great editors: TextMate, skEdit, Komodo, SubethaEdit, etc.
step 4. check out http://www.w3.org and http://www.w3schools.com, and learn xhtml and css.
step 5.
step 6. Profit!
 
epochblue

epochblue

macrumors 68000
Aug 12, 2005
1,671
0
Nashville, TN
pengu said:
not only is <center> deprecated, the align="" attribute of <div> is deprecated, AND they are both intended to align the TEXT CONTENT of the object, not the object itself.

why the hell are people so scared of css. it makes life EASIER.
Click to expand...

Yes, it makes life easier for those people who understand it, and a lot of people have a difficult time with CSS at first.

And, yes, align="center" is deprecated in XHTML, but if the OP is using an HTML or maybe even an XHTML Transitional DOCTYPE, then align="center" should be just fine.
 
edjay

edjay

macrumors newbie
Apr 27, 2008
1
0
North Wales
Centralizing web-page

I typed "how to centre whole page" into the Googlebox, and this is where I ended up. So I thought I would join and say thanks for making my first attempt at making a site actually look a bit like a site now. This is how I etched it into my text-editor:

<div id="centrepin">
<body> :):p:D:apple::rolleyes: </body>
</div>

css:body {
text-align: center;
margin: 0;
padding: 0; }

#centrepin {
margin: 0 auto 0 auto;
width: 920px; }

........and not an Apple in sight unfortunately. However, I have a good friend in Northumberland who is teetering on the edge of The Orchard, so I will pass on a link to your site with compliments. Thanks for the code.

All the best! :)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom