Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Footer hidden when using Full page background image

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 23, 2011 at 7:48 pm #31356
    cre8tive1
    Member

    Hi all,

    I’m finishing up a website that I’ve been working on that combines several techniques I learn here. (Thanks Chris).

    I’m trying to use a sticky footer, which initially worked, but is now hidden after using the technique from this post for a full page background image.

    I’m thinking that it’s a layering issue but haven’t been able to fix it. Any input on how to get the footer to display again?

    Thanks to all.

    Here’s the site: http://tofino.directrouter.com/~coralree/

    January 23, 2011 at 7:58 pm #64358
    dhechler
    Member

    I don’t see your footer even if I disable all of your background image styling.

    January 23, 2011 at 8:35 pm #64301
    cre8tive1
    Member

    Hmm, when I disable styles I see it as the last item on every page.

    © 2010-2011 Coral Reef Snorkel Adventures | Captain Ron Gittins | Tel 808-987-1584 | Site design by Jerry Ross Photography & Design

    January 23, 2011 at 9:54 pm #64303
    dhechler
    Member

    Ok, looking through your site, there are some things that might help fix things on there.

    1. You have your main-content, main-navigation, and aside all position: absolute;
    This messes with the content display. You also have margin: 0 auto -40px; for your main content. This will make your footer go behind your main-content.

    2. if you float the main-content left and your aside right, you can achieve the same effect as positioning them absolutely with margins.

    3. keep your page-wrap position: relative or your content will push under the background image.

    4. make your footer position: relative and it will appear above the background image.

    Hope this helps.

    January 27, 2011 at 12:39 pm #63727
    cre8tive1
    Member

    Ok, I made the changes indicated above. The only things I have set to position absolute are the #header and #main-navigation divs. I also have a div set the class of clear in the footer to clear the floats of main-content and aside.

    Setting the footer to position: relative brought it out in front of the background image.

    However, it still acts like I’m not clearing the float of the main-content and aside divs.

    http://tofino.directrouter.com/~coralree/dolphins/

    Any suggestions?

    Thanks for any and all input.

    Jerry

    January 28, 2011 at 5:44 pm #63505
    cre8tive1
    Member

    That worked perfect. Thanks.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.