Skip to main content
A
Anonymous
July 21, 2009
Answered

Center web page on browser screen in Dreamweaver?

  • July 21, 2009
  • 3 replies
  • 89432 views

All web sites I have created and published in Dreamweaver have the pages come up on the browser screen on the left side. Is there a way to set up a site so the pages come up centered on all browser pages?

    This topic has been closed for replies.
    Correct answer Harumbak_

    Hi, I guess it depends on your layout. Of you're using CSS then you need to set the left and right margin of your main container to auto. Please check example below.

    HTML:

    <div id="main"> test</div>

    CSS:

    #main {

    margin-right: auto;

    margin-left: auto;

    }

    If you need to have a visual example for this, try opening a new HTML document using a CSS layout, you can do that by going to file>new>blank page> then select a CSS Layout for HTML.

    I hope this post makes sense to you. ;-)

    3 replies

    David_Powers
    David_Powers
    Inspiring
    July 22, 2009

    I see it's your first post. Welcome to the forum.

    Nancy has given you the correct answer to your question, but you could have found it yourself by following the advice at the top of the forum to check the Dreamweaver FAQ. The answer is in Centering a page.

    You might also find it useful to spend a couple of minutes reading How to get help quickly.

    A
    Anonymous
    February 9, 2012

    Now I am a little confused. I followed the exact instructions following your link. When I press "Live View" the page is centered but if I press f12 it's still all over to the left in the browser that opens.

    S
    steve o
    Participant
    February 23, 2013

    @jsmcrawler,

    This is a duplicate of your other post.  See my reply below.

    http://forums.adobe.com/message/5052782#5052782

    Nancy O.


    Good day, I have read the above posts, and other posts/videos online, tried many, but none seem to work. I'm wondering if it's because the page elements have absolute positioning, but maybe someone can help. Below is the html code, then below that i've included the css coding, i realize it's not clean, but just want to address the centering issue at this time.

    Any help is appreciated, remember I'm not a coder

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <style type="text/css">

    .SectionTEXT {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 36px;

        font-style: normal;

        line-height: 45px;

        color: #666666;

        background-color: #FFFFFF;

        letter-spacing: normal;

        text-align: left;

        word-spacing: normal;

        position: relative;

        width: 542px;

        left: 400px;

        bottom: 20px;

        text-decoration: none;

    }

    .FooterTEXT {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 11px;

        font-style: normal;

        line-height: normal;

        font-weight: light;

        font-variant: normal;

        text-transform: none;

        color: #FFFFFF;

        height: 35px;

        width: 904px;

        position: relative;

        left: 10px;

        top: 10px;

    }

    #div_18 .SectionTEXT p a {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 36px;

        font-style: normal;

        line-height: 45px;

        font-weight: normal;

        font-variant: normal;

        color: #666666;

    }

    a:hover {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 36px;

        font-style: normal;

        line-height: 45px;

        font-weight: normal;

        font-variant: normal;

        text-transform: none;

        color: #FF0000;

        text-decoration: none;

    }

    .nameplate {

        font-family: Blue;

        color: #666;

        font-style: normal;

        font-weight: inherit;

    }

    .forwardSlash {

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

        font-style: normal;

        font-weight: inherit;

    }

    .verticalSlash {

        font-family: Arial, Helvetica, sans-serif;

        font-style: normal;

        font-weight: lighter;

        color: #03AAF3;

    }

    .namePlateNOW {

        font-family: "Briem Akademi Std Semibold";

        font-style: inherit;

        font-weight: inherit;

        color: #F00;

    }

    .efitnesslogo {

        color: #FFF;

        visibility: hidden;

    }

    #div_18 .SectionTEXT p a {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        visibility: visible;

        color: #666666;

    }

    #HD1 {

        position: absolute;

        height: 352px;

        width: 230px;

        left: 10px;

        top: 0px;

    }

    #HD2 {

        position: absolute;

        height: 352px;

        width: 230px;

        left: 240px;

        top: 0px;

    }

    #HD3 {

        position: absolute;

        height: 352px;

        width: 230px;

        left: 470px;

        top: 0px;

    }

    #HD4 {

        position: absolute;

        height: 352px;

        width: 230px;

        left: 700px;

        top: 0px;

    }

    .GhostedBar {

        position: absolute;

        height: 105px;

        width: 570px;

        left: -10px;

        top: 190px;

        background-image: url(IMAGES/WhiteBar.png);

    }

    .WHTGRYBAR{

        position: absolute;

        height: 70px;

        width: 955px;

        top: 369px;

        left: 0px;

        background-repeat: no-repeat;

        background-image: url(IMAGES/WHT_GRAY_BOX_WRAP.svg);

    }

    .WHTGRYSHADOW{

        position: absolute;

        height: 75px;

        width: 924px;

        top: 370px;

        left: 4px;

        background-repeat: no-repeat;

        background-image: url(IMAGES/WHT_GRAY_SHADOW.png);

    }

       

    .BkgrndNAV {

        background-color: #C3D3F2;

        height: 1200px;

        width: 897px;

        position: absolute;

        left: 31.5px;

        top: 362.5px;

        opacity:

    }

    #MembersFtrContainer {

        position: absolute;

        height: 65px;

        width: 944px;

        left: 8px;

        top: 1630px;

        border-top: solid;

        border-top-color: #FF0A00;

        border-top-width: 1px;

        border-bottom: solid;

        border-bottom-color: #FFFFFF;

        border-bottom-width: 1px;

        border-left: solid;

        border-left-color: #FFFFFF;

        border-left-width: 1px;

        border-right: solid;

        border-right-color: #FFFFFF;

        border-right-width: 1px;

        background: #ffffff; /* Old browsers */

        background: -moz-linear-gradient(top,  #ffffff 11%, #bfd3fc 55%, #3e78fd 100%); /* FF3.6+ */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#ffffff), color-stop(55%,#bfd3fc), color-stop(100%,#3e78fd)); /* Chrome,Safari4+ */

        background: -webkit-linear-gradient(top,  #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* Chrome10+,Safari5.1+ */

        background: -o-linear-gradient(top,  #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* Opera 11.10+ */

        background: -ms-linear-gradient(top,  #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* IE10+ */

        background: linear-gradient(to bottom,  #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#3e78fd',GradientType=0 ); /* IE6-9 */

    }

    </style>

    <link href="Index.css" rel="stylesheet" type="text/css">

    <script id="form_init_script" data-name="" src="common/js/form_init.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="common/css/jquery-ui-1.8.5.custom.css"></link><link rel="stylesheet" type="text/css" href="common/css/normalize.css"></link><script type="text/javascript" src="common/libs_js/jquery-1.4.4.min.js"></script><link id="theme" href="theme/default/css/default.css" type="text/css" rel="stylesheet"></link><title>e-fitness NOW Origin</title><script type="text/javascript" src="common/libs_js/jquery-ui-1.8.9.custom.min.js"></script><script type="text/javascript" src="common/libs_js/jquery.ui.datepicker.js"></script><script type="text/javascript" src="common/libs_js/easyXDM/easyXDM.min.js"></script><script type="text/javascript" src="common/js/jquery.validate.js"></script><script type="text/javascript" src="common/libs_js/jquery.metadata.js"></script><script type="text/javascript" src="common/libs_js/jquery.placeholder.min.js"></script><script type="text/javascript" src="validation_data.js?249"></script><script type="text/javascript" src="common/js/validation.js"></script><script type="text/javascript" src="common/js/conditionals.js"></script><script type="text/javascript" src="common/js/lang/messages_validation.js"></script><script type="text/javascript" src="common/js/lang/messages_datepicker.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta name="viewport" content="width=960, user-scalable=yes"/><title>Index</title>

    <link rel="stylesheet" href="jQuery/themes/base/jquery.ui.all.css?version=11">

    <style type="text/css">

    a:link {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 36px;

        font-style: normal;

        line-height: 45px;

        font-weight: normal;

        font-variant: normal;

        text-transform: none;

        color: #666666;

        text-decoration: none;

    }

    a:visited {

        text-decoration: none;

        color: #666666;

    }

    a:active {

        text-decoration: none;

        color: #666666;

    }

    body,td,th {

        color:#666666;

    }

    .hover {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 36px;

        font-style: normal;

        line-height: 45px;

        font-weight: normal;

        font-variant: normal;

        text-transform: none;

        color: #FF0000;

    }

    body {

        margin-top: 0px;

       

    }

    .NEWnav {

        position: absolute;

        height: 45px;

        width: 920px;

        left: 20px;

        top: 380px;

    }

    </style>

    <script src="jQuery/jquery-1.4.4.js"></script>

    <script src="jQuery/ui/jquery.ui.core.js"></script>

    <script src="jQuery/ui/jquery.ui.widget.js"></script>

    <script src ="jQuery/ui/jquery.ui.tabs.js"></script>

    <script>

    $(function(){

            $("#Tab_5").tabs({});

        });

    function MM_swapImgRestore() { //v3.0

      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

    }

    function MM_preloadImages() { //v3.0

      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

        if (a.indexOf("#")!=0){ d.MM_p=new Image; d.MM_p[j++].src=a;}}

    }

    function MM_findObj(n, d) { //v4.01

      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

      if(!(x=d)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms;

      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

      if(!x && d.getElementById) x=d.getElementById(n); return x;

    }

    function MM_swapImage() { //v3.0

      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

       if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

    }

    </script>

    </head>

    <body bgcolor="#3E78FD" text="#666666" onLoad="MM_preloadImages('IMAGES/FitnessProgHvrClkBttn.png','IMAGES/What_HowHvrClkBttn.png','IMAGES/EnrollTodayHvrClkBttn.png','IMAGES/MemberLoginHvrClkBttn.png','IMAGES/GrnButtonHvrClk.png','IMAGES/FitnessProgHvrClkBttn.svg','IMAGES/What_HowHvrClkBttn.svg','IMAGES/EnrollTodayHvrClkBttn.svg','IMAGES/MemberLoginHvrClkBttn.svg','IMAGES/OriginHvrClkBttn1.svg','IMAGES/FitnessProgHvrClkBttn1.svg','IMAGES/What_HowHvrClkBttn1.svg','IMAGES/EnrollTodayHvrClkBttn1.svg','IMAGES/MemberLoginHvrClkBttn1.svg')">

          

    <div id="div_1">

    <div align="center">

      <div id="HD1"><img src="IMAGES/DBS_FOTOSEARCH_u14758523.png" width="230" height="352" alt="Women Competitive Swimmer" /></div>

     

      <div id="HD2"><img src="IMAGES/DBS_FOTOSEARCH_u18569747.png" width="230" height="350" alt="Hurdler" /></div>

      <div id="HD3"><img src="IMAGES/DBS_FOTOSEARCH_u24747386.png" width="230" height="350" alt="Golfer" /></div>

      <div id="HD4"><img src="IMAGES/DBS_FOTOSEARCH_u21161806.png" width="230" height="351" alt="Marathon Runners" /></div>

      <div class="GhostedBar"></div>

    </div>

    <div class="overlayLOGO">

     

     

      <img src="IMAGES/efitnessLOGO_copy1.svg" alt="e fitness now" width="508">

     

    </div>

    <!--end overlayLOGO div-->

    </div>

    <!--end headerImage div-->

    <!-- end div_1-->

    </div>

    <div class="BkgrndNAV"></div>

    <div class="WHTGRYSHADOW"></div>

    <div class="WHTGRYBAR"></div>

    <div class="NEWnav">

    <a href="Index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Origin','','IMAGES/OriginHvrClkBttn1.svg',1)"><img src="IMAGES/OriginNormBttn1.svg" alt="Origin Page" width="180" height="45" id="Origin"></a>

             

         <a href="FitnessPrograms.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('FitnessPrograms','','IMAGES/FitnessProgHvrClkBttn1.svg',1)"><img src="IMAGES/FitnessProgNormBttn1.svg" alt="Fitness Programs Page" width="180" height="45" id="FitnessPrograms"></a>

          

           <a href="Learn.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Learn','','IMAGES/What_HowHvrClkBttn1.svg',1)"><img src="IMAGES/What_HowNormBttn1.svg" alt="Learn What & How" width="180" height="45" id="Learn"></a>

          

           <a href="Enroll.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Enroll','','IMAGES/EnrollTodayHvrClkBttn1.svg',1)"><img src="IMAGES/EnrollTodayNormBttn1.svg" alt="Enroll Today Page" width="180" height="45" id="Enroll"></a>

          

           <a href="Members.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Members','','IMAGES/MemberLoginHvrClkBttn1.svg',1)"><img src="IMAGES/MemberLoginNormBttn1.svg" alt="Members Page" width="180" height="45" id="Members"></a>

          

    </div>

    <div id="div_18">

        <img src="IMAGES/FOTOSEARCH_x19148847.png" name="Image_14" id="Image_14" />

      <div class="INTROtext">

        <p>"WELCOME…Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."</p>

      </div>

    </div>

    <div id="div_19">

        <img id="Image_15" src="IMAGES/stock-photo-12488366-man-playing-golf.png" />

      <div class="SectionTEXT">

        <p>Sports Conditioning & <br>

          Personal Fitness Programs: <br>

          <a href="http://www.youtube.com/watch?v=4a0Q-IAqO8U" target="_blank" class="hover">Triathlons</a> | Running | Cycling<br>

          Swimming | Climbing | Surfing…</p>

      </div>

    </div>

    <div id="div_20">

        <img id="Image_16" src="IMAGES/000014338250_HDFlashVideo copy.png" />

      <div class="SectionTEXT">

        <p>Full Course Videos: <br>

          What We Do & <br>

        How e|fitnessNOW Programs Work for You … </p>

      </div>

    </div>

    <div class="SectionTEXT" id="div_21">

        <img id="Image_17" src="IMAGES/stock-photo-17198908-success-flow-chart-on-a-blackboard.png" />

        <div class="SectionTEXT">

        <p><br>

          Learn About Advanced Conditioning Programs…    </p>

      </div>

    </div>

    <div id="div_23">

        <img src="IMAGES/Bigstock_28225811.png" alt="Enroll Today Image of Track & Field Hurdlers" id="Image_24" />

      <div class="SectionTEXT"> <br>

          Fly Over Hurdles…<br>

          Sign-Up with an e|fitnessNOW Trainer Today!

      </div>

    </div>

    <div id="MembersFtrContainer">

      <div id="MemberFtrInsideContainer">

        <div class="FooterTEXT">© 2012–2017 e|fitnessNOW and e|fitnessTRAINER. All rights reserved. web design: grafacha.com | web development: Content for  class</div>

      </div>

    </div>

    </body>

    </html>

    CSS

    @import url("webfonts/DroidSans/stylesheet.css");

    #div_1

    {

        height : 349px;

        left : 8px;

        overflow : hidden;

        position : absolute;

        top : 11px;

        width : 944px;

        border-top: solid;

        border-top-color: #FF0A00;

        border-top-width: 1px;

        border-bottom: solid;

        border-bottom-color: #FF0A00;

        border-bottom-width: 1px;

    }

    .headerImage {

        position: absolute;

        width: 923px;

        height: 350px;

        margin-left: 10px;

        }

       

    .overlayLOGO {

        position: absolute;

        top: 205px;

        background-repeat: no-repeat;

        width: 590px;

        height: 150px;

        left: 20px;

        visibility: visible;

        }

       

    #efitnessLOGO

    {

        width: 5.823in;

        height: 1.938in;

        position: absolute;

        top: 25px;

        left: 45px;

        visibility: visible;

    }

       

    #textheader_3

    {

        height : 104px;

        left : 46px;

        overflow : hidden;

        position : absolute;

        top : 11px;

        width : 451px;

        color : #575756;

        font-family : Arial,sans-serif;

        font-size : 78px;

        line-height : 104px;

        margin-top : 0;

        width : 100%;

    }

    #textheader_3 a

    {

        color : #575756;

        text-decoration : none;

    }

    #Tab_5

    {

        left: 0px;

        top: 369px;

        width : 960px;

        position: absolute;

        height: 55px;

    }

    #div_18

    {

        height : 220px;

        left : 8px;

        position : absolute;

        top : 440px;

        width : 944px;

        border-top: solid;

        border-bottom: solid;

        border-bottom-color: #FF0A00;

        border-top-color: #FF0A00;

        border-bottom-width: 1px;

        border-top-width: 1px;

        background-color: #FFF;

    }

    #Image_14

    {

        height : 220px;

        left : 0px;

        overflow : hidden;

        position : absolute;

        top : 0px;

        width : 380px;

    }

    #div_19

    {

        height : 220px;

        left : 8px;

        overflow : hidden;

        position : absolute;

        top : 680px;

        width : 944px;

        background-color : #ffffff;

        border-bottom: solid;

        border-bottom-color: #FF0A00;

        border-bottom-width: 1px;

        border-top: solid;

        border-top-color: #FF0A00;

        border-top-width: 1px;

    }

    #Image_15

    {

        height : 220px;

        left : 0px;

        overflow : hidden;

        position : absolute;

        top : 0px;

        width : 380px;

    }

    #div_20

    {

        height : 220px;

        left : 8px;

        overflow : hidden;

        position : absolute;

        top : 920px;

        width : 944px;

        background-color : #ffffff;

        border-top: solid;

        border-top-color: #FF0A00;

        border-top-width: 1px;

        border-bottom: solid;

        border-bottom-color: #FF0A00;

        border-bottom-width: 1px;

    }

    #Image_16

    {

        height : 220px;

        left : 0px;

        overflow : hidden;

        position : absolute;

        top : 0px;

        width : 380px;

    }

    #div_21

    {

        height : 220px;

        left : 9px;

        overflow : hidden;

        position : absolute;

        top : 1160px;

        width : 943px;

        background-color : #ffffff;

        border-top: solid;

        border-top-color: #FF0A00;

        border-top-width: 1px;

        border-bottom: solid;

        border-bottom-color: #FF0A00;

        border-bottom-width: 1px;

    }

    #Image_17

    {

        height : 220px;

        left : 0px;

        overflow : hidden;

        position : absolute;

        top : 0px;

        width : 380px;

    }

    #div_23

    {

        height : 220px;

        left : 9px;

        overflow : hidden;

        position : absolute;

        top : 1400px;

        width : 943px;

        background-color : #ffffff;

        border-top: solid;

        border-top-color: #FF0A00;

        border-top-width: 1px;

        border-bottom: solid;

        border-bottom-color: #FF0A00;

        border-bottom-width: 1px;

    }

    #Image_24

    {

        height : 220px;

        left : 0px;

        overflow : hidden;

        position : absolute;

        top : 0px;

        width : 380px;

    }

    #div_22

    {

        height : 300px;

        left : 8px;

        overflow : hidden;

        position : absolute;

        top : 1632px;

        width : 944px;

        border-top: solid;

        border-top-color: #FF0A00;

        border-top-width: 1px;

        border-bottom: solid;

        border-bottom-color: #FFFFFF;

        border-bottom-width: 1px;

        border-left: solid;

        border-left-color: #FFFFFF;

        border-left-width: 1px;

        border-right: solid;

        border-right-color: #FFFFFF;

        border-right-width: 1px;

        background: #ffffff; /* Old browsers */

        /* IE9 SVG, needs conditional override of 'filter' to 'none' */

        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iI2JmZDNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzhjYjBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZTc4ZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

        background: -moz-linear-gradient(top, #ffffff 0%, #bfd3ff 66%, #8cb0ff 84%, #3e78fd 100%); /* FF3.6+ */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(66%,#bfd3ff), color-stop(84%,#8cb0ff), color-stop(100%,#3e78fd)); /* Chrome,Safari4+ */

        background: -webkit-linear-gradient(top, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* Chrome10+,Safari5.1+ */

        background: -o-linear-gradient(top, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* Opera 11.10+ */

        background: -ms-linear-gradient(top, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* IE10+ */

        background: linear-gradient(to bottom, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#3e78fd',GradientType=0 ); /* IE6-8 */

    <style>

          #docContainer .fb_cond_applied{ display:none;     visibility: visible;

    }

        </style><noscript>

          <style>

          #docContainer

          .fb_cond_applied{ display:inline-block; }

    </style>

    }

        

    #div_24 {

        height: 290px;

        width: 220px;

        background-color: #3e78fd;

        top: 11px;

        left: 246px;

        position: absolute;

        visibility: visible;

        border-left: solid;

        border-left-color: #FFFFFF;

        border-left-width: 1px;

        border-right: solid;

        border-right-color: #FFFFFF;

        border-right-width: 1px;

    }

    #div_25 {

        height: 290px;

        width: 220px;

        background-color: #3e78fd;

        top: 11px;

        left: 479px;

        position: absolute;

        visibility: visible;

        border-left: solid;

        border-left-color: #FFFFFF;

        border-left-width: 1px;

        border-right: solid;

        border-right-color: #FFFFFF;

        border-right-width: 1px;

    }

    #div_26 {

        height: 290px;

        width: 220px;

        background-color: #3e78fd;

        top: 11px;

        left: 710px;

        position: absolute;

        visibility: visible;

        border-left: solid;

        border-left-color: #FFFFFF;

        border-left-width: 1px;

        border-right: solid;

        border-right-color: #FFFFFF;

        border-right-width: 1px;

    }

    a:hover {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 36px;

        font-style: normal;

        line-height: 45px;

        font-weight: normal;

        font-variant: normal;

        text-transform: none;

        color: #FF0000;

        text-decoration: none;

    }

    .INTROtext {

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 18px;

        font-style: inherit;

        line-height: normal;

        font-weight: inherit;

        font-variant: normal;

        color: #666666;

        background-color: #FFFFFF;

        letter-spacing: normal;

        text-align: left;

        word-spacing: normal;

        position: absolute;

        width: 525px;

        left: 400px;

        bottom: 20px;

        text-decoration: none;

        top: 10px;

        text-align: justify;

    }

    #MemberFtrInsideContainer {

        background-color: #3e78fd;

        position: absolute;

        visibility: visible;

        height: 55px;

        width: 924px;

        left: 10px;

        top: 10px;

        border-left: solid;

        border-left-color: #FFFFFF;

        border-left-width: 1px;

        border-right: solid;

        border-right-color: #FFFFFF;

        border-right-width: 1px;

    }

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 21, 2009

    Actually the full answer is: 1) Use a valid X/HTML document.  2) Put a width on your container division AND 3) use margin: 0 auto.  If you're using APDivs, may need to add a position: relative property, too.

    CSS:

    #wrapper {

         width: 900px /**adjust as needed**/

         margin:0 auto;

         text-align:center; /**for older browsers**/

    }

    HTML:

    <body>

         <div id="wrapper>

         your page content goes here ---------->

         </div> <!--end wrapper-->

    </body>

    </html>

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

    Nancy O'Shea— Product User & Community Expert
      A
      Anonymous
      July 24, 2009

      Nancy - Thanks for your help. I was able to get my home (index) page to center. Do you know of a way to globaly make all the pages of the site (170+) center on the screen or do I need to go into each individually? - Ned

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      July 25, 2009

      Link all your web pages to a global external Stylesheet (CSS). 

      http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7e1ca.html

      Use Find & Replace Tool.

      http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7cc7a.html

      Example, search source code for <body> tag and replace it with

      <body>

      <div id="Wrapper">

      Repeat for closing </body> and end </div> tags.

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

      Nancy O'Shea— Product User & Community Expert
      H
      Harumbak_Correct answer
      Participant
      July 21, 2009

      Hi, I guess it depends on your layout. Of you're using CSS then you need to set the left and right margin of your main container to auto. Please check example below.

      HTML:

      <div id="main"> test</div>

      CSS:

      #main {

      margin-right: auto;

      margin-left: auto;

      }

      If you need to have a visual example for this, try opening a new HTML document using a CSS layout, you can do that by going to file>new>blank page> then select a CSS Layout for HTML.

      I hope this post makes sense to you. ;-)

        A
        Anonymous
        July 24, 2009

        Thank you for your expertise. I got it to work on my index page. Now I just need to figure out if there's a way to globaly do the same thing for the rest of the site (it has 170+ pages). It is an HTML 4.0 site created in Dreamweaver 8. Any suggestions?

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices