suggest how to center a web page

I have this site I've taken over managing and for the longest I have not been able to get the page to centered.  any suggestions on how get this right? aspx site.

www.c-m-p.com
tips54Asked:
Who is Participating?
 
COBOLdinosaurCommented:
Well let's see.  No doctype; therefore in quirks mode.  Table based layout; so very little flexibility.  Absolute positioning; so elements basically disconnected from the flow.

From one Expert a suggestion to use the center  tag, which is no longer supported by the standards... a really bad idea.

On the surface the suggestion to use margin:auto is good except with position:absolute in play it can't work correctly.

If I had a page like this in a project I was doing it would be assigned for re-write using a standards based approach.  You may hack and slash and find a way to make it behave a little better, but it is a very defective page, and it will just keep getting worse as browsers move more and more to comply with HTML5 and CSS3.  The best advice I can give you is bite the bullet and re-write the page, because it is going to require more resources to maintain than to fix it.


Cd&
0
 
p_nutsCommented:
the easy way is to put <center> tag after the body tag and </center> before the </body> tag.

or you can use a wrapper div and define the position using css.

0
 
x3manCommented:
Put a "wrapper" div around the main content and apply the following CSS styles:
#wrapper{
      margin-left:auto;
      margin-right:auto;
    }
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
x3manCommented:
Looking at the web page HTML it is using absolute positioning which can be tricky to center. Have a look at the guide for centering absolute positioned elements here: http://dustyreagan.com/using-css-to-absolute-position-object/
0
 
nap0leonCommented:
You'll need to move you backgroundimage out of your BODY tag and into the wrapper

CSS:
#wrapper{margin:0 auto; backgound: url ('http://www.c-m-p.com/Images/instructionhome.jpg') top left no-repeat}

Open in new window


HTML:
<body>
  <div id="wrapper">
    ... your current page's code goes here ...
  </div>
</body>

Open in new window

0
 
abolinhasCommented:
#wrapper{
position:absolute;
widht:500px;
height:500px;
left:50%;
top:50%;
margin-left: -250px;
margin-top:-250px
}
0
 
tips54Author Commented:
the site will be redesigned in the near future.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.