Skip to main content
July 21, 2009
Answered

Center web page on browser screen in Dreamweaver?

  • July 21, 2009
  • 3 replies
  • 89417 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
    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.

    Participant
    July 25, 2009

    Hi,

    I tried adding a div wrapper tag to my DW CS4 template that I use for all my pages. I selected the body and inserted the div wrapper tag. When I previewed, all of it centered except the very background image. Inserted is my css markup.. please let me know what I am doing wrong.. thanks!!!


    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>UNTITLED</title>
    <!-- TemplateEndEditable -->
    <link href="../photostyles.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <script type="text/javascript">
    <!--
    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_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_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 onload="MM_preloadImages('../photoshop_sliced_exports/overstates/images/Blog_over.jpg','../photoshop_sliced_exports/overstates/images/Portfolio_over.jpg','../photoshop_sliced_exports/overstates/images/Photo_over.jpg','../photoshop_sliced_exports/overstates/images/art_over.jpg','../photoshop_sliced_exports/overstates/images/clutter_over.jpg','../photoshop_sliced_exports/overstates/images/contact_over.jpg')">
    <div id="wrapper">
      <div id="container">
        <div id="header">
          <img src="../photoshop_sliced_exports/header.jpg" alt="Di Lynn Ring header" width="955" height="98" border="0" usemap="#Map" />
          <map name="Map" id="Map">
            <area shape="rect" coords="123,17,841,93" href="../index.htm" />
          </map>
          <div id="menubar"><a href="../index.htm"><img src="../photoshop_sliced_exports/btnblog.jpg" alt="Blog Button" width="107" height="62" id="Image1" onmouseover="MM_swapImage('Image1','','../photoshop_sliced_exports/overstates/images/Blog_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../portfoliogallery/portfoliogallery/index.html"><img src="../photoshop_sliced_exports/btnportfolio.jpg" alt="Portfolio Button" width="174" height="62" id="Image2" onmouseover="MM_swapImage('Image2','','../photoshop_sliced_exports/overstates/images/Portfolio_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../photo gallery/index.html"><img src="../photoshop_sliced_exports/btnbutton.jpg" alt="Photo Button" width="131" height="62" id="Image3" onmouseover="MM_swapImage('Image3','','../photoshop_sliced_exports/overstates/images/Photo_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../artgallery/index.html"><img src="../photoshop_sliced_exports/btnart.jpg" alt="Art Button" width="84" height="62" id="Image4" onmouseover="MM_swapImage('Image4','','../photoshop_sliced_exports/overstates/images/art_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../clutter.htm"><img src="../btnclutter.jpg" alt="Clutter Button" width="133" height="62" id="Image5" onmouseover="MM_swapImage('Image5','','../photoshop_sliced_exports/overstates/images/clutter_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../contact.htm"><img src="../photoshop_sliced_exports/btncontact.jpg" alt="Contact Button" width="142" height="62" id="Image6" onmouseover="MM_swapImage('Image6','','../photoshop_sliced_exports/overstates/images/contact_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
          <div id="main"><!-- TemplateBeginEditable name="content_area" -->
            <div id="contentbox"></div>
          <!-- TemplateEndEditable --></div>
        </div>
      </div>
    </div>
    </body>
    </html>

    Nancy OShea
    Community Expert
    Community Expert
    July 25, 2009

    asicollapse,

    Please post a URL to your page on the web server. We would need to see your HTML and CSS code to give meaningful answers.

    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
    Nancy OShea
    Community 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
    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
    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
    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. ;-)

    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?