treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Positioning with CSS for screen resolution

  • Here is my index page code


    <?php require_once(\"includes/session.php\"); ?>
    <?php require_once(\"includes/connection.php\"); ?>
    <?php require_once(\"includes/functions.php\"); ?>
    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
    <html>

    <head>
    <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\" />
    <meta name=\"author\" content=\"Mordecai\" />

    <title>Rigganmore - Land of a Thousand Dreams</title>
    <script type=\"text/javascript\" src=\"javascript/general.js\"></script>
    <script type=\"text/javascript\" src=\"javascript/mouseroll.js\"></script>
    <link type=\"text/css\" rel=\"stylesheet\" href=\"stylesheet/general.css\" />
    <link type=\"text/css\" rel=\"stylesheet\" href=\"stylesheet/default.css\" />
    </head>
    <body>
    <div class=\"wrapper\">
    <!-- Header Start-->
    <div id=\"main_header\">
    <!-- Contains Main Image -->
    <div id=\"header\">
    <!-- Start of User Information and Log in Form -->
    <div id=\"header_user\">
    <?php
    // checks to see if person is logged in
    if ($_SESSION['login'] == 1){
    ?>
    <div id=\"stats\">
    <img src=\"./images/avatars/<? echo $_SESSION['dp']; ?>\" alt=\"<?php echo $_SESSION['name']; ?>'s Avatar\" id=\"avatar\" />
    <span class=\"statmsg\">
    Welcome, <?php echo $SESSION['name'] . \"! (\" . $SESSION['userid'] . \")\"?>
    </span>
    <br />
    Status: <?php echo $_SESSION['status']; ?> <br />
    Money: <?php echo $_SESSION['money']; ?> <br />
    Bank: <?php echo $_SESSION['bank']; ?> <br />
    Level: <?php echo $_SESSION['lvl']; ?> <br />
    HP: <?php echo $_SESSION['hp']; ?> <br />
    Exp: <?php echo $_SESSION['exp']; ?> <br />
    <a href=\"/actions/logout.php\" onmouseover=\"this.style.color = '#d9e1bc'\" onmouseout=\"this.style.color = '#002a4c'\">Logout</a>
    </div>
    <?php
    }
    else {
    ?>
    <div id=\"welcomemsg\">
    Please Login to Start Playing
    </div>
    <form method=\"post\" action=\"/actions/login.php\" class=\"float_right\" id=\"main_login\">
    Username: <input class=\"text\" size=\"10\" type=\"text\" name=\"uname\" maxlength=\"30\" /><br />
    Password: &nbsp;<input class=\"text\" size=\"10\" type=\"password\" name=\"pass\" maxlength=\"30\" /><br /><br />
    <input class=\"button\" type=\"submit\" name=\"login\" value=\"Login\" onclick=\"this.style.visibility = 'hidden';\" />
    <span id=\"lost\">
    <a href=\"actions/lostpassword.php\" onmouseover=\"this.style.color = '#d9e1bc'\" onmouseout=\"this.style.color = '#002a4c'\">Lost Password?</a>
    </span>
    </form>
    <?php
    }
    ?>
    </div>
    <!-- End of User Information and Login
    Start of Navigational Links -->
    <div id=\"navigation\">
    &nbsp;
    </div>
    <!-- End of Navigational Links -->
    </div>
    </div>
    <!-- End of Header -->
    <!-- Start of Main Body -->
    <div id=\"mainbody\">
    <div id=\"body\">
    <h1 class=\"center\">Welcome to Rigganmore</h1>
    <h2 class=\"center\">The Land of a Thousand Dreams</h2>
    </div>
    <div id=\"side_nav\">
    <h4 class=\"center\">Not a Member?</h4>
    <a href=\"/prereg/\" onmouseover=\"this.style.color = '#d9e1bc'\" onmouseout=\"this.style.color = '#002a4c'\"><img src=\"\" alt=\"Pre-Registration\" /></a>
    </div>
    </div>
    <!-- End of Main Body -->
    </div>
    </body>
    </html>



    Here is my CSS page with the positioning problems


    /*********************************
    * Main Page Stuff *
    *********************************/
    body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: tahoma, ariel, sans-serif;
    font-size: 12px;
    }
    img {
    border: none;
    }
    a {
    color: #002a4c;
    }
    div.clear_float {
    clear:both;
    }
    .float_right {
    float: right;
    }
    .center {
    text-align:center
    }
    div.wrapper {
    width: 100%;
    margin-left : 0px;
    margin-right: 0px;
    background-color: #002a4c;

    }
    /*********************************
    * Main_Header *
    *********************************/
    div#main_header {
    clear:both;
    height: 200px;
    position: absolute;
    width: 100%;
    }
    /*********************************
    * Header *
    *********************************/
    div#header {
    clear:both;
    height: 200px;
    position: absolute;
    width: 100%;
    }
    /*********************************
    * Header_User *
    *********************************/
    div#header_user {
    clear: both;
    position: absolute;
    height: 30px;
    left: 50%;
    top: 50px;
    margin-left: -400px;
    padding-top: 10px;
    width: 780px;
    font-size: 10pt;
    }
    #header_user form {
    margin-right: 5px;
    }
    div#welcomemsg {
    margin-left: 550px;
    }
    /*********************************
    * Forms *
    *********************************/
    input.button {
    font-size: 14px;
    text-align: center;
    background-color: #002a4c;
    color: #d9e1bc;
    border: none;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-left: 10%;
    }
    #main_login {
    padding-right: 20px;
    }
    /*********************************
    * Links *
    *********************************/
    span#lost {
    position: relative;
    left: 20px;
    }
    /*********************************
    * Player Stats *
    *********************************/
    div#stats {
    text-align: center;
    position: absolute;
    left: 515px;
    height: 100px;
    width: 260px;
    font-size: 8pt;
    }
    span.statmsg {
    font-size: 12px;
    font-weight: bold;
    }
    img#avatar {
    width: 100px;
    height: 100px;
    float: left;
    border: solid #006699 1px;
    }
    /*********************************
    * Navigation *
    *********************************/
    div#navigation {
    position: absolute;
    left: 20%;
    margin-left: -150px;
    top: 175px;
    height: 30px;
    width: 90%;
    vertical-align: middle;
    }
    div#side_nav {
    border: 1px solid #FFFFFF;
    position: absolute;
    left: 90%;
    margin-left: -115px;
    top: 200px;
    width: 105px;
    }
    div#side_nav h4{
    margin: 10px 0 5px 0;
    padding: 0;
    text-align: center;
    }
    div#side_nav a{
    margin: 10px 0 5px 0;
    padding: 0;
    text-align: center;
    }
    /*********************************
    * Main Body *
    *********************************/
    div#main_body {
    clear:both;
    top: 225px;
    position: absolute;
    width: 100%;
    height: 100%;
    }
    div#body {
    clear: both;
    position: absolute;
    left: 20%;
    margin-left: -50px;
    top: 215px;
    width: 60%;
    }


    If you notice all of them position correctly except div#side_nav. For some reason I cannot get that one div to position correctly for all screen resolutions however I have the whole rest of the page positioned correctly based on screen resolution.

    Can someone help me?
  • Sorry that code is displaying very mashed up - any chance of a live version?