Grow your CSS skills. Land your dream job.

Need help with my page layout (footer mostly)

  • # November 19, 2012 at 1:10 am

    Hello everyone. I’ve just recently started using html and css. I’ve been trying to design a website for my photographer friend and am currently in the design stage. I really want my copyright text to line up on the bottom of my footer… and I can’t figure out how to do that with this setup I have. Here is a link to the website so you can kind of see what I’m talking about. [LINK](http://students.bcitwebdev.com/jlandon/geordieirving/ “http://students.bcitwebdev.com/jlandon/geordieirving/”) Below is the html and css I’ve written. Help me out guys!

    HTML
    < !DOCTYPE html>


    CSS
    @font-face { font-family:”urbanjungle”;
    src:url(‘urbanjungle.otf’);
    }

    @font-face { font-family:”gudearegular”;
    src:url(‘gudea_regular.ttf’);
    }

    body { background-image:url(‘clean_textile.png’);
    background-color:#FFFFFF;
    }

    h1 { font-size:300%;
    }

    ul { list-style-type:none;
    display:inline;
    }

    li { display:inline;
    }

    #container { min-height:100%;
    position:relative;
    }

    #header { background-image:url(‘debut_dark.png’);
    background-color:#333333;
    font-family:”urbanjungle”;
    color:#FFFFFF;
    padding:10px
    }

    #header a:link { color:#FFFFFF;
    text-decoration:none;
    }

    #header a:hover { color:#CCCCCC;
    text-decoration:underline;
    }

    #header a:visited { color:#FFFFFF;
    text-decoration:none;
    }

    #body { padding:10px;
    padding-bottom:271px;
    }

    #footer { font-family:”gudearegular”;
    color:#FFFFFF;
    position:absolute;
    bottom:0;
    width:100%;
    height:271px;
    background-image:url(‘bottom_border.png’);
    }

    #footer a:link { color:#FFFFFF;
    text-decoration:underline;
    }

    #footer a:hover { color:#CCCCCC;
    text-decoration:none;
    }

    #footer a:visited { color:#FFFFFF;
    text-decoration:underline;
    }

    # November 19, 2012 at 1:41 am

    @isolatedhowl : If you are wanting to have your footer always be at the bottom, check out Sticky Footer. This will result in your footer always being at the bottom of the screen regardless of your contents height. It will not be a fixed position rather grow with your content.

    # November 19, 2012 at 3:30 am

    Thanks I’ll check that out.

    # November 19, 2012 at 4:06 am

    @JohnMotylJr : Decided to just fix the footer to the bottom of the page instead… that’s really what I was going for. Was having trouble figuring out how to also make the footer text sit at the bottom of the footer, so just typed the text right onto the footer image. Is there a better way to do this?

    # November 19, 2012 at 4:17 am

    @isolatedhowl

    So you’re aware that you will have white (or background-color) space at the bottom of you web page if your content is not enough to fill the viewport such as a long-screened mobile phone when in portrait view?

    It can look quite ugly…

    # November 19, 2012 at 4:40 am

    Yeah I would avoid removing an element from the natural flow, ideally it shouldn’t be fixed or absolutely positioned. @JohnMotylJR had the right idea, in that sticky footer is likely the best solution.

    # November 19, 2012 at 6:26 am

    I’m not sure but are you even allowed to have an ID of ‘body’?

    I suppose it might work but it seems awfully confusing.

    # November 19, 2012 at 2:50 pm

    @isolatedhowl :

    Try this and let me know if it works.

    Download me

    If you cannot download this let me know.

    # November 19, 2012 at 2:59 pm

    @JohnMotylJr : Thank you so much for your time and effort, I did revert back to sticky footer and it is working fine. Really the issue I was worried about was that I couldn’t get the text in my footer to line up on the bottom. As I stated earlier, I temp fixed this issue by attaching the text to the footer image. I can’t accept this gracious offer of code as this is my first client project. I need to code everything myself. Thanks again.

    @Paulie_D : Thanks, I have now changed it to #content. Don’t know what I was thinking haha.

    # November 19, 2012 at 3:05 pm

    @isolatedhowl
    No worries, you will soon love the guidance given in this forum. Its full of really awesome and accomplished professionals that are always offering support to peoples questions.

    You can browse the code and see the fixes i made to making the copyright div stick to the very bottom of the footer, that may help so you don’t have to add that into the image. Nothing wrong with using a snippet here or there :) If you have more questions or need guidance, post post post!

    # February 6, 2013 at 5:47 pm

    Can I please resurrect this as I really need some help. I inherited this design from a previous designer as I’m now looking after the site for this client. For some reason the footer will not layout to the bottom of the site. It just needs to sit in the bottom padding area of 160px height that I have set for it, but it just won’t go. Any help hugely appreciated
    http://Www.aegpartitions.com

    # February 6, 2013 at 6:21 pm

    @Flippdesigns

    There is way too much unnecessary absolute positioning going on in there. Firstly, try turning it all off (esp on #footer and #footer p) and see how things position.

    The footer is the last thing in your document flow so it should be at the bottom except for all the positioning.

    In fact, you can turn off ALL of the properties for #footer (except font-size).

    Next, take any height off of the footer as it should be determined by the content of the internal elements.

    For instance, you have set a height of 100px on the footer but footer-wrapper (which is an odd name since it doesn’t wrap the footer) has a set height of 150px.

    # February 12, 2013 at 3:52 am

    i forgot to thank you for this Paulie_D, your advice is always invaluable

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

You must be logged in to reply to this topic.

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