locked
Centering my web page RRS feed

  • Question

  • I have followed step by step tutorials trying to make my webpage centered but am still having alot of trouble with it and can't figure out where I went wrong. Please Help!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <!-- #BeginEditable "doctitle" -->
    <title>Untitled 1</title>
    <!-- #EndEditable -->
    <link href="body.css" rel="stylesheet" type="text/css" />
    <link href="container.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    a {
     color: #000000;
    }
    .auto-style4 {
     text-align: center;
    }
    .auto-style2 {
     border-width: 0px;
     margin-left: 6px;
     margin-right: 6px;
    }
    .auto-style21 {
     margin-bottom: 0px;
    }
    .auto-style3 {
     text-align: right;
     font-size: xx-large;
     font-family: Calibri;
    }
    .auto-style57 {
     font-family: "Lucida Calligraphy";
     color: #FF0000;
     font-weight: bold;
     font-size: medium;
    }
    </style>
    </head>

    <body>

    <!-- #BeginEditable "body" -->
    <div>
    </div>
    <!-- #EndEditable -->
    <div id="container">

     <div id="layer4" style="position: absolute; width: 120px; height: 622px; z-index: 5; left: 7px; top: 22px; background-color: #FFFFFF; visibility: visible;" class="auto-style4">

      <br />

      <a href="HVS%20Line%20Integrator-Imperial.html">
      <img alt="" class="auto-style2" height="56" src="Light%20Gauge/herr-voss%20logo.png" width="105" /></a><br />
      <br />
      <a href="javascript:history.go(-1)">Go Back</a><br />
      <br />
      <a href="Light%20Gauge/me.close()">Close</a><br />
    </div>

    <div id="layer10" style="position: absolute; width: 100%; height: 72px; z-index: 4; left: 0px; top: 0px; background-color: #000000">

    <div id="layer11" style="position: absolute; width: 642px; height: 54px; z-index: 5; left: 139px; top: 22px; color: #000000; background-color: #FFFFFF; visibility: visible" class="auto-style21">
    <!-- #BeginEditable "Title" -->
    <div id="layer5" class="auto-style3" style="position: absolute; width: 637px; height: 39px; z-index: 6; left: 2px; top: 2px; visibility: visible;">
     </div>

    <!-- #EndEditable -->

    </div>

     <div id="layer12" class="auto-style57" style="position: absolute; z-index: 6; left: 22px; top: 0px">
      Confidential</div>

    </div>

    <div id="layer3" style="position: absolute; width: 642px; height: 558px; z-index: 1; left: 139px; top: 86px; color: #000000; background-color: #FFFFFF; visibility: visible">
     <!-- #BeginEditable "Text" -->
     <form method="post">
     </form>
    <!-- #EndEditable -->
    </div>

     </div>

    </body>

    </html>

    Monday, May 21, 2012 2:27 PM

Answers

  • You will never--never--get it to center using the methods I see in the above code.

    You have 6 divs that use layers--position: absolute . You have 57 auto-styles. Those are signs that you are trying to use EW as a drag-and-drop web builder, and it ain't. And you're using the toolbar buttons to style things. And you're not using web-safe fonts nor creating proper font families. And you're using spaces in file and folder names. No reputable tutorial told you to do any of that.

    Never ever, ever, ever, ever use layers. Ever. Well, almost never. They are deceptively easy, but full of pitfalls that you must be thoroughly aware of before you can use them. The web ain't print; that's why layers are so problematic.

    Read the Forum FAQ - Start Here. In particular, read the post about what is necessary to use EW. There are also learning links in there. Start with by-expression.com (download the assets and work along). There may be a few differences in the interface, since it was done in EW2. Then go to W3schools for more detail.

    If you are referring to Step by Step tutorials (MS Press), that's not how Chris told you to build that page.


    Titanic, the movie, as CSS:

    @mixin iceberg {
         float: none;
    }

    #titanic {
         @include iceberg;
    }

    • Marked as answer by M.C. Kenna Monday, May 21, 2012 5:00 PM
    Monday, May 21, 2012 3:21 PM

All replies

  • You can't center things when you are using absolute positioning and layers.

    Solution: Don't do that.  It will break your site in other ways, as well.

    Monday, May 21, 2012 3:05 PM
  • You will never--never--get it to center using the methods I see in the above code.

    You have 6 divs that use layers--position: absolute . You have 57 auto-styles. Those are signs that you are trying to use EW as a drag-and-drop web builder, and it ain't. And you're using the toolbar buttons to style things. And you're not using web-safe fonts nor creating proper font families. And you're using spaces in file and folder names. No reputable tutorial told you to do any of that.

    Never ever, ever, ever, ever use layers. Ever. Well, almost never. They are deceptively easy, but full of pitfalls that you must be thoroughly aware of before you can use them. The web ain't print; that's why layers are so problematic.

    Read the Forum FAQ - Start Here. In particular, read the post about what is necessary to use EW. There are also learning links in there. Start with by-expression.com (download the assets and work along). There may be a few differences in the interface, since it was done in EW2. Then go to W3schools for more detail.

    If you are referring to Step by Step tutorials (MS Press), that's not how Chris told you to build that page.


    Titanic, the movie, as CSS:

    @mixin iceberg {
         float: none;
    }

    #titanic {
         @include iceberg;
    }

    • Marked as answer by M.C. Kenna Monday, May 21, 2012 5:00 PM
    Monday, May 21, 2012 3:21 PM