2 Replies Latest reply on Oct 2, 2007 7:40 AM by Newsgroup_User

    Using CSS and HTML

    sarahthedesigner
      Hello, in response to a previous question I got some great instuctions on how to centre my pages vertically. The only problem is I don't know what this bit means to do! Where do I put these pieces of code (from http://apptools.com/examples/tableheight.php)? I've already got a large amount of code and am new to this so its a little confusing:

      Now that we have achieved 100% height with our table, it becomes a simple matter to center content. Let's take the following CSS:

      html, body, #wrapper {
      height:100%;
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
      }
      #wrapper {
      margin: 0 auto;
      text-align: left;
      vertical-align: middle;
      width: 400px;
      }


      Use the above CSS along with the following HTML:

      <body>
      <table id="wrapper">
      <tr>
      <td>This is centered</td>
      </tr>
      </table>
      </body>
        • 1. Re: Using CSS and HTML
          Level 7
          Its difficult to advise you unless we can see your pages code/css.

          Any chance of uploading it somewhere and giving a link. That way someone
          will be able to tell you if you can do this or you can't

          IF you ARE using tables then it would be a simple procedure.

          You need to 'wrap' your existing tables into another table with the id
          'wrapper' like

          <table id="wrapper" width="WhatEverYouRequire" cellspacing="0"
          cellpadding="0" border="0">
          <tr>
          <td>ALL OF YOUR OTHER TABLES CODE GO INSIDE THIS CELL</td>
          </tr>
          </table>


          Then you use the below css to control the vertical and horizontal
          positioning of the "wrapper" table. The css can either go into your
          existing css stylesheet (if you have one) OR you can cut and paste it
          into the head section of your pages code. IF you cut and paste you also
          need to include <style type="text/css"></style> tags around the css.


          So if you have a stylesheet cut and paste the following into it:


          html, body, #wrapper {
          height:100%;
          margin: 0;
          padding: 0;
          border: none;
          text-align: center;
          }
          #wrapper {
          margin: 0 auto;
          text-align: left;
          vertical-align: middle;
          width: 400px;
          }


          IF you DON'T have a stylesheet cut and paste the following into your
          pages code, insert it directly before the closing </head> tag.

          <style type="text/css">
          html, body, #wrapper {
          height:100%;
          margin: 0;
          padding: 0;
          border: none;
          text-align: center;
          }
          #wrapper {
          margin: 0 auto;
          text-align: left;
          vertical-align: middle;
          width: 400px;
          }
          </style>





          sarahthedesigner wrote:
          > Hello, in response to a previous question I got some great instuctions on how
          > to centre my pages vertically. The only problem is I don't know what this bit
          > means to do! Where do I put these pieces of code (from
          > http://apptools.com/examples/tableheight.php)? I've already got a large amount
          > of code and am new to this so its a little confusing:
          >
          > Now that we have achieved 100% height with our table, it becomes a simple
          > matter to center content. Let's take the following CSS:
          >
          > html, body, #wrapper {
          > height:100%;
          > margin: 0;
          > padding: 0;
          > border: none;
          > text-align: center;
          > }
          > #wrapper {
          > margin: 0 auto;
          > text-align: left;
          > vertical-align: middle;
          > width: 400px;
          > }
          >
          >
          > Use the above CSS along with the following HTML:
          >
          > <body>
          > <table id="wrapper">
          > <tr>
          > <td>This is centered</td>
          > </tr>
          > </table>
          > </body>
          >
          • 2. Re: Using CSS and HTML
            Level 7
            > html, body, #wrapper {
            > height:100%;
            > margin: 0;
            > padding: 0;
            > border: none;
            > text-align: center;
            > }
            > #wrapper {
            > margin: 0 auto;
            > text-align: left;
            > vertical-align: middle;
            > width: 400px;
            > }

            Put this in the head of the page, in an embedded stylesheet, e.g.,

            <style type="text/css">
            html, body, #wrapper {
            height:100%;
            margin: 0;
            padding: 0;
            border: none;
            text-align: center;
            }
            #wrapper {
            margin: 0 auto;
            text-align: left;
            vertical-align: middle;
            width: 400px;
            }
            </style>
            </head>
            <body>
            <table id="wrapper">
            <tr>
            <td>This is centered</td>
            </tr>
            </table>
            </body>

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


            "sarahthedesigner" <webforumsuser@macromedia.com> wrote in message
            news:fdti4p$h9d$1@forums.macromedia.com...
            > Hello, in response to a previous question I got some great instuctions on
            > how
            > to centre my pages vertically. The only problem is I don't know what this
            > bit
            > means to do! Where do I put these pieces of code (from
            > http://apptools.com/examples/tableheight.php)? I've already got a large
            > amount
            > of code and am new to this so its a little confusing:
            >
            > Now that we have achieved 100% height with our table, it becomes a simple
            > matter to center content. Let's take the following CSS:
            >
            > html, body, #wrapper {
            > height:100%;
            > margin: 0;
            > padding: 0;
            > border: none;
            > text-align: center;
            > }
            > #wrapper {
            > margin: 0 auto;
            > text-align: left;
            > vertical-align: middle;
            > width: 400px;
            > }
            >
            >
            > Use the above CSS along with the following HTML:
            >
            > <body>
            > <table id="wrapper">
            > <tr>
            > <td>This is centered</td>
            > </tr>
            > </table>
            > </body>
            >