Fix my footer please!

  • On my website, I inserted a logo that was larger than the default one that came with the theme. Therefore, my content overlapped it. To fixed this I changed the content from relative to absolute. I believe this was the only change I made, but my footer no longer stays at the bottom of the page… it’s like halfway up the page now.

    Here is my original CSS:

    #wrap {
    margin: auto;
    text-align: left;
    width: 960px;
    position: relative;
    }

    #header, #content, #footer {
    float: left; display: inline;
    clear: both;
    position: relative;
    }

    #header {
    height: 250px;
    width: 100%;
    }
    #logo { margin: 0 }

    #logo a {
    /* background: url(images/logo.png) no-repeat; */
    cursor: pointer;
    position: absolute;
    top: 90px; left: 0px;
    display:block;
    }

    #content {
    padding: 0 0 4em;
    width: 100%;
    }
    .home #main {
    float: left;
    width: 374px;
    }
    #main {
    float: left;
    width: 681px;
    }
    .home #sidebar {
    float: right;
    width: 543px;
    }
    #sidebar {
    float: right;
    width: 250px;
    }
    #sidebar h3 { margin-top:10px; }

    #footer {
    width: 100%; height: 65px;
    background: url(images/bg-footer.gif) repeat-x;
    }
    #footerWrap {
    color: #dadada;
    width: 960px;
    margin: 0 auto;
    position: relative;
    }

    Here is how I changed my CSS:

    #wrap {
    margin: auto;
    text-align: left;
    width: 960px;
    position: relative; min-height: 100%
    }

    #header, #content, #footer {
    float: left; display: inline;
    clear: both;
    position: relative;
    }

    #header {
    height: 250px;
    width: 100%;
    }
    #logo { margin: 0 }

    #logo a {
    /* background: url(images/logo.png) no-repeat; */
    cursor: pointer;
    position: absolute;
    top: 90px; left: 0px;
    display:block;
    }

    #content {
    position: relative;
    top: 120px; left: 0px;
    padding: 00 0 4em;
    width: 100%;
    }
    .home #main {
    float: left;
    width: 374px;
    }
    #main {
    float: left;
    width: 681px;
    }
    .home #sidebar {
    float: right;
    width: 543px;
    }
    #sidebar {
    float: right;
    width: 250px;
    }
    #sidebar h3 { margin-top:10px; }

    #footer {
    width: 100%; height: 65px;
    background: url(images/bg-footer.gif) repeat-x;
    }
    #footerWrap {
    color: #dadada;
    width: 960px;
    margin: 0 auto;
    position: relative

    }

    Any input would be appreciated! My skills are very basic.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter awanderingsole

    (@awanderingsole)

    if it helps here is my website that I’m developing:

    https://www.awanderingsole.com

    Why not replace the logo with one that has the same dimensions as the default one. That way you won’t have to fiddle with CSS at all.

    Alternatively, If you use Firefox I recommend Firebug for testing CSS changes such as this one.

    R

    Why dont you just edit your footer instead of the CSS ? In your board in Wp theres a thing on left with theme and add new theme and widgets you choose edit and then edit footer . php put your image there and your links there instead of in CSS so then you can move it down in the footer . php ( sorry for my english and i use different Wp language tho )

    Thread Starter awanderingsole

    (@awanderingsole)

    thanks, but I’m not sure what to edit in the footer.php. I’m not sure what to change in order to make the footer stay at the bottom of the page…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Fix my footer please!’ is closed to new replies.