Skip navigation
mrpfink1
Currently Being Moderated

how do I center web page?

Mar 10, 2011 8:56 PM

Hello out there, I've been using Dreamweaver CS3 for some time, I'm now trying DW CS5. How do I get my web page to the center, It's showing as it should in internet explorer but showing to the left in firefox. It's a table design with css, when I align it to the right it'll show on the right in either browser but not when align to the center.

 

 

 

Thanks,

http://worldclasswebdesign.net/

 
Replies
  • Currently Being Moderated
    Mar 11, 2011 4:19 PM   in reply to mrpfink1

    With CSS:

     

    body {
    background: #FFFF;
    width: 900px; /**width in pixels, ems or %**/

    margin: 10px auto; /**with width, this centers page on screen**/

    }

     

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 12, 2011 12:08 PM   in reply to mrpfink1

    You're welcome.

    When you have a chance, please come back to the forum and mark this question as answered.

     

    Thanks,

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 12, 2011 1:55 PM   in reply to mrpfink1

    I sincerely wish Adobe would center their entire website.  As it stands, the home page (which I think looks pretty nice) is centered and many of the other pages align left.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 10:56 AM   in reply to mrpfink1

    I'm having the same problem, but in reverse: the page centers in chrome, but always appears left-justified in IE. I tried Nancy O's answer and for whatever reason it did not work. Any suggestions?

     

    Thank you in advance!

     

    Jay

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 11:04 AM   in reply to Snukalot

    Jay you should show your page or start your own queston.

     

    Does your page have a valid doc type?  Google it.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 11:48 AM   in reply to Snukalot

    To center a web page in all browsers, you need 3 things:

    1. A valid document type declaration (DTD) at the top of your code.  Good news is that DW does this for you when you use it to create new pages. Bad news is that most  graphics editors do not.  To add  one manually in DW, go to Modify > Page Properties > Title/Encoding > DTD > select a doc type that matches your code.  Hit OK.  Repeat this with other HTML pages as required.
    2. A CSS container width in pixels, % or ems;
    3. A CSS margin-left and margin-right of auto (browser default).

     

    If this doesn't resolve your problem, please post a URL to your web page.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 1:05 PM   in reply to Nancy O.

    Thank you for your replies.

     

    Unfortunately we've not yet purchased a domain that I can refer you to, but below is the code at the start of each page (it already contains the DTD, and I've referred to the container as "wrapper". I'm unsure whether I've resolved the left and right margin situation, or whether it should be placed within the body descriptors or the wrapper descriptors. I am using Dreamweaver CS5.

     

    I didn't start a new question because my question is basically the same question as the starter thread,  but with the browsers reversed (the page renders nearly the same in Chrome and Firefox, centered, but IE hasn't centered).

     

    So, to the code:

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    <html>

    <title>ATS - Closures</title>

    <style type="text/css">

    body,td,th {

              font-family: Tahoma, Geneva, sans-serif;

              font-size: 16px;

              color: #000;

    }

    body {

              background-color: #000;

              background-position: center center;

              background-image: url();

              background-repeat: no-repeat;

              font-family: Georgia, "Times New Roman", Times, serif;

              margin: 10px auto

                        }

     

    #wrapper {

              padding: 5;

              width: 800px;

              position: relative;

              margin: 0 auto;

              text-align:center

    }

     

    Thank you  for being so helpful! You perform a real service here, and we newbies really appreciate it.

     

    Jay

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 1:24 PM   in reply to Snukalot

    Copy & paste this code into a new, blank document.  Notice the complete DOCTYPE with address?

     

    <!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=utf-8" />
    <title>ATS - Closures</title>
      
    <style type="text/css">
    body {
    background: #000;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 100%;
    margin: 10px auto;
    }
    
    #wrapper {
    background: #FFF;
    padding: 12px;
    width: 800px;
    margin: 0 auto;
    text-align: left;
    color: #000;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis.  Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.</p> 
    <!--end wrapper--></div>
    
    </body>
    </html>

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points