Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Exclamation footer / layout problems

    hi all, been trying to create a simple website. here is what i have so far

    http://www.tibshelfcomputersolutions.com/2

    problem is that the grey footer won't stay at the bottom of the page. Any ideas how I can fix it?

    here's my index.php and style.php

    index.php
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Test Layout 2</title>
    <
    link href="style.css" rel="stylesheet" type="text/css" />
    </
    head>
    <
    body>
    <
    div id="headerbar">
    <
    div id="header">
    <
    div id="logo"><img src="logo.png" align="left" width="210" height="70" alt ="Tibshelf Computer Solutions" /></div>
    <
    div id="call">Call us at</div>
    <
    div id="phone">07790709518</div></div>
    <
    div id="navbar">Home About Services Portfolio Contact</div></div>
    <
    div id="middlebar">
    <
    div id="middle"><class="heading">Home</p></div></div>
    <
    div id="contentbar">
    <
    div id="cotent">
      <
    p>1<br />1<br />1<br />1<br />1<br />1<br /></p>
      <
    div class="footerbar2">Content for  class "footerbar2" Goes Here</div>
      <
    p><br />
      </
    p>
      </
    div>
    </
    body>
    </
    html
    style.css
    PHP Code:
    @font-face {
        
    font-familyAllerDisplay;
        
    srcurl('fonts/Aller_Rg.ttf');
    }

    @
    font-face {
        
    font-familyAllerDisplayBold;
        
    srcurl('fonts/Aller_Bd.ttf');
    }

    @
    font-face {
        
    font-familyAllerDisplayLight;
        
    srcurl('fonts/Aller_Lt.ttf');
    }

    @
    font-face {
        
    font-familyAllerDisplay2;
        
    srcurl('fonts/AllerDisplay.ttf');
    }

    * {
        
    margin0;
    }

    #headerbar {
        
    width100%;
        
    positionfixed;
        
    background-color#85BAFC;
        
    -webkit-box-shadow1px 1px 1px 1px #454545;
        
    -moz-box-shadow1px 1px 1px 1px #454545;
        
    box-shadow1px 1px 1px 1px #454545;
        
    z-index1;
    }

    #header {
        
    padding-top13px;
        
    width800px;
        
    margin-leftauto;
        
    margin-rightauto;
    }

    #logo {
        
    }

    #navbar {
        
    padding-top35px;
        
    padding-bottom15px;
        
    width800px;
        
    margin-leftauto;
        
    margin-rightauto;
        
    text-aligncenter;
    }

    #call {
        
    font:20px/16px 'AllerDisplayBold'ArialHelveticasans-serif;
        
    text-shadow:2px 2px 0 rgba(0,0,0,.15);
        
    color:#fff;
        
    text-alignright;
        
    margin-right235px;
    }

    #phone {
        
    font:48px/44px 'AllerDisplayBold'ArialHelveticasans-serif;
        
    text-shadow:2px 2px 0 rgba(0,0,0,.15);
        
    color:#000;
        
    text-alignright;
    }

    #middlebar {
        
    positionfixed;
        
    margin-top143px;
        
    width100%;
        
    height140px;
        
    background-color#195b8a;
        
    -webkit-box-shadow2px 2px 2px 2px #CCC;
        
    -moz-box-shadow2px 2px 2px 2px #CCC;
        
    box-shadow2px 2px 2px 2px #CCC;
        
    z-index: -1;
    }

    #middle {
        
    width800px;
        
    margin-leftauto;
        
    margin-rightauto;
    }

    #middle .heading {
        
    font:44px/36px 'AllerDisplay2'ArialHelveticasans-serif;
        
    text-shadow:2px 2px 0 rgba(0,0,0,.15);
        
    color:#fff;
        
    padding-top65px;
    }

    #middle .description {
        
    font:32px/30px 'AllerDisplayLight'ArialHelveticasans-serif;
        
    text-shadow:2px 2px 0 rgba(0,0,0,.15);
        
    color:#fff;
        
    padding-top20px;
    }

    #contentbar {
        
    positionfixed;
        
    margin-top288px;
        
    width100%;
        
    min-height100%;
        
    height100%;
        
    background-color#F00;
        
    -webkit-box-shadow2px 2px 2px 2px #CCC;
        
    -moz-box-shadow2px 2px 2px 2px #CCC;
        
    box-shadow2px 2px 2px 2px #CCC;
        
    z-index: -1;
    }

    .
    footerbar2 {
        
    height180px;
        
    background-color#313131;
        
    width100%;
        
    floatnone;
        
    margin-bottom0px;


  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    the only way for a footer to stick to the bottom is using a sticky footer. http://ryanfait.com/resources/footer...ottom-of-page/


  •  

    Posting Permissions

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