Grow your CSS skills. Land your dream job.

Footer Problem, have tried all of the tutorials.

  • # September 11, 2009 at 3:20 pm

    Hey all, I hate to even post this question. However, I have a problem trying to get my footer to display at the bottom of the page after all content. I have tried all of the tutorials you could search for on google (some get me closer than others) as well as these forums. Currently, I have it fixed to the bottom over top of my content, however I would like to push it below the content, and only show up when scrolled far enough.

    I appreciate the help!

    http://www.theskillvillegroup.com

    Also, since I have been trying many solutions, the code made be sloppy and there is probably some things in there that is not in use.

    Code:
    @charset “utf-8″;
    /* CSS Document */
    * {
    margin:0;
    padding:0;
    }
    html {
    height:100%;
    }
    body {
    background:#FFFFFF;
    position:relative;
    height: 100%;
    }
    #wrap {
    height: 100%
    }
    body > #wrap {height: auto; min-height: 100%;}

    #footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
    }
    /* IE 6 */
    * html #footer {
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+’px’);
    }

    #header_left {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:300px;
    background:url(‘images/expand.jpg’) repeat-x top;
    }
    #header_right {
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:50%;
    height:300px;
    background:url(‘images/expand.jpg’) repeat-x top;
    }

    #header {
    position:relative;
    width:752px;
    height:300px;
    background:url(‘images/header.jpg’);
    z-index: 3;
    margin:0 auto;
    }

    #main-box {
    color: #fff;
    position: absolute;
    top:310px;
    width:100%;
    font-size: 19px;
    background: #000000 url(‘images/main-top.jpg’) repeat-x;
    }

    #quote {
    padding: 15px;
    background: url(‘images/main-corner.jpg’) no-repeat right bottom;
    }

    #info {
    position: relative;
    top: 400px;
    text-align: left;
    margin-left: 20px;
    margin-right: auto;
    z-index: -2;
    }

    #info2 {
    position: relative;
    top: 400px;
    text-align: left;
    z-index: -2;
    font-family: “Comic Sans MS”, cursive;
    font-size: 12px;
    }

    #navigation {
    position: absolute;
    padding-top: 242px;
    right: 1px;
    z-index: 3;

    }

    # September 11, 2009 at 3:52 pm

    Perhaps assigning a z-index placing the footer beneath the page content would do the trick.

    Worth a try.
    DD

    # September 12, 2009 at 12:42 pm

    here is some severely reworked layout.

    The reason nothing was working was because of the way you coded the layout structure. You contained divs inside of other divs (when you didn’t need to) which caused you to have to absolutely postion them…

    Here is a smooter layout with the same feel as the original, still some problems, but I’m still working on it.
    too many changes to explain them but if you have specific questions I’ll try my best to help you understand.

    CSS:

    Code:
    @charset “utf-8″;
    /* CSS Document */
    * {
    margin:0;
    padding:0;
    }
    html {
    height:100%;
    }
    body {
    background:#FFFFFF;
    position:relative;
    height: 100%;
    }
    #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -61px;
    width: 752px;
    }

    #push {
    height: 61px;
    }

    #footer {
    height: 61px;
    width:100%;
    background:url(‘http://www.theskillvillegroup.com/images/expandfooter.jpg’) repeat-x

    bottom;
    }

    #header_left {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:300px;

    background:url(‘http://www.theskillvillegroup.com/images/expand.jpg’) repeat-x top;
    }
    #header_right {
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:50%;
    height:300px;

    background:url(‘http://www.theskillvillegroup.com/images/expand.jpg’) repeat-x top;
    }

    #header {
    position:relative;
    width:752px;
    height:300px;

    background:url(‘http://www.theskillvillegroup.com/images/header.jpg’);
    /* z-index: 3; */
    margin:0 auto;
    }

    #main-box {
    color: #fff;
    width:100%;
    font-size: 19px;
    background: #000000 url(‘http://www.theskillvillegroup.com/images/main-top.jpg’)

    repeat-x;
    }

    #quote {
    padding: 15px;
    background:

    url(‘http://www.theskillvillegroup.com/images/main-corner.jpg’) no-repeat right bottom;
    }

    #info {
    margin: 0 auto;
    }

    #info2 {
    position: relative;
    top: 400px;
    text-align: left;
    z-index: -2;
    font-family: “Comic Sans MS”, cursive;
    font-size: 12px;
    }

    #navigation {
    position: absolute;
    padding-top: 242px;
    right: 1px;
    z-index: 3;

    }

    /*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
    .qmmc .qmdivider{
    display:block;
    font-size:1px;
    border-width:0px;
    border-style:solid;
    position:relative;
    z-index:1;
    }

    .qmmc .qmdividery{
    float:left;
    width:0px;
    }

    .qmmc .qmtitle{
    display:block;
    cursor:default;
    white-space:nowrap;
    position:relative;
    z-index:1;
    }

    .qmclear {
    font-size:1px;
    height:0px;
    width:0px;
    clear:left;
    line-height:0px;
    display:block;
    float:none !important;
    }
    .qmmc {
    position:relative;
    zoom:1;
    z-index:10;
    }

    .qmmc a, .qmmc li {
    float:left;
    display:block;
    white-space:nowrap;
    position:relative;
    z-index:1;
    }

    .qmmc div a, .qmmc ul a, .qmmc ul li {
    float:none;
    }

    .qmsh div a {
    float:left;
    }

    .qmmc div{
    visibility:hidden;
    position:absolute;
    }

    .qmmc .qmcbox{
    cursor:default;
    display:inline-block;
    position:relative;
    z-index:1;
    }

    .qmmc .qmcbox a{
    display:inline;
    }

    .qmmc .qmcbox div{
    float:none;
    position:static;
    visibility:inherit;
    left:auto;
    }

    .qmmc li {
    z-index:auto;
    }

    .qmmc ul {
    left:-10000px;
    position:absolute;
    z-index:10;
    }

    .qmmc, .qmmc ul {
    list-style:none;
    padding:0px;
    margin:0px;
    }

    .qmmc li a {
    float:none;
    }

    .qmmc li:hover>ul{
    left:auto;
    }
    /*[END-QCC]*/
    /*[START-QCC0]*/
    #qm0 ul {top:100%;
    }
    #qm0 ul li:hover>ul{top:0px;left:100%;}/*[END-QCC0]*/

    /*!!!!!!!!!!! QuickMenu Styles !!!!!!!!!!!*/

    /* QuickMenu 0 */

    /*”””””””” (MAIN) Container””””””””*/
    #qm0
    {
    padding:10px;
    border-width:0px;
    border-style:solid;
    border-color:#EEEEEE;
    }

    /*”””””””” (MAIN) Items””””””””*/
    #qm0 a
    {
    padding:5px 4px 5px 5px;
    color:#000000;
    font-family:Comic Sans MS;
    font-size:12px;
    text-decoration:none;
    font-weight: bold;
    text-align:left;
    }

    /*”””””””” (SUB) Container””””””””*/
    #qm0 div, #qm0 ul
    {
    padding:10px;
    margin:-2px 0px 0px 0px;
    background-color:transparent;
    border-style:none;
    }

    /*”””””””” (SUB) Items””””””””*/
    #qm0 div a, #qm0 ul a
    {
    padding:3px 10px 3px 5px;
    background-color:transparent;
    font-size:11px;
    border-width:0px;
    border-style:none;
    font-weight: normal;
    }

    /*”””””””” (SUB) Hover State””””””””*/
    #qm0 div a:hover
    {
    background-color:#B7D8FD;
    color:#009;
    }

    /*”””””””” (SUB) Hover State – (duplicated for pure CSS)””””””””*/
    #qm0 ul li:hover>a
    {
    background-color:#B7D8FD;
    color:#009;
    }

    /*”””””””” (SUB) Active State””””””””*/
    body #qm0 div .qmactive, body #qm0 div .qmactive:hover
    {
    background-color:#B7D8FD;
    color:#0009;
    }

    /*”””””””” Individual Titles””””””””*/
    #qm0 .qmtitle
    {
    cursor:default;
    padding:3px 0px 3px 4px;
    color:#444444;
    font-family:arial;
    font-size:11px;
    font-weight:bold;
    }

    /*”””””””” Individual Horizontal Dividers””””””””*/
    #qm0 .qmdividerx
    {
    border-top-width:1px;
    margin:4px 0px 4px 0px;
    border-color:#96C7FD;
    }

    /*”””””””” Individual Vertical Dividers””””””””*/
    #qm0 .qmdividery
    {
    border-left-width:1px;
    height:15px;
    margin:4px 2px 0px 2px;
    border-color:#AAAAAA;
    }

    /*”””””””” (main) Rounded Items””””””””*/
    #qm0 .qmritem span
    {
    border-color:#0570E7;
    background-color:#D8EEFD;
    }

    /*”””””””” (main) Rounded Items Content””””””””*/
    #qm0 .qmritemcontent
    {
    padding:0px 0px 0px 4px;
    }

    /*”””””””” Custom Rule””””””””*/
    ul#qm0 ul
    {
    padding:10px;
    margin:-2px 0px 0px 0px;
    background-color:#D8EEFD;
    border-width:1px;
    border-style:solid;
    border-color:#0570E7;
    }

    /*”””””””” Custom Rule””””””””*/
    ul#qm0 li:hover > a
    {
    background-color:#D8EEFD;
    }

    #feedback {
    position:absolute;
    position:fixed;
    text-indent:-100000px;
    top:33%;
    width:46px;
    height:150px;
    /* z-index:4444; */
    overflow:hidden;
    left:auto !important;
    right:0 !important;
    margin-left:auto !important;
    margin-right:-10px !important;
    background: transparent

    url(‘http://theskillvillegroup.com/newskill/images/requestinfo.png’) no-repeat 0 0

    !important;
    }

    .profile #content h2 {
    padding-bottom:8px;
    }

    #feedback:hover {
    margin-right:-3px !important;
    }

    #feedbackForm {
    padding:30px 10px;
    }

    #feedbackForm li {
    overflow:hidden;
    padding-right:30px;
    padding-top:10px;
    width:515px;
    }

    #feedbackForm label {
    color:#615F62;
    float:left;
    font-size:16px;
    line-height:32px;
    padding:0 10px 0 0;
    text-align:right;
    width:105px;
    }

    #feedbackForm div {
    overflow:hidden;
    }

    #feedbackForm fieldset {
    padding:30px 10px 0 115px;
    }

    #requestinfo {
    position:absolute;
    top: 400px;
    }

    }

    Html: (from inside the body):

    Code:

    value="http://vimeo.com/moogaloop.swf?clip_id=6252717&color=00adef&fullscreen=1"

    />

    type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always"

    width="350" height="197"/>

    value="http://vimeo.com/moogaloop.swf?clip_id=6314435&server=vimeo.com&show_title=0

    &show_byline=0&show_portrait=0&color=00adef&fullscreen=1" />

    type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always"

    width="350" height="197"/>

    value="http://vimeo.com/moogaloop.swf?clip_id=6314916&server=vimeo.com&show_title=0

    &show_byline=0&show_portrait=0&color=00adef&fullscreen=1" />

    type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always"

    width="350" height="197"/>

    value="http://vimeo.com/moogaloop.swf?clip_id=6315147&server=vimeo.com&show_title=0

    &show_byline=0&show_portrait=0&color=00adef&fullscreen=1" />

    type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always"

    width="350" height="197"/>

    href='http://www.theskillvillegroup.com/requestinfo'>Request Info

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

You must be logged in to reply to this topic.

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