Professional Web Applications Themes

Centering webpage - Macromedia Dynamic HTML

Hello all, I have created a web page to fit a 800x600 screen, but on the larger screens its way over on the left... so can someone please explain, in layman terms how I can centre the main area automatically. Thanks in advance Robert...

  1. #1

    Default Centering webpage

    Hello all,

    I have created a web page to fit a 800x600 screen, but on the larger screens
    its way over on the left... so can someone please explain, in layman terms how
    I can centre the main area automatically.

    Thanks in advance
    Robert

    rjb118 Guest

  2. #2

    Default Re: Centering webpage

    It would depend on how you have built the page, but there are two general
    ways to do this -

    1. Build the page inside an outer, centering, fixed width table, or
    2. Build the page inside an outer, centering, fixed width div

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com - Template Triage!
    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
    ==================


    "rjb118" <com> wrote in message
    news:fce3tv$nt0$macromedia.com... 


    Murray Guest

  3. #3

    Default Re: Centering webpage

    Robert,

    This question comes up an awful lot here and there are plenty of lengthy
    answers that you can search for in the forum archives.

    I would recommend not using a table to center a page but use CSS as the
    standards compliant and widely recognized way of achieving this effect.

    There are two way you can lay out and center your design using CSS. The first
    is possibly the most popular and simple to understand:

    USING AUTO MARGINS

    Inside the <body></body> tag set add a <div id="wrapper"></div> to hold your
    design.

    In CSS define the width and set horizontal margins to auto, like this:

    #wrapper{
    width: 720px;
    margin: 0 auto;
    }

    I have used px here but you could use ems or % depending on your requirements.

    IE5.x and IE6, in quirks mode needs some help as it does not recognize auto
    margin settings. Add the following:

    body{
    text-align: center;
    }

    #wrapper{
    width: 720px;
    margin: 0 auto;
    text-align: left;
    }

    This fixes the auto margin problem by using text-align: center, which IE also
    fails to understand. You can google for a more detailed explanation if you
    need to know why this works.

    If you are worried about Netscape 6 then you will need another fix but this
    browser is fairly ancient now and it is of little relevance. However, to
    prevent the left side of the wrapper spilling off of the side of the page when
    the browser window is reduced below the width of the wrapper, add this code:

    body{
    text-align: center;
    min-width: 760px;
    }

    This causes scroll bars to appear if the browser window in N6 is reduced below
    the width of the wrapping div.

    POSITIONING AND NEGATIVE MARGINS

    I have used this; just to be different, on some designs:

    #wrapper{
    width: 720px;
    position: relative;
    left: 50%;
    margin-left: -360px;
    }

    Relative and left 50% position the left of the wrapper in the middle of the
    page. To get the middle of the wrapper in the middle of the view port apply a
    negative margin, equal to half the wrapper width, to the left side of the
    wrapper. Simple!

    As a slight aside I would recommend looking at alternatives to fixed-width
    designs for 800x600 viewports. Monitors are increasingly becoming larger than
    this sizing and there is a lot of potential viewing area going to waste.
    Liquid and elastic layouts are quite easy to implement now and although the
    design needs more care, particularly when handling images, the benefits and
    flexibility are worth considering.

    Nick Guest

  4. #4

    Default Re: Centering webpage

    > I would recommend not using a table to center a page but use CSS as the 

    Using a table would also be standards compliant, and may well be the method
    most consistent with the original poster's skill set.


    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com - Template Triage!
    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
    ==================


    "Nick Barling" <com> wrote in message
    news:fcejrf$c80$macromedia.com... 


    Murray Guest

Similar Threads

  1. Centering div with CSS
    By pixelchick80 in forum Macromedia Dynamic HTML
    Replies: 9
    Last Post: April 23rd, 07:12 PM
  2. centering a div tag usind css
    By ian2003 in forum Macromedia Dynamic HTML
    Replies: 8
    Last Post: December 17th, 01:09 PM
  3. Centering Pages
    By tech27 in forum Web Design
    Replies: 4
    Last Post: July 24th, 03:46 AM
  4. Centering
    By analog@logwell.com in forum Web Design
    Replies: 4
    Last Post: June 26th, 03:12 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139