3 Replies Latest reply on Dec 24, 2008 5:33 AM by Newsgroup_User

    CSS - page centering

    tgwarrior
      I'm new to CSS and want to center the content of my pages. I've used text-align: center to define the body tag, which I believed would center every <div> tag that was included in the page. Everything is still showing up as left justified.

      Here is the URL -- http://www.hopechurchdc.org/index2.html

      Here is the CSS:

      body {
      font: .8em Verdana, Geneva, Arial, helvetica, sans-serif;
      margin: 20px;
      padding: 20px;
      background: #FFFFFF;
      text-align: center;
      }

      h1, h2, h3, h4, p, ul, ol {
      margin: 0px;
      padding: 0px;
      }

      a img {
      border: none;
      }

      /* LAYOUT */
      #banner {
      width: 500px;
      height: 200px; /* check height */
      text-align: left;
      margin-right: 0px;
      margin-left: auto;
      float: left;
      }

      #sitetools {
      position: absolute;
      top: 40px;
      left: 600px;
      width: 200px;
      text-align: center;
      vertical-align: top;
      clear:both;
      }

      #wrapper_content {
      width: 770px;
      margin-right: auto;
      margin-left: auto;
      margin-top: 200px; /*check distance */
      background: #FFFFFF;
      text-align: left;
      }

      #nav {
      margin:0;
      padding:0;
      background:#808259 url(file:///C|/Inetpub/wwwroot/hopechurch/nav_bg.jpg) 0 0 repeat-x;
      float:left;
      width:776px;
      border:1px solid #42432d;
      border-width:1px 0;
      }


      #main {
      float: left;
      width: 750px;
      margin-top: 10px;
      padding: 10px;
      border: 3px solid #808259;
      text-align: left;
      clear: both;
      }

      #footer {
      width: 750px;
      margin-top: 10px;
      padding: 10px;
      text-align: left;
      float: left;
      }

      /* NAVIGATION */
      #nav li {
      display:inline;
      padding:0;
      margin:0;
      }


      #nav a:link,
      #nav a:visited {
      color:#000;
      background:#c4dc88;
      padding:20px 40px 4px 10px;
      float:left;
      width:auto;
      border-right:1px solid #42432d;
      text-decoration:none;
      font:bold 1.1em/1.1em Arial, Helvetica, sans-serif;
      text-transform:uppercase;
      text-shadow: 2px 2px 2px #555;
      }



      #nav li:first-child a {
      border-left:1px solid #42432d;
      }



      #nav a:hover {
      color:#fff;
      background:#727454;
      }




      #home #nav-home a
      #about #nav-about a
      #archive #nav-archive a
      #lab #nav-lab a
      #reviews #nav-reviews a
      #contact #nav-contact a {
      background:#e35a00;
      color:#fff;
      text-shadow:none;
      }


      #home #nav-home a:hover,
      #about #nav-about a:hover,
      #archive #nav-archive a:hover,
      #lab #nav-lab a:hover,
      #reviews #nav-reviews a:hover,
      #contact #nav-contact a:hover {
      background:#e35a00;
      }


      #nav a:active {
      background:#e35a00;
      color:#fff;
      }