SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: layout help

  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    layout help

    Hello,

    I am learning css and I am having a hard time getting my page right. I have a header and a footer that extend the full width of the page. I am trying to place my login form between the header and the footer and in the middle of the page. I can't figure out how to place the login form in the middle of the page. I would like it to be equally spaced on the left, right, from the bottom of the header and from the top of the footer.

    I know how to do what I am trying to do with tables, but I don't want to use tables.

    [HTML]
    <table width="100%" style="background-color: Silver;">
    <tr>
    <td>
    Header
    </td>
    </tr>
    </table>
    <table align="center" style="height: 200px; width: 400px;">
    <tr>
    <td>
    Login Form
    </td>
    </tr>
    </table>
    <table width="100%" style="background-color: Silver;">
    <tr>
    <td>
    Footer
    </td>
    </tr>
    </table>
    HTML]

    I have the three sections inside of div tags and the header and footer tags span the width of the page, but I can't get the middle div to show up in the middle.
    Thank you for any help

  2. #2
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well to center horizontally do {margin: 0 auto 0 auto;} (auto on left and right sides) to your login form. not sure how to do vertically. someone else will know though.
    Steve Davis

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. This is the third or fourth time I've seen this asked on various forums in the last two or three days.

    Welcome to SitePoint Forums, cb3431.

    Center Page Content Horizontally and Vertically (without <table>s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both.

    I got it to display how I want in IE 7, but it's not right in Firefox.
    The blue background extends all the way up to the header in Firefox. I discovered that this line is what fixes it in IE7-
    <!--[if lte IE 7]><style type="text/css">
    #content
    {
    top:50&#37;;
    left:0;
    }
    #content .valignmid3
    {
    top:-50%;
    position:relative;
    }
    </style><![endif]-->

    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash hack \*/
    html, body{height:100%;}
    /* end hack */
    html,body {margin:0;padding:0}
    #outer{
    min-height:100%;
    margin-bottom:-30px;
    height:auto;
    }
    * html #outer{height:100%;}
    #header
    {
    width:auto;
    height: 50px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #4D62A2;
    border: 1px solid #D0D0D0;
    }
    #content-outer
    {
    position: relative;
    display: table;
    width: 90%;
    max-width: 500px;
    vertical-align: middle;
    margin: 0 auto;
    }
    .loginForm
    {
    height: 25em;
    }
    #content
    {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    position: relative;
    background-color: #4D62A2;
    padding: 5px;
    }
    #content ul
    {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    #content li
    {
    margin: 0px;
    padding: 0px;
    width: auto;
    height: auto;
    }
    #content #loginUserName
    {
    float: left;
    width: 35%;
    height: auto;
    }

    #content #loginPassword
    {
    float: left;
    width: 35%;
    height: auto;
    }
    #content .action
    {
    float: left;
    width: 25%;
    height: auto;
    margin-left: 2px;
    padding-top: 24px;
    }
    #content #rememberMe
    {
    float: left;
    width: 100%;
    height: auto;
    }
    #passwordLink
    {
    float: left;
    width: 100%;
    height: auto;
    }
    #footer
    {
    width: 100%;
    clear: both;
    height: 30px;
    background-color: #7086C7;
    border-top: 1px solid #FFFFFF;
    color: #000000;
    }
    #clearfooter{clear:both;height:30px;}
    div>p {margin:0}
    html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */

    </style>
    <!--[if lte IE 7]><style type="text/css">
    #content
    {
    top:50%;
    left:0;
    }
    #content .valignmid3
    {
    top:-50%;
    position:relative;
    }
    </style><![endif]-->
    </head>
    <body>
    <div id="minHeight"></div><!-- Safari hack -->

    <div id="outer">
    <div id="header">
    Header
    </div>
    <div id="content-outer" class="loginForm">
    <div id="content">
    <div id="loginUserName">
    <ul>
    <li>
    <label for="UserName">User Name/label>
    <input type="text" name="UserName" />
    </li>
    </ul>
    </div>

    <div id="loginPassword">
    <ul>
    <li>
    <label for="Password">Password/label>
    <input type="text" name="Password" />
    </li>
    </ul>
    </div>
    <div class="action">
    <input type="submit" name="Login" value="Login" />
    </div>
    <div id="rememberMe">
    <input type="checkbox" name="RememberMe" value="0" />Remember my login?
    </div>
    <div id="passwordLink">
    <a href="#">Lost password?</a>
    </div>
    <br />
    <div class="feedBack">
    <asp:Literal ID="FailureText" runat="server" EnableViewState="False" />
    <asp:ValidationSummary ID="vsLogin" runat="server" ValidationGroup="Login" />
    </div>
    </div>
    </div>
    <div id="clearfooter"></div>
    </div>
    <div id="footer">
    Footer
    </div>
    </body>
    </html>


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
  •