WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Footer help (4 posts)

  1. makta112
    Member
    Posted 2 years ago #

    Hello

    I've added these lines of CSS to make my site's footer absolute and the width 100%

    #site-generator {
    position: absolute;
    background-image: url('http://www.geimaku.com/wp-content/uploads/2012/06/footer-bg.png');
    width: 100%;
    }

    But as you can see on my site,the footer is for some odd reason not in the center.

    It should look something like this: http://andriasang.com/ (the footer, I mean.)

    Thanks.

  2. Pann
    Member
    Posted 2 years ago #

    Hello,

    absolutely positioned elements do escape page flow but they respect the parent container's position if they have none declared.

    Try this:

    #site-generator {
    position: absolute;
    background-image: url('http://www.geimaku.com/wpcontent/uploads/2012/06/footer-bg.png');
    width: 100%;
    margin: auto;
    left: 0;
    }

    You'll still have the horizontal scroll bar because padding is added to the box size, and your box is set to 100% width.
    You can fix this by using this code:

    #site-generator {
    position: absolute;
    background-image: url('http://www.geimaku.com/wpcontent/uploads/2012/06/footer-bg.png');
    width: 100%;
    margin: auto;
    left: 0;
    padding: 10px 0;
    }

    If you wish the element to hover while the page scrolls, use fixed position instead, and set vertical position:

    #site-generator {
    position: fixed;
    background-image: url('http://www.geimaku.com/wpcontent/uploads/2012/06/footer-bg.png');
    width: 100%;
    margin: auto;
    left: 0;
    bottom: 0;
    padding: 10px 0;
    }

    Let me know if you run into any issues.

  3. makta112
    Member
    Posted 2 years ago #

    It worked!

    Thank you very much!

  4. Pann
    Member
    Posted 2 years ago #

    Anytime :)

Topic Closed

This topic has been closed to new replies.

About this Topic