Grow your CSS skills. Land your dream job.

Positioning with CSS for screen resolution

  • # January 24, 2009 at 6:51 pm

    Here is my index page code

    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">






    Welcome to Rigganmore

    The Land of a Thousand Dreams

    Not a Member?

    Pre-Registration


    Here is my CSS page with the positioning problems

    Code:
    /*********************************
    * 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?

    Rob
    # January 24, 2009 at 7:19 pm

    Sorry that code is displaying very mashed up – any chance of a live version?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".