Skip navigation
Currently Being Moderated

My web page centers in the design view, but not when viewed on line.

Mar 26, 2013 11:43 PM

Tags: #dreamweaver

I am new to web design and of course, to this forum.  I had some background in VBA and Fortran, so when the original designer left, I was the only one in the organization willing to tackle the website and try to teach myself how to make it work and keep it current.  We were financially in the red at the time, so hiring outside help would have been almost impossible.  We are finally breaking even now, which was our goal as a non-profit.

 

So I inherited the computer and the responsibility for maintaining the website at a non-profit organization for kids in Florida a couple of years ago, and I am doing pretty well with it so far, even though my depth of knowledge is very shallow.  AsI said before, I am entirely self taught, mostly by the trial and error method, so please excuse what is probably a very basic question. 

 

My website is FloridaBandTournament.com.

 

The site is working pretty well for my users, but from an appearance standpoint, the pages always are on the left side of the screen.  I would like to center the page(s) in the screen so that it looks a little better.  They are on a black background - not sure how the background got there, but it is working fine for me.  When I tried to center the pages, I googled my way to the statement text-align: center, and after placing it a couple of different places in the code, it suddenly seemed to work, at least in the in Dreamweaver 8 (I also inherited the software, which is I know is old, but so am I - will be 70 soon, and do my work for free for the organization).  But when I went to a couple of different browsers, it still displayed the website on the left.  I tried Firefox and IE.  I am at a loss as to what to do.

 

When I found this forum, I thought maybe somebody could help me know what to do to make this centering of the page happen in a simple way for this old geezer.  I would sure appreciate it.

 

I do not know what I should be communicating to you, but I thought if I sent the code in the body, it might help.

 

The body code is as follows;

 

body  [

 

    background-image: url(file:///C|/Documents and Settings/user/Application Data/Macromedia/Dreamweaver 8/configuration/ServerConnections/www/images/background.gif):

 

   background-color:  #000000;

 

   margin-top:  0px;

   margin-left: 0px

   margin-bottom: 0px

   margin-right: 0px

  text-align:center

 

]

 

None of the pages in the active website have this code yet - I have a trial page that I am testing.  The trial page can be accessed from the link at the bottom of the 'links' page for 'Show Host Infoormation' (the mis-spelling is temporary and intentianal so I can find the darn test link myself when I want to).

 

I would be glad to provide any information that might help someone understand what I have and what I am trying to do, but again, I am self-taught so I have little understanding of the technical terms.  I would sure appreciate any help.  Thanks in advance.

 

Bob

 
Replies
  • Currently Being Moderated
    Mar 27, 2013 12:01 AM   in reply to RJQMAN

    Hi,

     

    Can you check the solution posted on the thread Center web page on browser screen in Dreamweaver?

     

    Thanks,

    Preran

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 12:31 AM   in reply to RJQMAN

    First obviously make a back-up of the pages/s.

     

    Go into code view in Dreamweaver and find the below html. Its near the top of the page after the css. You don't need to first table <table> </table> so you can delete that. It's the second table that we are interest in. See below I have added id="pageWrapper" to the opening <table tag.

     

    <table width="795" border="0" cellpadding="0" cellspacing="0">

      <!--DWLayoutTable-->

      <tr>

        <td width="795" height="19" valign="top" bgcolor="#000000"><!--DWLayoutEmptyCell--> </td>

      </tr>

    </table>

     

    <table id="pageWrapper" width="795" border="0" cellpadding="0" cellspacing="0">

      <!--DWLayoutTable-->

     

     

     

    Then add this to your css styles in the head setcion of the page.

     

    #pageWrapper {

        margin: 0 auto;

    }

     

    You'll have to do this for each page of the site you want centered, which could be a pain if you have many pages.

     

     

     

    Also your background image is linked to your local computer thats why you are not seeing it but have a black background instead:

     

    body {

        background-image: url(file:///C|/Documents and Settings/user/Application Data/Macromedia/Dreamweaver 8/Configuration/ServerConnections/www/images/background.gif);

        background-color: #000000;

        margin-left: 0px;

        margin-top: 0px;

        margin-right: 0px;

        margin-bottom: 0px;

    }

     

     

    If you want the image to appear amend the link to as below:

     

    body {

        background-image: url(images/background.gif);

        background-color: #000000;

        margin-left: 0px;

        margin-top: 0px;

        margin-right: 0px;

        margin-bottom: 0px;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 2:48 AM   in reply to RJQMAN

    Change the following to

    body  {

        background-image: url(file:///C|/Documents and Settings/user/Application Data/Macromedia/Dreamweaver 8/configuration/ServerConnections/www/images/background.gif):

       background-color:  #000000;

       margin-top:  0px;

       margin-left: 0px

       margin-bottom: 0px

       margin-right: 0px

      text-align:center

    }

    To

    body {

        background-image: url(images/background.gif);

        background-color: #000000;

        margin: auto;

        width: 795px;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 11:57 AM   in reply to RJQMAN

    I do not know what is correct, or perhaps they both are.

     

    "margin:0 auto" is shorthand for margin-top:0, margin-right:auto, margin-bottom:0, margin-left:auto. And "margin:0" would be shorthand for  margin-top:0, margin-right:0, margin-bottom:0, margin-left:0. This pattern is the same for padding, border, and any other style that can affect all 4 sides of some page element. If you are using auto margins to center something, it must be something that is display:block, either explicitly or implicitly, and it must have an assigned width, either in the CSS or via the width attribute.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 3:18 PM   in reply to MurraySummers

    TRouBLe - Top, Right, Bottom, Left

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

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