WordPress.org

Ready to get started?Download WordPress

Forums

footer issues (3 posts)

  1. Marshmelly411
    Member
    Posted 6 years ago #

    I've always had issues with coding my footer but have just decided to see if anyone could help me out.

    My website is http://www.adorability.org. I use div layers for the blog, header, nav etc. No matter what I try, I cannot seem to get my footer to appear under the ENTIRE site. It just keeps appearing under the blog area. (or it doesn't appear OVER the background image). I would love to have an image as my footer but can't because I don't know how to fix this.

    If someone has any clue what I'm talking about and would like to take a look at my coding (right click "view source" on my website) I would greatly appreciate it. Thank you =)

  2. scribblerguy
    Member
    Posted 6 years ago #

    I see that you are using absolute positioning for your main div's, which is not necessary for your current layout. By switching to "static" positioning, it'll be much easier to accomplish what you want.

    Since you're not using a sidebar, the basic structure of your site is essentially three div's:

    <div id="header">
    Header stuff here
    </div>
    <div id="content">
    The main content here
    </div>
    <div id="footer">
    Footer stuff here
    </div>

    Because div's, by default, are "block" elements (like a "p" - paragraph - element), they will take up the whole width of the browser. The next element after a div will show up below the first div.

    If you want these divs to be some distance away from the edges of the browser window and you want the content to be a fixed width, then use the following CSS declarations in your stylesheet:

    #header, #content, #footer {
    width: 750px;
    margin: 0 auto;
    }

    This should restrain the widths of the divs to 750 pixels and by setting the left and right margins to "auto,"* this will automatically center the content in the browser window, regardless of whether the user has a small laptop screen or a large widescreen monitor.

    *The zero is for the top and bottom margins.

    If you're in need of a good CSS / stylesheet tutorial, the one at w3schools.com isn't bad.

    Also, the Codex has a number of articles on theme development, including CSS stylesheets. It's usually easier to search for what you want then navigating through the menus and pages.

    If you're in need of a better editor for your theme's files, consider
    Komodo Edit, which is free. It does have a bit of a learning curve, but it also has some useful power features that are handy for non-experts such as inline code suggestion.

  3. Marshmelly411
    Member
    Posted 6 years ago #

    thanks a bunch! My next layout will need to use absolute positioning, but the "auto" command that you mentioned has helped me to have more control of my footer and content =)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags