SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sticky footer overlapping content

    Hello, after hours of research and trying to get that footer to stick at the bottom, it finally stays there, but it overlaps my content now...

    I have tried to put a padding-bottom on the content div, but to no avail.

    You can view it here: http://www.redflag.be/prospect
    Most of the formatting is in the layout.css file, some is in the 960.css file

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, for one thing everything is position:fixed and you should never have that! If content goes off into scrollbar land then all the content that is in the scrollbar area will be lost (since fixed elements can't be scrolled)

    If you are going for a regular fixed layout, then only use position:fixed on the footer
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so I made everything absolute, but I still have the same problem.
    And there are scrollbars now.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do you want the footer at the bottom of the viewport aka position:fixed?

    Or do you actually want a sticky footer that stays at the bottom of the viewport only if content is shorter than the viewport but otherwise sits at the bottom of the document?

    They are completely different things so we would need to know which you want before giving a proper answer

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want it to be at the bottom of the viewport unless the content is larger than the viewport, so yes, a sticky footer.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you want a fixed footer you will need to make these changes (won't work in IE6 though).

    Code:
    .container_12, .container_16 {
        margin-left: auto;
        margin-right: auto;
        width: 960px;
        min-height:100%;
        /*height:100%;*/
    }
    * html .container_12 {height:100%}
    .container_12 {
        background:#fff;
        /*position: absolute;
        left:50%;
        margin-left:-480px;
    */
        position:relative;
        margin:auto;
    }
    #contents {
        position:relative;
        padding-bottom:27px;
        /*height:100%;*/
    }
    #site_info .box {
        width:920px;
        color:#ccc;
        background:#666;
        position:fixed;
        bottom:0;
        height:27px;
        margin:0;
    }
    #footer{
        clear:both;
        width:100%;
        padding:50px 0 0;
    }

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just saw your comment that you wanted a sticky footer - Hold on I'll see what I can do.

  8. #8
    SitePoint Member
    Join Date
    May 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That kinda screwed my layout.
    IE6 won't be supported, so that's not a problem, it's about time that browser died.

    EDIT: I'll undo the changes.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Mustek View Post
    That kinda screwed my layout.
    IE6 won't be supported, so that's not a problem, it's about time that browser died.

    EDIT: I'll undo the changes.
    You must have missed some rules because I have it working here with no problems

    Here was the fixed position version :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Project Prospect</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/text.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/960.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/other.css" media="screen" />
    <style>
    /* http://meyerweb.com/eric/tools/css/reset/ */
    /* v1.0 | 20080212 */
    
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100&#37;;
        vertical-align: baseline;
        background: transparent;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }
    /* remember to define focus styles! */
    :focus {
        outline: 0;
    }
    /* remember to highlight inserts somehow! */
    ins {
        text-decoration: none;
    }
    del {
        text-decoration: line-through;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }/*
        960 Grid System ~ Text CSS.
        Learn more ~ http://960.gs/
    
        Licensed under GPL and MIT.
    */
    /* =Basic HTML
    --------------------------------------------------------------------------------*/
    
    body {
        font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
    }
    a:focus {
        outline: 1px dotted invert;
    }
    hr {
        border-color: #ccc;
        border-style: solid;
        border-width: 1px 0 0;
        clear: both;
        height: 0;
    }
    /* =Headings
    --------------------------------------------------------------------------------*/
    
    h1 {
        font-size: 25px;
    }
    h2 {
        font-size: 23px;
    }
    h3 {
        font-size: 21px;
    }
    h4 {
        font-size: 19px;
    }
    h5 {
        font-size: 17px;
    }
    h6 {
        font-size: 15px;
    }
    /* =Spacing
    --------------------------------------------------------------------------------*/
    
    ol {
        list-style: decimal;
    }
    ul {
        list-style: square;
    }
    li {
        margin-left: 30px;
    }
    p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
        margin-bottom: 20px;
    }
    /*
        960 Grid System ~ Core CSS.
        Learn more ~ http://960.gs/
    
        Licensed under GPL and MIT.
    */
    
    /* =Containers
    --------------------------------------------------------------------------------*/
    
    .container_12, .container_16 {
        margin-left: auto;
        margin-right: auto;
        width: 960px;
        min-height:100%;/*height:100%;*/
    }
    * html .container_12 {
        height:100%
    }
    /* =Grid >> Global
    --------------------------------------------------------------------------------*/
    
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
        display: inline;
        float: left;
        margin-left: 10px;
        margin-right: 10px;
    }
    .container_12 .grid_3, .container_16 .grid_4 {
        width: 220px;
    }
    .container_12 .grid_6, .container_16 .grid_8 {
        width: 460px;
    }
    .container_12 .grid_9, .container_16 .grid_12 {
        width: 700px;
    }
    .container_12 .grid_12, .container_16 .grid_16 {
        width: 940px;
    }
    /* =Grid >> Children (Alpha ~ First, Omega ~ Last)
    --------------------------------------------------------------------------------*/
    
    .alpha {
        margin-left: 0;
    }
    .omega {
        margin-right: 0;
    }
    /* =Grid >> 12 Columns
    --------------------------------------------------------------------------------*/
    
    .container_12 .grid_1 {
        width: 60px;
    }
    .container_12 .grid_2 {
        width: 140px;
    }
    .container_12 .grid_4 {
        width: 300px;
    }
    .container_12 .grid_5 {
        width: 380px;
    }
    .container_12 .grid_7 {
        width: 540px;
    }
    .container_12 .grid_8 {
        width: 620px;
    }
    .container_12 .grid_10 {
        width: 780px;
    }
    .container_12 .grid_11 {
        width: 860px;
    }
    /* =Grid >> 16 Columns
    --------------------------------------------------------------------------------*/
    
    .container_16 .grid_1 {
        width: 40px;
    }
    .container_16 .grid_2 {
        width: 100px;
    }
    .container_16 .grid_3 {
        width: 160px;
    }
    .container_16 .grid_5 {
        width: 280px;
    }
    .container_16 .grid_6 {
        width: 340px;
    }
    .container_16 .grid_7 {
        width: 400px;
    }
    .container_16 .grid_9 {
        width: 520px;
    }
    .container_16 .grid_10 {
        width: 580px;
    }
    .container_16 .grid_11 {
        width: 640px;
    }
    .container_16 .grid_13 {
        width: 760px;
    }
    .container_16 .grid_14 {
        width: 820px;
    }
    .container_16 .grid_15 {
        width: 880px;
    }
    /* =Prefix Extra Space >> Global
    --------------------------------------------------------------------------------*/
    
    .container_12 .prefix_3, .container_16 .prefix_4 {
        padding-left: 240px;
    }
    .container_12 .prefix_6, .container_16 .prefix_8 {
        padding-left: 480px;
    }
    .container_12 .prefix_9, .container_16 .prefix_12 {
        padding-left: 720px;
    }
    /* =Prefix Extra Space >> 12 Columns
    --------------------------------------------------------------------------------*/
    
    .container_12 .prefix_1 {
        padding-left: 80px;
    }
    .container_12 .prefix_2 {
        padding-left: 160px;
    }
    .container_12 .prefix_4 {
        padding-left: 320px;
    }
    .container_12 .prefix_5 {
        padding-left: 400px;
    }
    .container_12 .prefix_7 {
        padding-left: 560px;
    }
    .container_12 .prefix_8 {
        padding-left: 640px;
    }
    .container_12 .prefix_10 {
        padding-left: 800px;
    }
    .container_12 .prefix_11 {
        padding-left: 880px;
    }
    /* =Prefix Extra Space >> 16 Columns
    --------------------------------------------------------------------------------*/
    
    .container_16 .prefix_1 {
        padding-left: 60px;
    }
    .container_16 .prefix_2 {
        padding-left: 120px;
    }
    .container_16 .prefix_3 {
        padding-left: 180px;
    }
    .container_16 .prefix_5 {
        padding-left: 300px;
    }
    .container_16 .prefix_6 {
        padding-left: 360px;
    }
    .container_16 .prefix_7 {
        padding-left: 420px;
    }
    .container_16 .prefix_9 {
        padding-left: 540px;
    }
    .container_16 .prefix_10 {
        padding-left: 600px;
    }
    .container_16 .prefix_11 {
        padding-left: 660px;
    }
    .container_16 .prefix_13 {
        padding-left: 780px;
    }
    .container_16 .prefix_14 {
        padding-left: 840px;
    }
    .container_16 .prefix_15 {
        padding-left: 900px;
    }
    /* =Suffix Extra Space >> Global
    --------------------------------------------------------------------------------*/
    
    .container_12 .suffix_3, .container_16 .suffix_4 {
        padding-right: 240px;
    }
    .container_12 .suffix_6, .container_16 .suffix_8 {
        padding-right: 480px;
    }
    .container_12 .suffix_9, .container_16 .suffix_12 {
        padding-right: 720px;
    }
    /* =Suffix Extra Space >> 12 Columns
    --------------------------------------------------------------------------------*/
    
    .container_12 .suffix_1 {
        padding-right: 80px;
    }
    .container_12 .suffix_2 {
        padding-right: 160px;
    }
    .container_12 .suffix_4 {
        padding-right: 320px;
    }
    .container_12 .suffix_5 {
        padding-right: 400px;
    }
    .container_12 .suffix_7 {
        padding-right: 560px;
    }
    .container_12 .suffix_8 {
        padding-right: 640px;
    }
    .container_12 .suffix_10 {
        padding-right: 800px;
    }
    .container_12 .suffix_11 {
        padding-right: 880px;
    }
    /* =Suffix Extra Space >> 16 Columns
    --------------------------------------------------------------------------------*/
    
    .container_16 .suffix_1 {
        padding-right: 60px;
    }
    .container_16 .suffix_2 {
        padding-right: 120px;
    }
    .container_16 .suffix_3 {
        padding-right: 180px;
    }
    .container_16 .suffix_5 {
        padding-right: 300px;
    }
    .container_16 .suffix_6 {
        padding-right: 360px;
    }
    .container_16 .suffix_7 {
        padding-right: 420px;
    }
    .container_16 .suffix_9 {
        padding-right: 540px;
    }
    .container_16 .suffix_10 {
        padding-right: 600px;
    }
    .container_16 .suffix_11 {
        padding-right: 660px;
    }
    .container_16 .suffix_13 {
        padding-right: 780px;
    }
    .container_16 .suffix_14 {
        padding-right: 840px;
    }
    .container_16 .suffix_15 {
        padding-right: 900px;
    }
    /* =Clear Floated Elements
    --------------------------------------------------------------------------------*/
    
    /* http://sonspring.com/journal/clearing-floats */
    
    html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {
        background: none;
        border: 0;
        clear: both;
        display: block;
        float: none;
        font-size: 0;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
    }
    /* http://www.positioniseverything.net/easyclearing.html */
    
    .clearfix:after {
        clear: both;
        content: '.';
        display: block;
        visibility: hidden;
        height: 0;
    }
    .clearfix {
        display: inline-block;
    }
    * html .clearfix {
        height: 1%;
    }
    .clearfix {
        display: block;
    }
    /*
    -----------------------------------------------
    Grey Box Method - Layout CSS
    ----------------------------------------------- */
    
    body {
        background: #eee;
        border-top: 5px solid #000;
        color: #333;
        font-size: 11px;
        height:100%;
    }
    /* anchors
    ----------------------------------------------- */
    a {
        color: #000;
        font-weight:bold;
        text-decoration: none;
    }
    a:hover {
        color:#333;
    }
    /* 960 grid system container background
    ----------------------------------------------- */
    .container_12, .container_16 {
        margin-left: auto;
        margin-right: auto;
        width: 960px;
        min-height:100%;/*height:100%;*/
    }
    * html .container_12 {
        height:100%
    }
    .container_12 {
        background:#fff;
        /*position: absolute;
        left:50%;
        margin-left:-480px;
    */
        position:relative;
        margin:auto;
    }
    #contents {
        position:relative;
        padding-bottom:27px;/*height:100%;*/
    }
    #site_info .box {
        width:920px;
        color:#ccc;
        background:#666;
        position:fixed;
        bottom:0;
        height:27px;
        margin:0;
    }
    #footer {
        clear:both;
        width:100%;
        padding:50px 0 0;
    }
    .headers {
        font-weight:normal;
        font-size:3em;
        text-align:left;
        background:#000;
        padding:.2em 1em;
        margin-bottom:0;
    }
    /* headings
    ----------------------------------------------- */
    h1, h2, h3, h4, h5, h6 {
        line-height:1.2em;
        margin-bottom:.3em;
    }
    h2 {
        margin-top:1em;
    }
    h5 {
        font-size:1.2em;
    }
    h6 {
        font-size:1em;
        text-transform:uppercase;
    }
    h1 a {
        font-weight:normal;
    }
    /* branding
    ----------------------------------------------- */
    h1#branding {
        font-weight:normal;
        font-size:1em;
        text-align:left;
        background-image:url('http://www.redflag.be/prospect/img/header.jpg');
        padding:1em 1em;
        margin-bottom:0;
        color:#fff;
    }
    /* page heading
    ----------------------------------------------- */
    h2#page-heading {
        font-weight:normal;
        padding:.5em;
        margin:0 0 10px 0;
        border-bottom:1px solid #ccc;
    }
    /* boxes
    ----------------------------------------------- */
    .box {
        background:#ddd;
        margin-bottom:20px;
        padding:10px 10px 1px 10px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
    .box h2 {
        font-size:1em;
        font-weight:normal;
        text-transform:uppercase;
        color:#fff;
        background:#333;
        margin:-10px -10px 0 -10px;
        padding:6px 12px;
    }
    .r_top {
        -webkit-border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;
        -moz-border-radius-topleft:5px;
        -moz-border-radius-topright:5px;
    }
    .r_bot {
        -webkit-border-bottom-left-radius:5px;
        -webkit-border-bottom-right-radius:5px;
        -moz-border-bottom-topleft:5px;
        -moz-border-bottom-topright:5px;
    }
    .r_all {
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
    .box h2 a, .box h2 a.visible {
        color:#fff;
        background:#333 url("http://www.redflag.be/prospect/img/switch_minus.gif") 97% 50% no-repeat;
        display:block;
        padding:6px 12px;
        margin:-6px -12px;
        border:none;
    }
    .grid_4 .box h2 a {
        background-position: 97% 50%;
    }
    .grid_5 .box h2 a {
        background-position: 98% 50%;
    }
    .grid_12 .box h2 a {
        background-position: 99% 50%;
    }
    .box h2 a.hidden, .box h2 a.hidden:hover {
        background-image: url("http://www.redflag.be/prospect/img/switch_plus.gif");
    }
    .box h2 a:hover {
        background-color:#111;
    }
    .block {
        padding-top:10px;
    }
    div.menu {
        padding:0;
    }
    div.menu h2 {
        margin:0;
    }
    div.menu .block {
        padding-top:0;
    }
    .profilebox {
        float:right;
        padding-right:15px;
    }
    .profilebox a.image {
        float:left;
        padding:2px 2px 0px 2px;
        border:1px solid #bbb;
        background:#fff;
    }
    /* paragraphs, quotes and lists
    ----------------------------------------------- */
    p {
        margin-bottom:1em;
    }
    blockquote {
        font-family: Georgia, 'Times New Roman', serif;
        font-size:1.2em;
        padding-left:1em;
        border-left:4px solid #ccc;
    }
    blockquote cite {
        font-size:.9em;
    }
    ul, ol {
        padding-top:0;
    }
    /* menus
    ----------------------------------------------- */
    ul.menu {
        list-style:none;
        border-top:1px solid #bbb;
    }
    ul.menu li {
        margin:0;
    }
    ul.menu li a {
        display:block;
        padding:4px 10px;
        border-bottom:1px solid #ccc;
    }
    ul.menu li a:hover {
        background:#eee;
    }
    ul.menu li a:active {
        background:#ccc;
    }
    /* submenus
    ----------------------------------------------- */
    ul.menu ul {
        list-style:none;
        margin:0;
    }
    ul.menu ul li a {
        padding-left:30px;
    }
    /* section menus
    ----------------------------------------------- */
    ul.section {
        border-top:0;
        margin-bottom:0;
    }
    ul.section li {
        text-transform:uppercase;
    }
    ul.section li a {
        background:#bbb;
    }
    ul.section li a:hover {
        background:#aaa;
    }
    ul.section li a:active {
        color:#fff;
        background:#666;
    }
    ul.section li li a {
        background:#ddd;
        border-bottom:1px solid #eee;
    }
    ul.section li li a:hover {
        background:#ccc;
    }
    ul.section li li a:active {
        color:#000;
        background:#fff;
    }
    ul.section ul li {
        text-transform:none;
    }
    ul.section ul.current li a {
        background:#eee;
        border-bottom:1px solid #fff;
    }
    ul.section ul.current li a:hover {
        background:#ddd;
    }
    ul.section ul.current li a:active {
        background:#fff;
    }
    ul.section li a.current {
        color:#fff;
        background:#666;
    }
    ul.section li a.current:hover {
        background:#555;
    }
    ul.section li a.current:active {
        background:#444;
    }
    ul.section li a.active {
        background:#fff;
        cursor:default;
    }
    ul.section li.current > a.active, ul.section li.current > a.active:hover {
        color:#fff;
        background:#666;
        cursor:default;
    }
    /* table
    ----------------------------------------------- */
    table {
        width:100%;
        border:1px solid #bbb;
        margin-bottom:10px;
    }
    col.colC {
        width:8em;
    }
    th, td {
        padding:.2em 1em;
        text-align:left;
    }
    thead th {
        border-bottom:2px solid #888;
        background:#bbb;
        padding:.4em 1em .2em;
    }
    thead th.table-head {
        font-size:1em;
        font-weight:normal;
        text-transform:uppercase;
        color:#fff;
        background:#555;
        border:1px solid #555;
    }
    tbody th, tbody td {
        border-top:1px solid #bbb;
        border-bottom:1px solid #bbb;
        background:#eee;
    }
    tbody tr.odd th, tbody tr.odd td {
        background:#fff;
    }
    tfoot th, tfoot td {
        border-top:2px solid #666;
        background:#eee;
    }
    tfoot tr.total th, tfoot tr.total td {
        border-top:6px double #666;
    }
    tfoot tr.total th {
        text-transform:uppercase;
    }
    th.currency, td.currency {
        text-align:right;
    }
    /* forms
    ----------------------------------------------- */
    form {
        overflow:hidden;
    }
    fieldset {
        border:1px solid #bbb;
        padding:10px;
        position:relative;
        background:#e9e9e9;
        margin-bottom:10px;
    }
    legend {
        font-size:1.1em;
        padding:.4em .8em;
        background:#fff;
        border:1px solid #bbb;
    }
    fieldset.login p {
        margin-bottom:1em;
        margin-top:0pt;
    }
    fieldset p label {
        width:98%;
    }
    fieldset p input {
        width:98%;
    }
    fieldset p select {
        width:99%;
    }
    fieldset.login p label {
        float:left;
        line-height:2em;
        margin-right:3%;
        text-align:right;
        width:32%;
    }
    fieldset.login p input {
        width:60%;
    }
    fieldset.login input.button {
        margin-left:35%;
    }
    form p.notice {
        font-weight:bold;
    }
    input.search.text {
        width:66%;
    }
    input.search.button {
        width:28%;
        margin-left:2%;
    }
    /* articles
    ----------------------------------------------- */
    .articles {
        padding:0;
    }
    .articles h2 {
        margin:0;
    }
    #articles {
        padding-top:0;
    }
    .article {
        border-top:1px solid #666;
        padding-top:.5em;
    }
    .box .article {
        border-top:3px solid #fff;
        padding:13px 10px 0 10px;
    }
    .article h2 {
        font-size:2em;
        font-weight:normal;
        text-transform:none;
        color:#333;
        background:transparent;
        padding:0;
        margin:0;
        border:none;
    }
    .article h3 {
        margin-bottom:.2em;
        font-size:1.6em;
    }
    .box .first {
        border-top:none;
    }
    .article h4 {
        font-size:1.2em;
        text-transform:uppercase;
        margin-bottom:.5em;
    }
    .article a.image {
        float:left;
        margin:3px 10px 3px 0;
        padding:4px;
        border:1px solid #bbb;
        background:#fff;
    }
    .article a.image:hover {
        border:1px solid #666;
    }
    .article a.image img {
        float:left;
    }
    .article p.meta {
        color:#666;
        border-top:1px dotted #999;
        border-bottom:1px dotted #999;
        padding:.3em 0;
        margin-bottom:.8em;
    }
    /* site information
    ----------------------------------------------- */
    #site_info .box {
        width:920px;
        color:#ccc;
        background:#666;
        position:fixed;
        bottom:0;
        height:27px;
        margin:0;
    }
    #site_info a {
        color:#fff;
    }
    #site_info a:hover {
        color:#000;
    }
    /* AJAX sliding shelf
    ----------------------------------------------- */
    #loading {
        float:right;
        margin-right:14px;
        margin-top:-2px;
    }
    .block {
        padding-bottom:1px;
    }
    /* Accordian
    ----------------------------------------------- */
    .toggler {
        color: #222;
        margin: 0;
        padding: 2px 5px;
        background: #eee;
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-top: 1px solid #f5f5f5;
        border-left: 1px solid #f5f5f5;
        font-size:1.1em;
        font-weight: normal;
    }
    .element h4 {
        margin: 0;
        padding:4px;
        line-height:1.2em;
    }
    .element p {
        margin: 0;
        padding: 4px;
    }
    .float-right {
        padding:10px 20px;
        float:right;
    }
    #accordian-block {
        padding-bottom:10px;
    }
    /* Mootools Kwicks
    ----------------------------------------------- */
    #kwick-box {
        padding:0;
        overflow:hidden;
    }
    #kwick-box h2 {
        margin:0;
    }
    #kwick {
        position: relative;
    }
    #kwick .kwicks {
        display: block;
        background: #999;
        height: 120px;
        list-style:none;
        margin:0;
        overflow:hidden;
    }
    #kwick li {
        float: left;
        margin:0;
        padding:0;
    }
    #kwick .kwick {
        display: block;
        cursor: pointer;
        overflow: hidden;
        height: 100px;
        width: 215px;
        padding: 10px;
        background: #fff;
    }
    #kwick .kwick span {
        color:#fff;
    }
    #kwick .one {
        background: #666;
    }
    #kwick .two {
        background: #777;
    }
    #kwick .three {
        background: #888;
    }
    #kwick .four {
        background: #999;
    }
    /*
    -----------------------------------------------
    Navigation
    ----------------------------------------------- */
    
    /* navigation (horizontal subnavigation)
    ----------------------------------------------- */
    ul.nav, ul.nav * {
        margin:0;
        padding:0;
    }
    ul.nav {
        position:relative;
        background:#666;
        max-width:100%;
        height:2.5em;
    }
    ul.nav li {
        cursor:pointer;
        float:left;
        text-align:center;
        list-style-type:none;
        font-weight:normal;
    }
    ul.nav li ul {
        cursor:default;
        width:100%;
        max-width:100%;
        position:absolute;
        height:auto;
        top:2.5em;
        background-position:0 0 !important;
        left:-9000px;
    }
    ul.nav li ul li {
        padding:0;
        border:none;
        width:auto;
        max-width:none;
    }
    ul.nav li a {
        color:#fff;
        background:#666;
        font-weight:bold;
        text-decoration:none;
        display:block;
        float:left;
        padding:0 1em;
        height:2.4em;
        line-height:2.5em;
    }
    ul.nav li ul li a {
        position:relative !important; /* ie Mac */
        cursor:pointer !important;
        white-space:nowrap;
        line-height:2em;
        height:2em;
        font-weight:normal;
        color:#666;
        background-position:0 50% !important;
    }
    ul.nav li:hover a, ul.nav li a:hover, ul.nav li a:focus {
        color:#000;
        background:#ccc;
    }
    ul.nav li a:active {
        color:#666;
        background:#fff;
    }
    ul.nav li:hover ul {
        left:0;
        z-index:10
    }
    ul.nav li ul, ul.nav li {
        background:#ccc !important
    }
    ul.nav li:hover ul li a {
        color:#444;
    }
    ul.nav li:hover ul li a:hover {
        color:#000;
        background:#fff;
    }
    ul.nav li:hover ul li a:active {
        color:#666;
        background:#fff;
    }
    ul.nav li.current a {
        color:#666;
        background:#fff;
        cursor:default;
        font-weight:bold;
    }
    ul.nav li.current ul {
        left:0;
        z-index:5
    }
    ul.nav li.current ul, ul.nav li.current {
        background:#ccc !important
    }
    ul.nav li.current ul li a {
        color:#444;
        background:#ccc;
        font-weight:normal;
    }
    ul.nav li.current ul li a:hover {
        color:#000;
        background:#fff;
    }
    ul.nav li ul li.current a, ul.nav li ul li.current a:hover, ul.nav li.current:hover ul li a:active {
        color:#666;
        background:#fff;
    }
    /* navigation (vertical subnavigation)
    ----------------------------------------------- */
    ul.nav {
        background:#990000;
    }
    ul.main li {
        position:relative;
        top:0;
        left:0;
    }
    ul.main li ul {
        border-top:0;
    }
    ul.main li ul li {
        float:left;
    }
    ul.main li a {
        height:2.5em;
        line-height:2.5em;
        border:0;
        color:#fff;
        background:#990000;
    }
    ul.main li ul li a {
        width:12em;
        line-height:2em;
        height:2em;
        text-align:left;
        color:#fff;
        border-top:1px solid #990000;
        background:#444;
    }
    ul.main li a:focus {
        color:#fff;
        background:#990000;
    }
    ul.main li ul li a:hover {
        color:#fff;
        background:#555;
    }
    ul.main li:hover a {
        color:#fff;
        background:#b90302;
    }
    ul.main li:hover ul li a {
        color:#fff;
    }
    ul.main li:hover ul li a:hover {
        color:#fff;
        background:#990000;
    }
    ul.main li:hover a:active {
        background:#444;
    }
    ul.main li:hover ul li a:active {
        color:#fff;
        background:#770000;
    }
    /* secondary list
    ----------------------------------------------- */
    ul.nav li.secondary {
        float:right;
        color:#cde;
        background:transparent !important;
    }
    ul.nav li.secondary span.status {
        float:left;
        padding:0 1em;
        line-height:2.77em;
        height:2.77em;
        font-size:0.9em;
    }
    ul.nav li.secondary span.status a {
        float:none;
        display:inline;
        padding:0;
        height:auto;
        line-height:auto;
        color:#cde;
        background:transparent;
    }
    ul.nav li.secondary span.status a:hover {
        color:#fff;
        background:transparent;
    }
    ul.nav li.secondary span.status span {
        text-transform:capitalize;
    }
    ul.nav li.secondary:hover a {
        color:#fff;
        background:#666;
    }
    ul.nav li.secondary:hover a:hover {
        background:#555;
    }
    ul.nav li.secondary:hover a:active {
        background:#444;
    }
    /*
        Coin Slider jQuery plugin CSS styles
        http://workshop.rs/projects/coin-slider
    */
    
    
    .coin-slider {
        overflow: hidden;
        zoom: 1;
        position: relative;
    }
    .coin-slider a {
        text-decoration: none;
        outline: none;
        border: none;
    }
    .cs-buttons {
        display:none;
    }
    .cs-buttons a {
        margin-left: 5px;
        height: 10px;
        width: 10px;
        float: left;
        border: 1px solid #B8C4CF;
        color: #B8C4CF;
        text-indent: -1000px;
    }
    .cs-active {
        background-color: #B8C4CF;
        color: #FFFFFF;
    }
    .cs-title {
        width: 545px;
        padding: 10px;
        background-color: #000000;
        color: #FFFFFF;
        -webkit-border-top-right-radius:5px;
        -moz-border-radius-topright:5px;
    }
    .cs-prev, .cs-next {
        background-color: #000000;
        color: #FFFFFF;
        padding: 0px 10px;
    }
    </style>
    <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" />
    <style>
    /*
        Fluid 960 Grid System - IE6 Fixes
        Learn more ~ http://www.designinfluences.com/
    
        Licensed under GPL and MIT.
    */
    
    /* =Grid >> Global
    --------------------------------------------------------------------------------*/
    
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12,
    .grid_13,
    .grid_14,
    .grid_15,
    .grid_16
    {
        margin-left: .8%;
        margin-right: .8%;
    }
    
    
    </style>
    
    
    <![endif]-->
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
    
    <style>
    
    </style>
    
    <![endif]-->
    <script type="text/javascript" src="http://www.redflag.be/prospect/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.redflag.be/prospect/js/coin-slider.min.js"></script>
    </head>
    <body>
    <div class="container_12">
        <div id="contents">
            <div class="grid_12">
                <h1 id="branding"> <a href=""><img src="img/logo.png" alt="logo"/></a> <span class="profilebox"> <br/>
                    <b>Welcome back Mustek</b><br/>
                    You have 0 messages<br/>
                    Profile - Sign Out </span> <span class="profilebox"> <a href="#" class="image"><img src="http://www.redflag.be/prospect/img/blank_avatar.png" height="60" width="60" alt="photo" /></a> </span> </h1>
            </div>
            <div class="clear"></div>
            <div class="grid_12">
                <ul class="nav main">
                    <li> <a href="#">Home</a> </li>
                    <li> <a href="#">Recently Added</a> </li>
                    <li> <a href="#">Categories</a>
                        <ul>
                            <li> <a href="#">Action</a> </li>
                            <li> <a href="#">Adventure</a> </li>
                            <li> <a href="#">Casino &amp; Cards</a> </li>
                            <li> <a href="#">Classics</a> </li>
                            <li> <a href="#">Fighting</a> </li>
                            <li> <a href="#">Puzzle &amp; Mind</a> </li>
                            <li> <a href="#">Racing</a> </li>
                            <li> <a href="#">Shooters</a> </li>
                            <li> <a href="#">Sports</a> </li>
                        </ul>
                    </li>
                    <li> <a href="#">Multiplayer</a> </li>
                    <li> <a href="#">Newsblog</a> </li>
                    <li> <a href="#">Community</a> </li>
                    <li class="secondary">
                        <input style="padding:0px;margin-top:4px;margin-bottom:0px;" class="search" type="text" value="Search" />
                        <input class="search" type="button" value="Search" />
                    </li>
                </ul>
            </div>
            <div class="clear"></div>
            <div class="grid_12" id="coin-slider"> <a href="img01_url"> <img src='http://www.redflag.be/prospect/img/scroller/test_1.png' width="940" alt="Welcome to Project Prospect"/> <span> Welcome to Project Prospect! </span> </a> <a href="img02_url"> <img src='http://www.redflag.be/prospect/img/scroller/test_2.png' width="940" alt="Jamlegend, new on Project Prospect"/> <span> Play the popular music-game Jamlegend, right here! </span> </a> </div>
            <div class="clear"></div>
            <div class="grid_12">
                <div class="box news">
                    <h2 class="r_bot"><b>News:</b> No releasedate set.</h2>
                </div>
            </div>
            <div class="clear"></div>
            <div class="grid_4">
                <div class="box">
                    <h2 class="r_top">Newest Games (more)</h2>
                    <div class="block">
                        <p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                    </div>
                </div>
            </div>
            <div class="grid_4">
                <div class="box">
                    <h2 class="r_top">Most Popular Games (more)</h2>
                    <div class="block">
                        <p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                    </div>
                </div>
            </div>
            <div class="grid_4">
                <div class="box">
                    <h2 class="r_top">Staff Picks (more)</h2>
                    <div class="block">
                        <p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container_16" style="padding-top:30px;">
        <div id="footer">
            <div class="grid_16" id="site_info">
                <div class="box">
                    <p>&#169;2010 - Redflag.be, all content on this website is property of their respected owners. <b>Pre-Alpha Build, do not leak!</b></p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
                $(document).ready(function() {
                    $('#coin-slider').coinslider({ width: 940, height: 300, navigation: true, spw:9, sph:5, delay: 5000 });
                });
            </script>
    </body>
    </html>
    Probably needs tweaking but basically working.

  10. #10
    SitePoint Member
    Join Date
    May 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I followed that, up untill the 5px border thing.
    Also, the footer almost works like it should, it still goes a few pixels over my container before it stops.

    EDIT: I've removed the border temporarily

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    This will probably be a bit awkward to follow because your styles come from everywhere - a big drawback of the grid system.

    Code:
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    #outer:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    html,body{height:100%}
    
    .container_12, .container_16 {
        margin-left: auto;
        margin-right: auto;
        width: 960px;
        /*height:100%;*/
        /*min-height:100%;*/
    }
    .wrap{    min-height:100%;}
    * html .wrap {height:100%}
    .container_12 {
        background:#fff;
        /*position: absolute;
        left:50%;
        margin-left:-480px;
    */
        position:relative;
        margin:auto;
    }
    #contents {
        position:relative;
        padding-bottom:40px;
        /*height:100%;*/
    }
    #site_info .box {
        width:920px;
        color:#ccc;
        background:#666;
        position:relative;
        height:27px;
        margin:-43px 0 0;
        clear:both;
    overflow:hidden;
    }
    #footer{
        clear:both;
        width:100%;
    }
    #footer p{margin:0}
    Code:
    <body>
    <div class="container_12 wrap">
        <div id="contents">
    Code:
    <div class="container_16">
        <div id="footer">
            <div class="grid_16" id="site_info">
    This was the whole code I was working with but all styles have been placed inline so I could test.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Project Prospect</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/text.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/960.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/other.css" media="screen" />
    <style>
    /* http://meyerweb.com/eric/tools/css/reset/ */
    /* v1.0 | 20080212 */
    
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }
    /* remember to define focus styles! */
    :focus {
        outline: 0;
    }
    /* remember to highlight inserts somehow! */
    ins {
        text-decoration: none;
    }
    del {
        text-decoration: line-through;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }/*
        960 Grid System ~ Text CSS.
        Learn more ~ http://960.gs/
    
        Licensed under GPL and MIT.
    */
    /* =Basic HTML
    --------------------------------------------------------------------------------*/
    
    body {
        font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
    }
    a:focus {
        outline: 1px dotted invert;
    }
    hr {
        border-color: #ccc;
        border-style: solid;
        border-width: 1px 0 0;
        clear: both;
        height: 0;
    }
    /* =Headings
    --------------------------------------------------------------------------------*/
    
    h1 {
        font-size: 25px;
    }
    h2 {
        font-size: 23px;
    }
    h3 {
        font-size: 21px;
    }
    h4 {
        font-size: 19px;
    }
    h5 {
        font-size: 17px;
    }
    h6 {
        font-size: 15px;
    }
    /* =Spacing
    --------------------------------------------------------------------------------*/
    
    ol {
        list-style: decimal;
    }
    ul {
        list-style: square;
    }
    li {
        margin-left: 30px;
    }
    p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
        margin-bottom: 20px;
    }
    /*
        960 Grid System ~ Core CSS.
        Learn more ~ http://960.gs/
    
        Licensed under GPL and MIT.
    */
    
    /* =Containers
    --------------------------------------------------------------------------------*/
    
    
    /* =Grid >> Global
    --------------------------------------------------------------------------------*/
    
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
        display: inline;
        float: left;
        margin-left: 10px;
        margin-right: 10px;
    }
    .container_12 .grid_3, .container_16 .grid_4 {
        width: 220px;
    }
    .container_12 .grid_6, .container_16 .grid_8 {
        width: 460px;
    }
    .container_12 .grid_9, .container_16 .grid_12 {
        width: 700px;
    }
    .container_12 .grid_12, .container_16 .grid_16 {
        width: 940px;
    }
    /* =Grid >> Children (Alpha ~ First, Omega ~ Last)
    --------------------------------------------------------------------------------*/
    
    .alpha {
        margin-left: 0;
    }
    .omega {
        margin-right: 0;
    }
    /* =Grid >> 12 Columns
    --------------------------------------------------------------------------------*/
    
    .container_12 .grid_1 {
        width: 60px;
    }
    .container_12 .grid_2 {
        width: 140px;
    }
    .container_12 .grid_4 {
        width: 300px;
    }
    .container_12 .grid_5 {
        width: 380px;
    }
    .container_12 .grid_7 {
        width: 540px;
    }
    .container_12 .grid_8 {
        width: 620px;
    }
    .container_12 .grid_10 {
        width: 780px;
    }
    .container_12 .grid_11 {
        width: 860px;
    }
    /* =Grid >> 16 Columns
    --------------------------------------------------------------------------------*/
    
    .container_16 .grid_1 {
        width: 40px;
    }
    .container_16 .grid_2 {
        width: 100px;
    }
    .container_16 .grid_3 {
        width: 160px;
    }
    .container_16 .grid_5 {
        width: 280px;
    }
    .container_16 .grid_6 {
        width: 340px;
    }
    .container_16 .grid_7 {
        width: 400px;
    }
    .container_16 .grid_9 {
        width: 520px;
    }
    .container_16 .grid_10 {
        width: 580px;
    }
    .container_16 .grid_11 {
        width: 640px;
    }
    .container_16 .grid_13 {
        width: 760px;
    }
    .container_16 .grid_14 {
        width: 820px;
    }
    .container_16 .grid_15 {
        width: 880px;
    }
    /* =Prefix Extra Space >> Global
    --------------------------------------------------------------------------------*/
    
    .container_12 .prefix_3, .container_16 .prefix_4 {
        padding-left: 240px;
    }
    .container_12 .prefix_6, .container_16 .prefix_8 {
        padding-left: 480px;
    }
    .container_12 .prefix_9, .container_16 .prefix_12 {
        padding-left: 720px;
    }
    /* =Prefix Extra Space >> 12 Columns
    --------------------------------------------------------------------------------*/
    
    .container_12 .prefix_1 {
        padding-left: 80px;
    }
    .container_12 .prefix_2 {
        padding-left: 160px;
    }
    .container_12 .prefix_4 {
        padding-left: 320px;
    }
    .container_12 .prefix_5 {
        padding-left: 400px;
    }
    .container_12 .prefix_7 {
        padding-left: 560px;
    }
    .container_12 .prefix_8 {
        padding-left: 640px;
    }
    .container_12 .prefix_10 {
        padding-left: 800px;
    }
    .container_12 .prefix_11 {
        padding-left: 880px;
    }
    /* =Prefix Extra Space >> 16 Columns
    --------------------------------------------------------------------------------*/
    
    .container_16 .prefix_1 {
        padding-left: 60px;
    }
    .container_16 .prefix_2 {
        padding-left: 120px;
    }
    .container_16 .prefix_3 {
        padding-left: 180px;
    }
    .container_16 .prefix_5 {
        padding-left: 300px;
    }
    .container_16 .prefix_6 {
        padding-left: 360px;
    }
    .container_16 .prefix_7 {
        padding-left: 420px;
    }
    .container_16 .prefix_9 {
        padding-left: 540px;
    }
    .container_16 .prefix_10 {
        padding-left: 600px;
    }
    .container_16 .prefix_11 {
        padding-left: 660px;
    }
    .container_16 .prefix_13 {
        padding-left: 780px;
    }
    .container_16 .prefix_14 {
        padding-left: 840px;
    }
    .container_16 .prefix_15 {
        padding-left: 900px;
    }
    /* =Suffix Extra Space >> Global
    --------------------------------------------------------------------------------*/
    
    .container_12 .suffix_3, .container_16 .suffix_4 {
        padding-right: 240px;
    }
    .container_12 .suffix_6, .container_16 .suffix_8 {
        padding-right: 480px;
    }
    .container_12 .suffix_9, .container_16 .suffix_12 {
        padding-right: 720px;
    }
    /* =Suffix Extra Space >> 12 Columns
    --------------------------------------------------------------------------------*/
    
    .container_12 .suffix_1 {
        padding-right: 80px;
    }
    .container_12 .suffix_2 {
        padding-right: 160px;
    }
    .container_12 .suffix_4 {
        padding-right: 320px;
    }
    .container_12 .suffix_5 {
        padding-right: 400px;
    }
    .container_12 .suffix_7 {
        padding-right: 560px;
    }
    .container_12 .suffix_8 {
        padding-right: 640px;
    }
    .container_12 .suffix_10 {
        padding-right: 800px;
    }
    .container_12 .suffix_11 {
        padding-right: 880px;
    }
    /* =Suffix Extra Space >> 16 Columns
    --------------------------------------------------------------------------------*/
    
    .container_16 .suffix_1 {
        padding-right: 60px;
    }
    .container_16 .suffix_2 {
        padding-right: 120px;
    }
    .container_16 .suffix_3 {
        padding-right: 180px;
    }
    .container_16 .suffix_5 {
        padding-right: 300px;
    }
    .container_16 .suffix_6 {
        padding-right: 360px;
    }
    .container_16 .suffix_7 {
        padding-right: 420px;
    }
    .container_16 .suffix_9 {
        padding-right: 540px;
    }
    .container_16 .suffix_10 {
        padding-right: 600px;
    }
    .container_16 .suffix_11 {
        padding-right: 660px;
    }
    .container_16 .suffix_13 {
        padding-right: 780px;
    }
    .container_16 .suffix_14 {
        padding-right: 840px;
    }
    .container_16 .suffix_15 {
        padding-right: 900px;
    }
    /* =Clear Floated Elements
    --------------------------------------------------------------------------------*/
    
    /* http://sonspring.com/journal/clearing-floats */
    
    html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {
        background: none;
        border: 0;
        clear: both;
        display: block;
        float: none;
        font-size: 0;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
    }
    /* http://www.positioniseverything.net/easyclearing.html */
    
    .clearfix:after {
        clear: both;
        content: '.';
        display: block;
        visibility: hidden;
        height: 0;
    }
    .clearfix {
        display: inline-block;
    }
    * html .clearfix {
        height: 1%;
    }
    .clearfix {
        display: block;
    }
    /*
    -----------------------------------------------
    Grey Box Method - Layout CSS
    ----------------------------------------------- */
    
    body {
        background: #eee;
        border-top: 5px solid #000;
        color: #333;
        font-size: 11px;
        height:100%;
    }
    /* anchors
    ----------------------------------------------- */
    a {
        color: #000;
        font-weight:bold;
        text-decoration: none;
    }
    a:hover {
        color:#333;
    }
    /* 960 grid system container background
    ----------------------------------------------- */
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    #outer:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    html, body {
        height:100%
    }
    .container_12, .container_16 {
        margin-left: auto;
        margin-right: auto;
        width: 960px;/*height:100%;*/
        /*min-height:100%;*/
    }
    .wrap {
        min-height:100%;
    }
    * html .wrap {
        height:100%
    }
    .container_12 {
        background:#fff;
        /*position: absolute;
        left:50%;
        margin-left:-480px;
    */
        position:relative;
        margin:auto;
    }
    #contents {
        position:relative;
        padding-bottom:40px;/*height:100%;*/
    }
    #site_info .box {
        width:920px;
        color:#ccc;
        background:#666;
        position:relative;
        height:27px;
        margin:-43px 0 0;
        clear:both;
        overflow:hidden
    }
    #footer {
        clear:both;
        width:100%;
    }
    #footer p {
        margin:0
    }
    .headers {
        font-weight:normal;
        font-size:3em;
        text-align:left;
        background:#000;
        padding:.2em 1em;
        margin-bottom:0;
    }
    /* headings
    ----------------------------------------------- */
    h1, h2, h3, h4, h5, h6 {
        line-height:1.2em;
        margin-bottom:.3em;
    }
    h2 {
        margin-top:1em;
    }
    h5 {
        font-size:1.2em;
    }
    h6 {
        font-size:1em;
        text-transform:uppercase;
    }
    h1 a {
        font-weight:normal;
    }
    /* branding
    ----------------------------------------------- */
    h1#branding {
        font-weight:normal;
        font-size:1em;
        text-align:left;
        background-image:url('http://www.redflag.be/prospect/img/header.jpg');
        padding:1em 1em;
        margin-bottom:0;
        color:#fff;
    }
    /* page heading
    ----------------------------------------------- */
    h2#page-heading {
        font-weight:normal;
        padding:.5em;
        margin:0 0 10px 0;
        border-bottom:1px solid #ccc;
    }
    /* boxes
    ----------------------------------------------- */
    .box {
        background:#ddd;
        margin-bottom:20px;
        padding:10px 10px 1px 10px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
    .box h2 {
        font-size:1em;
        font-weight:normal;
        text-transform:uppercase;
        color:#fff;
        background:#333;
        margin:-10px -10px 0 -10px;
        padding:6px 12px;
    }
    .r_top {
        -webkit-border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;
        -moz-border-radius-topleft:5px;
        -moz-border-radius-topright:5px;
    }
    .r_bot {
        -webkit-border-bottom-left-radius:5px;
        -webkit-border-bottom-right-radius:5px;
        -moz-border-bottom-topleft:5px;
        -moz-border-bottom-topright:5px;
    }
    .r_all {
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
    .box h2 a, .box h2 a.visible {
        color:#fff;
        background:#333 url("http://www.redflag.be/prospect/img/switch_minus.gif") 97% 50% no-repeat;
        display:block;
        padding:6px 12px;
        margin:-6px -12px;
        border:none;
    }
    .grid_4 .box h2 a {
        background-position: 97% 50%;
    }
    .grid_5 .box h2 a {
        background-position: 98% 50%;
    }
    .grid_12 .box h2 a {
        background-position: 99% 50%;
    }
    .box h2 a.hidden, .box h2 a.hidden:hover {
        background-image: url("http://www.redflag.be/prospect/img/switch_plus.gif");
    }
    .box h2 a:hover {
        background-color:#111;
    }
    .block {
        padding-top:10px;
    }
    div.menu {
        padding:0;
    }
    div.menu h2 {
        margin:0;
    }
    div.menu .block {
        padding-top:0;
    }
    .profilebox {
        float:right;
        padding-right:15px;
    }
    .profilebox a.image {
        float:left;
        padding:2px 2px 0px 2px;
        border:1px solid #bbb;
        background:#fff;
    }
    /* paragraphs, quotes and lists
    ----------------------------------------------- */
    p {
        margin-bottom:1em;
    }
    blockquote {
        font-family: Georgia, 'Times New Roman', serif;
        font-size:1.2em;
        padding-left:1em;
        border-left:4px solid #ccc;
    }
    blockquote cite {
        font-size:.9em;
    }
    ul, ol {
        padding-top:0;
    }
    /* menus
    ----------------------------------------------- */
    ul.menu {
        list-style:none;
        border-top:1px solid #bbb;
    }
    ul.menu li {
        margin:0;
    }
    ul.menu li a {
        display:block;
        padding:4px 10px;
        border-bottom:1px solid #ccc;
    }
    ul.menu li a:hover {
        background:#eee;
    }
    ul.menu li a:active {
        background:#ccc;
    }
    /* submenus
    ----------------------------------------------- */
    ul.menu ul {
        list-style:none;
        margin:0;
    }
    ul.menu ul li a {
        padding-left:30px;
    }
    /* section menus
    ----------------------------------------------- */
    ul.section {
        border-top:0;
        margin-bottom:0;
    }
    ul.section li {
        text-transform:uppercase;
    }
    ul.section li a {
        background:#bbb;
    }
    ul.section li a:hover {
        background:#aaa;
    }
    ul.section li a:active {
        color:#fff;
        background:#666;
    }
    ul.section li li a {
        background:#ddd;
        border-bottom:1px solid #eee;
    }
    ul.section li li a:hover {
        background:#ccc;
    }
    ul.section li li a:active {
        color:#000;
        background:#fff;
    }
    ul.section ul li {
        text-transform:none;
    }
    ul.section ul.current li a {
        background:#eee;
        border-bottom:1px solid #fff;
    }
    ul.section ul.current li a:hover {
        background:#ddd;
    }
    ul.section ul.current li a:active {
        background:#fff;
    }
    ul.section li a.current {
        color:#fff;
        background:#666;
    }
    ul.section li a.current:hover {
        background:#555;
    }
    ul.section li a.current:active {
        background:#444;
    }
    ul.section li a.active {
        background:#fff;
        cursor:default;
    }
    ul.section li.current > a.active, ul.section li.current > a.active:hover {
        color:#fff;
        background:#666;
        cursor:default;
    }
    /* table
    ----------------------------------------------- */
    table {
        width:100%;
        border:1px solid #bbb;
        margin-bottom:10px;
    }
    col.colC {
        width:8em;
    }
    th, td {
        padding:.2em 1em;
        text-align:left;
    }
    thead th {
        border-bottom:2px solid #888;
        background:#bbb;
        padding:.4em 1em .2em;
    }
    thead th.table-head {
        font-size:1em;
        font-weight:normal;
        text-transform:uppercase;
        color:#fff;
        background:#555;
        border:1px solid #555;
    }
    tbody th, tbody td {
        border-top:1px solid #bbb;
        border-bottom:1px solid #bbb;
        background:#eee;
    }
    tbody tr.odd th, tbody tr.odd td {
        background:#fff;
    }
    tfoot th, tfoot td {
        border-top:2px solid #666;
        background:#eee;
    }
    tfoot tr.total th, tfoot tr.total td {
        border-top:6px double #666;
    }
    tfoot tr.total th {
        text-transform:uppercase;
    }
    th.currency, td.currency {
        text-align:right;
    }
    /* forms
    ----------------------------------------------- */
    form {
        overflow:hidden;
    }
    fieldset {
        border:1px solid #bbb;
        padding:10px;
        position:relative;
        background:#e9e9e9;
        margin-bottom:10px;
    }
    legend {
        font-size:1.1em;
        padding:.4em .8em;
        background:#fff;
        border:1px solid #bbb;
    }
    fieldset.login p {
        margin-bottom:1em;
        margin-top:0pt;
    }
    fieldset p label {
        width:98%;
    }
    fieldset p input {
        width:98%;
    }
    fieldset p select {
        width:99%;
    }
    fieldset.login p label {
        float:left;
        line-height:2em;
        margin-right:3%;
        text-align:right;
        width:32%;
    }
    fieldset.login p input {
        width:60%;
    }
    fieldset.login input.button {
        margin-left:35%;
    }
    form p.notice {
        font-weight:bold;
    }
    input.search.text {
        width:66%;
    }
    input.search.button {
        width:28%;
        margin-left:2%;
    }
    /* articles
    ----------------------------------------------- */
    .articles {
        padding:0;
    }
    .articles h2 {
        margin:0;
    }
    #articles {
        padding-top:0;
    }
    .article {
        border-top:1px solid #666;
        padding-top:.5em;
    }
    .box .article {
        border-top:3px solid #fff;
        padding:13px 10px 0 10px;
    }
    .article h2 {
        font-size:2em;
        font-weight:normal;
        text-transform:none;
        color:#333;
        background:transparent;
        padding:0;
        margin:0;
        border:none;
    }
    .article h3 {
        margin-bottom:.2em;
        font-size:1.6em;
    }
    .box .first {
        border-top:none;
    }
    .article h4 {
        font-size:1.2em;
        text-transform:uppercase;
        margin-bottom:.5em;
    }
    .article a.image {
        float:left;
        margin:3px 10px 3px 0;
        padding:4px;
        border:1px solid #bbb;
        background:#fff;
    }
    .article a.image:hover {
        border:1px solid #666;
    }
    .article a.image img {
        float:left;
    }
    .article p.meta {
        color:#666;
        border-top:1px dotted #999;
        border-bottom:1px dotted #999;
        padding:.3em 0;
        margin-bottom:.8em;
    }
    /* site information
    ----------------------------------------------- */
    #site_info a {
        color:#fff;
    }
    #site_info a:hover {
        color:#000;
    }
    /* AJAX sliding shelf
    ----------------------------------------------- */
    #loading {
        float:right;
        margin-right:14px;
        margin-top:-2px;
    }
    .block {
        padding-bottom:1px;
    }
    /* Accordian
    ----------------------------------------------- */
    .toggler {
        color: #222;
        margin: 0;
        padding: 2px 5px;
        background: #eee;
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-top: 1px solid #f5f5f5;
        border-left: 1px solid #f5f5f5;
        font-size:1.1em;
        font-weight: normal;
    }
    .element h4 {
        margin: 0;
        padding:4px;
        line-height:1.2em;
    }
    .element p {
        margin: 0;
        padding: 4px;
    }
    .float-right {
        padding:10px 20px;
        float:right;
    }
    #accordian-block {
        padding-bottom:10px;
    }
    /* Mootools Kwicks
    ----------------------------------------------- */
    #kwick-box {
        padding:0;
        overflow:hidden;
    }
    #kwick-box h2 {
        margin:0;
    }
    #kwick {
        position: relative;
    }
    #kwick .kwicks {
        display: block;
        background: #999;
        height: 120px;
        list-style:none;
        margin:0;
        overflow:hidden;
    }
    #kwick li {
        float: left;
        margin:0;
        padding:0;
    }
    #kwick .kwick {
        display: block;
        cursor: pointer;
        overflow: hidden;
        height: 100px;
        width: 215px;
        padding: 10px;
        background: #fff;
    }
    #kwick .kwick span {
        color:#fff;
    }
    #kwick .one {
        background: #666;
    }
    #kwick .two {
        background: #777;
    }
    #kwick .three {
        background: #888;
    }
    #kwick .four {
        background: #999;
    }
    /*
    -----------------------------------------------
    Navigation
    ----------------------------------------------- */
    
    /* navigation (horizontal subnavigation)
    ----------------------------------------------- */
    ul.nav, ul.nav * {
        margin:0;
        padding:0;
    }
    ul.nav {
        position:relative;
        background:#666;
        max-width:100%;
        height:2.5em;
    }
    ul.nav li {
        cursor:pointer;
        float:left;
        text-align:center;
        list-style-type:none;
        font-weight:normal;
    }
    ul.nav li ul {
        cursor:default;
        width:100%;
        max-width:100%;
        position:absolute;
        height:auto;
        top:2.5em;
        background-position:0 0 !important;
        left:-9000px;
    }
    ul.nav li ul li {
        padding:0;
        border:none;
        width:auto;
        max-width:none;
    }
    ul.nav li a {
        color:#fff;
        background:#666;
        font-weight:bold;
        text-decoration:none;
        display:block;
        float:left;
        padding:0 1em;
        height:2.4em;
        line-height:2.5em;
    }
    ul.nav li ul li a {
        position:relative !important; /* ie Mac */
        cursor:pointer !important;
        white-space:nowrap;
        line-height:2em;
        height:2em;
        font-weight:normal;
        color:#666;
        background-position:0 50% !important;
    }
    ul.nav li:hover a, ul.nav li a:hover, ul.nav li a:focus {
        color:#000;
        background:#ccc;
    }
    ul.nav li a:active {
        color:#666;
        background:#fff;
    }
    ul.nav li:hover ul {
        left:0;
        z-index:10
    }
    ul.nav li ul, ul.nav li {
        background:#ccc !important
    }
    ul.nav li:hover ul li a {
        color:#444;
    }
    ul.nav li:hover ul li a:hover {
        color:#000;
        background:#fff;
    }
    ul.nav li:hover ul li a:active {
        color:#666;
        background:#fff;
    }
    ul.nav li.current a {
        color:#666;
        background:#fff;
        cursor:default;
        font-weight:bold;
    }
    ul.nav li.current ul {
        left:0;
        z-index:5
    }
    ul.nav li.current ul, ul.nav li.current {
        background:#ccc !important
    }
    ul.nav li.current ul li a {
        color:#444;
        background:#ccc;
        font-weight:normal;
    }
    ul.nav li.current ul li a:hover {
        color:#000;
        background:#fff;
    }
    ul.nav li ul li.current a, ul.nav li ul li.current a:hover, ul.nav li.current:hover ul li a:active {
        color:#666;
        background:#fff;
    }
    /* navigation (vertical subnavigation)
    ----------------------------------------------- */
    ul.nav {
        background:#990000;
    }
    ul.main li {
        position:relative;
        top:0;
        left:0;
    }
    ul.main li ul {
        border-top:0;
    }
    ul.main li ul li {
        float:left;
    }
    ul.main li a {
        height:2.5em;
        line-height:2.5em;
        border:0;
        color:#fff;
        background:#990000;
    }
    ul.main li ul li a {
        width:12em;
        line-height:2em;
        height:2em;
        text-align:left;
        color:#fff;
        border-top:1px solid #990000;
        background:#444;
    }
    ul.main li a:focus {
        color:#fff;
        background:#990000;
    }
    ul.main li ul li a:hover {
        color:#fff;
        background:#555;
    }
    ul.main li:hover a {
        color:#fff;
        background:#b90302;
    }
    ul.main li:hover ul li a {
        color:#fff;
    }
    ul.main li:hover ul li a:hover {
        color:#fff;
        background:#990000;
    }
    ul.main li:hover a:active {
        background:#444;
    }
    ul.main li:hover ul li a:active {
        color:#fff;
        background:#770000;
    }
    /* secondary list
    ----------------------------------------------- */
    ul.nav li.secondary {
        float:right;
        color:#cde;
        background:transparent !important;
    }
    ul.nav li.secondary span.status {
        float:left;
        padding:0 1em;
        line-height:2.77em;
        height:2.77em;
        font-size:0.9em;
    }
    ul.nav li.secondary span.status a {
        float:none;
        display:inline;
        padding:0;
        height:auto;
        line-height:auto;
        color:#cde;
        background:transparent;
    }
    ul.nav li.secondary span.status a:hover {
        color:#fff;
        background:transparent;
    }
    ul.nav li.secondary span.status span {
        text-transform:capitalize;
    }
    ul.nav li.secondary:hover a {
        color:#fff;
        background:#666;
    }
    ul.nav li.secondary:hover a:hover {
        background:#555;
    }
    ul.nav li.secondary:hover a:active {
        background:#444;
    }
    /*
        Coin Slider jQuery plugin CSS styles
        http://workshop.rs/projects/coin-slider
    */
    
    
    .coin-slider {
        overflow: hidden;
        zoom: 1;
        position: relative;
    }
    .coin-slider a {
        text-decoration: none;
        outline: none;
        border: none;
    }
    .cs-buttons {
        display:none;
    }
    .cs-buttons a {
        margin-left: 5px;
        height: 10px;
        width: 10px;
        float: left;
        border: 1px solid #B8C4CF;
        color: #B8C4CF;
        text-indent: -1000px;
    }
    .cs-active {
        background-color: #B8C4CF;
        color: #FFFFFF;
    }
    .cs-title {
        width: 545px;
        padding: 10px;
        background-color: #000000;
        color: #FFFFFF;
        -webkit-border-top-right-radius:5px;
        -moz-border-radius-topright:5px;
    }
    .cs-prev, .cs-next {
        background-color: #000000;
        color: #FFFFFF;
        padding: 0px 10px;
    }
    </style>
    <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" />
    <![endif]-->
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
    <![endif]-->
    <script type="text/javascript" src="http://www.redflag.be/prospect/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.redflag.be/prospect/js/coin-slider.min.js"></script>
    </head>
    <body>
    <div class="container_12 wrap">
        <div id="contents">
            <div class="grid_12">
                <h1 id="branding"> <a href=""><img src="img/logo.png" alt="logo"/></a> <span class="profilebox"> <br/>
                    <b>Welcome back Mustek</b><br/>
                    You have 0 messages<br/>
                    Profile - Sign Out </span> <span class="profilebox"> <a href="#" class="image"><img src="http://www.redflag.be/prospect/img/blank_avatar.png" height="60" width="60" alt="photo" /></a> </span> </h1>
            </div>
            <div class="clear"></div>
            <div class="grid_12">
                <ul class="nav main">
                    <li> <a href="#">Home</a> </li>
                    <li> <a href="#">Recently Added</a> </li>
                    <li> <a href="#">Categories</a>
                        <ul>
                            <li> <a href="#">Action</a> </li>
                            <li> <a href="#">Adventure</a> </li>
                            <li> <a href="#">Casino &amp; Cards</a> </li>
                            <li> <a href="#">Classics</a> </li>
                            <li> <a href="#">Fighting</a> </li>
                            <li> <a href="#">Puzzle &amp; Mind</a> </li>
                            <li> <a href="#">Racing</a> </li>
                            <li> <a href="#">Shooters</a> </li>
                            <li> <a href="#">Sports</a> </li>
                        </ul>
                    </li>
                    <li> <a href="#">Multiplayer</a> </li>
                    <li> <a href="#">Newsblog</a> </li>
                    <li> <a href="#">Community</a> </li>
                    <li class="secondary">
                        <input style="padding:0px;margin-top:4px;margin-bottom:0px;" class="search" type="text" value="Search" />
                        <input class="search" type="button" value="Search" />
                    </li>
                </ul>
            </div>
            <div class="clear"></div>
            <!--<div class="grid_12" id="coin-slider"> <a href="img01_url"> <img src='http://www.redflag.be/prospect/img/scroller/test_1.png' width="940" alt="Welcome to Project Prospect"/> <span> Welcome to Project Prospect! </span> </a> <a href="img02_url"> <img src='http://www.redflag.be/prospect/img/scroller/test_2.png' width="940" alt="Jamlegend, new on Project Prospect"/> <span> Play the popular music-game Jamlegend, right here! </span> </a> </div> -->
            <div class="clear"></div>
            <div class="grid_12">
                <div class="box news">
                    <h2 class="r_bot"><b>News:</b> No releasedate set.</h2>
                </div>
            </div>
            <div class="clear"></div>
            <div class="grid_4">
                <div class="box">
                    <h2 class="r_top">Newest Games (more)</h2>
                    <div class="block">
                        <p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                    </div>
                </div>
            </div>
            <div class="grid_4">
                <div class="box">
                    <h2 class="r_top">Most Popular Games (more)</h2>
                    <div class="block">
                        <p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                    </div>
                </div>
            </div>
            <div class="grid_4">
                <div class="box">
                    <h2 class="r_top">Staff Picks (more)</h2>
                    <div class="block">
                        <p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                        <p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container_16">
        <div id="footer">
            <div class="grid_16" id="site_info">
                <div class="box">
                    <p>2010 - Redflag.be, all content on this website is property of their respected owners. <b>Pre-Alpha Build, do not leak!</b></p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
                $(document).ready(function() {
                    $('#coin-slider').coinslider({ width: 940, height: 300, navigation: true, spw:9, sph:5, delay: 5000 });
                });
            </script>
    </body>
    </html>
    You will still have a 5px vertical scroll because of this rule:

    Code:
    body {
        background: #eee;
        border-top: 5px solid #000;
        color: #333;
        font-size: 11px;
        height:100%;
    }
    100% height + 5px border equals 5px too big.

    You would need to put that border as a background image on the body element and remove the 5px border. Or put it on an inner element which could be absolutely placed so as not to interrupt the flow.

    Sorry if that's a bit hard to follow but you have multiple stylesheets and multiple rules affecting the same elements.

    You can't use 100% height on inner elements (see faq on 100% height) as that will limit the element to 100% and no more.

    The main page wrapper should not be absolutely placed because that means it will slide of the page and be unusable at smaller screen sizes. Just used auto margins on a static element instead (use position relative if a stacking context is required).

    Hope that helps anyway

  12. #12
    SitePoint Member
    Join Date
    May 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since my edit button is gone,

    I fixed the footer location by placing a spacer in there, I know it's kind of cheating, but it works

    Now for that black bar at the top...

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Now for that black bar at the top...
    Just use a repeating image on the body x-axis to create the top border and then apply a border top to #contents.

    Code:
    #contents {
          border-top:5px solid #000;
        position:relative;
        padding-bottom:40px;/*height:100&#37;;*/
    }
    Then remove the border-top from the body styles.

    That's the easiest solution

  14. #14
    SitePoint Member
    Join Date
    May 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And it works,

    Thanks for the help on this, I've been messing in the css for a day before I came to here.


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
  •