Skip navigation
nhirschler
Currently Being Moderated

Center web page on browser screen in Dreamweaver?

Jul 21, 2009 2:45 PM

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?

 
Replies
  • Currently Being Moderated
    Jul 21, 2009 3:20 PM   in reply to nhirschler

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 21, 2009 3:31 PM   in reply to nhirschler

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 22, 2009 2:18 AM   in reply to nhirschler

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2009 11:20 AM   in reply to nhirschler

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

    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af55445948 22510a94ae8d65-7e1ca.html

     

    Use Find & Replace Tool.

    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340d cda9110b1f693f21-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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2009 12:22 PM   in reply to David_Powers

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2009 12:34 PM   in reply to asicollapse

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2009 12:56 PM   in reply to Nancy O.

    <!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Di</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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

     

    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&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[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=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/imag es/Blog_over.jpg','../photoshop_sliced_exports/overstates/images/Portf olio_over.jpg','../photoshop_sliced_exports/overstates/images/Photo_ov er.jpg','../photoshop_sliced_exports/overstates/images/art_over.jpg',' ../photoshop_sliced_exports/overstates/images/clutter_over.jpg','../ph otoshop_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/ov erstates/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/ov erstates/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/ov erstates/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/ov erstates/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/ov erstates/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/ov erstates/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>

    
    
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2011 10:16 AM   in reply to David_Powers

    I am having a similar problem. I read through and followed all directions in the "Centering a Page" forum. The content of the page will center, but my background image will not. Someone else had posted this question, but I didn't see the answer. Any help would be appreciated.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2011 10:48 AM   in reply to cenelson_stateline7

    Without seeing your page and its underlying code, there is no way we can answer your question.  Please start a new thread and include a link to the live page.  That way we can see everything we need to answer without guessing and we don't clutter this thread with discussion that may be unrelated to the original question.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2011 10:49 AM   in reply to asicollapse

    What's in photostyles.css?

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2011 12:15 PM   in reply to MurraySummers

    I have posted a new thread : Web page layout using template

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 8, 2012 4:39 PM   in reply to David_Powers

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 8, 2012 4:57 PM   in reply to peterattrsb

    @Peter

    To center a web page you need 3 basic things:

     

    1. A valid document type  in your HTML markup.  Good news, DW does this for you when a create a new HTML page.
    2. A CSS container width.
    3. CSS margin-right and margin-left of *auto* (browser default).

     

    CSS Code:

     

    #container {

    width: 900px; /**adjust width in px, ems or %**/

    margin:0 auto; /**centered**/

    border: 1px solid green; /**for demo purposes only**/

    }

     

    HTML:

     

    <div id="container">

    YOUR PAGE CONTENT GOES INSIDE THIS CONTAINER

    </div>

     

    If this doesn't work, you'll need to post a URL to your page (preferred) or paste your HTML and CSS code into a web forum reply (not in email).

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 7:40 AM   in reply to Nancy O.

    I am having a similar problem. I believe I followed the instructions that you posted here correctly, and I did some reading about centering a page and displaying the page at 100% but I can't seem to make them work correctly.


    I designed a website which was 1000px wide and now they want it changed (they want an image on both sides of the page)-so instead of changing it around completely and trying to mess with the areas and buffers and all of that fun stuff. I decided to leave the #container (which is were all the data for the site is and were as the template is applied to other pages the size will change -the height will change but the width should stay 100px.)that was there and then wrapp it up completly in another div tag which i labeled #master_container then I inserted 2 more div tags and placed the images on either side as is desired. I followed the instructions above (because now the site is soo big displaying in a browser is diffacult). I need the site to do 3 things.

     

    -i need it to display centered on the page so that no matter what browser it is displayed in or what size screen it is viewed on it fits the center of the screen.

     

    -I also would like it to fit the screen of the person using it so that they see the whole page as one and there isn't a huge blank space on one of the sides -right now it is on the right.

     

    -if you know how to make the two images on the side of the screen scroll as the person scrolls down the page-(ie-so that they don't see part of the image sometimes and other parts of it when they move farther down-wouldl like it to scroll with them as they move down the page)

     

    HERE IS THE XHTML CODE OF MY SITE:

     

    <!DO.TYPE 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>Untitled Document</title>

    <style type="text/css">

    </style>

    <link href="../Unicorn_main_layout_template_oldform - CopytestCSS.css" rel="stylesheet" type="text/css" />

    </head>

     

    <body>

    <div id="Master_container">

      <div id="ancestor_left"><img src="../Images/ancestor_cropped.jpg" width="659" height="1003" alt="ancestor right" /></div>

      <div class="container">b</div>

      <div id="ancestor_right"><img src="../Images/ancestor_cropped.jpg" width="659" height="1003" alt="ancestor_right" /></div>

    </div>

    </body>

    </html>

     

    HERE IS THE CSS STYLESHEET ATTACHED TO THE TEMPLATE I AM TRYING TO APPLY TO ALL OF THE PAGES OF THE SITE.

     

    @charset "utf-8";

    /* CSS Document */

     

    #body {

        text-align:center;

        margin: 0;

        padding: 0;

        width: 100%;

        height: 100%;

    }

    #Master_container {

        width: 2300px;

        margin: 0 auto;

        text-align: left;

        margin-right:auto;

        margin-left:auto;

       

    }

    #ancestor_left {

        float: left;

        width: 660px;

    }

     

    .container {

        height: auto;

        width: 1000px;

    }

    #ancestor_right {

        width: 660px;

        float: right;

    }

     

     

    THANK YOU VERY MUCH FOR YOUR HELP!!!

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 10:07 AM   in reply to jsmcrawler

    @jsmcrawler,

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

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

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 13, 2013 4:51 AM   in reply to jsmcrawler

    use margin: 0 ; in css.

    Not really sure what your asking.

     

    [link removed]

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 5:50 PM   in reply to 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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

    }

     

    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[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=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/W hat_HowHvrClkBttn.png','IMAGES/EnrollTodayHvrClkBttn.png','IMAGES/Memb erLoginHvrClkBttn.png','IMAGES/GrnButtonHvrClk.png','IMAGES/FitnessPro gHvrClkBttn.svg','IMAGES/What_HowHvrClkBttn.svg','IMAGES/EnrollTodayHv rClkBttn.svg','IMAGES/MemberLoginHvrClkBttn.svg','IMAGES/OriginHvrClkB ttn1.svg','IMAGES/FitnessProgHvrClkBttn1.svg','IMAGES/What_HowHvrClkBt tn1.svg','IMAGES/EnrollTodayHvrClkBttn1.svg','IMAGES/MemberLoginHvrClk Bttn1.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/FitnessProgHvr ClkBttn1.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 &amp; <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 &amp; <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.p ng" />

        <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 &amp; 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/Pgo8c3ZnIHh tbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdod D0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI +CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVud FVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjE wMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3Rvc C1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iI2J mZDNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3Rvc C1jb2xvcj0iIzhjYjBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ 9IjEwMCUiIHN0b3AtY29sb3I9IiMzZTc4ZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvb GluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0 iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

        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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2013 12:06 PM   in reply to AEE3

    You can't center APDivs.

     

    My advice is to drop APDivs altogether.  You don't need them. You shouldn't use them except for very special situations anyway. Also your CSS code is unecessarily bloated with stuff you don't need. 

     

    Start with a simple centered layout like this one. 

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Layout</title>
    <style>
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    width: 1000px;
    margin: 0 auto; /**with width, this is centered**/
    padding: 0;
    color: #000;
    background: #069;
    }
    
    section {
    margin: 0;
    padding: 0;
    background: #FFF;
    overflow: hidden; /**float containment**/
    }
    
    header {
    margin: 0;
    padding: 0;
    min-height: 50px;
    background: #FFC
    }
    
    section aside {
    margin: 0 1%;
    padding: 0 1%;
    float: left;
    width: 29%;
    background: #FFF;
    border: 1px dotted #CCC;
    min-height: 100px;
    }
    /**clear floats afterwards**/
    aside-nth:child(3) {
    clear:left;
    }
    
    footer {
    min-height: 25px;
    background: #9CCDCD;
    overflow: hidden;
    }
    
    footer aside {
    float: left;
    width: 48%;
    padding: 0 1%;
    }
    
    /**re-usable classes**/
    .center {text-align:center}
    .right {text-align:right}
    
    /**TEXT STYLES**/
    h1, h2, h3, h4 {margin:0;}
    p {font-size: 1em}
    
    </style>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
    
    <section>
    
    <header>
    <h1>Header</h1>
    </header>
    
    <!--columns-->
    <aside><p>Aside</p>
    <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></aside>
    
    <aside><p>Aside</p>
    <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></aside>
    
    <aside><p>Aside</p>
    <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></aside>
    </section>
    
    <footer>
    <aside>Footer &lt;aside&gt;</aside>
    <aside class="right">Footer &lt;aside .right&gt;</aside>
    </footer>
    
    </body>
    </html>
    
    

     

    Add a few styles for things you need and nothing you don't. Keep it simple.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

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