Anonymous

Answered

Center web page on browser screen in Dreamweaver?

Forum|Forum|16 years ago
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:

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. ;-)

David_Powers

Inspiring

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.

asicollapse

Participant

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
Forum|Forum|16 years ago
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
Forum|Forum|16 years ago
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> 

</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

Anonymous

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
Forum|Forum|16 years ago
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
Forum|Forum|16 years ago
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. ;-)

Anonymous

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?

Powered by Gainsight
Terms & Conditions Accessibility statement

Sign up

Already have an account? Login

To post, reply, or follow discussions, please sign in with your Adobe ID.
Sign in

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.
Sign in

Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.

Enter your e-mail address

Back to overview

Scanning file for viruses.

Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
OK

This file cannot be downloaded

Sorry, our virus scanner detected that this file isn't safe to download.
OK

Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information AdChoices