www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Center Page

  1. #1
    Join Date
    May 2009
    Posts
    245

    resolved [RESOLVED] Center Page

    I have been tring to get the page to center and cant.

    Here is the template

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Design</title>
    <link href="../styles.css" rel="stylesheet" type="text/css">
    <link href="../images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="../images/favicon.ico" rel="icon" type="image/x-icon" />
    </head>
    
    <body>
    <div id="wrapper">
    <div id="architecture"><img src="../images/architecture.jpg" width="1000" height="200" border="0" usemap="#navigator" />
    <map name="navigator">
    <area shape="rect" coords="369,171,469,197" href="../index.php" />
    <area shape="rect" coords="481,171,581,197" href="../search.php" />
    <area shape="rect" coords="593,171,693,197" href="../clients.php" />
    <area shape="rect" coords="705,171,805,197" href="../reports.php" />
    </map>
    </div>
    <div id="paper">
    <div id="content">
    <!-- TemplateBeginEditable name="content" -->
    
    <!-- TemplateEndEditable -->
    </div>
    </div>
    </div>
    </body>
    </html>
    And here part of the style sheet
    Code:
    html,body { margin-top: 0px; margin-left: 0px; width: 100%; height: 1150px; background-color: #d7d7d7; }
    
    p { font-family: Arial; font-size: 12px; }
    td { font-family: Arial; font-size: 12px; height: 8px; }
    
    #wrapper { position: relative; top: 0px; left: 0px; margin: 0 auto; width: 1000px; height: 100%; }
    #architecture { position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px; border-bottom: 4px solid #171554; }
    #architecture-print { position: absolute; top: 0px; left: 0px; width: 1000px; height: 150px; border-bottom: 4px solid #171554; }
    #paper { position: absolute; top: 204px; left: 0px; width: 1000px; height: 100%; background-color: #ffffff; z-index: 1; }
    #paper-print { position: absolute; top: 154px; left: 0px; width: 1000px; height: 100%; background-color: #ffffff; z-index: 1; }
    #content { position: absolute; top: 20px; left: 30px; width: 940px; height: 90%; background-color: #ffffff; text-align: left; z-index: 2; }
    #plus { position: absolute; top: -10px; left: 890px;}
    #back { position: absolute; top: -10px; left: 850px;}
    #tabs { position: absolute; top: 0px; left: 0px; width: 800px; height: 36px; background-image: url("images/tab-bkgrd.jpg"); background-repeat: repeat-x; z-index: 3; }
    #tab1 { position: absolute; top: 0px; left: 0px;}
    #tab2 { position: absolute; top: 0px; left: 98px;}
    #tab3 { position: absolute; top: 0px; left: 196px;}
    #tab4 { position: absolute; top: 0px; left: 294px;}

  2. #2
    Join Date
    Oct 2013
    Location
    Utah
    Posts
    13
    It seems to work fine for me. Do you have a link to the site we can take a look at?

    Something you could try is taking out the 'top' and 'left' properties from the #wrapper, that's not necessary for a relatively positioned element.

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Centering any content element requires setting a width less than 100% for the container. Example:

    Code:
    body {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }
    Example as a Class:

    Code:
    .selector_name {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }
    HTML for Class:
    Code:
    <div class="selector_name">Content here</div>
    Example as an ID:

    Code:
    #selector_name {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }
    HTML for an ID:
    Code:
    <div id="selector_name">Content here</div>
    Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea

  4. #4
    Join Date
    May 2009
    Posts
    245
    I think it was just a bad character or something. I rewrote the code from scratch and it worked. Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles