Grow your CSS skills. Land your dream job.

Need help with footer !!

  • # March 18, 2009 at 4:00 pm

    Hi all.

    Ok so im still messing around trying to convert a PSD sample i did to try and learn more stuff.

    So i wanted to have a footer image bg image for the footer div which i can do ok. But then i wanted to have 2 divs inside the footer with ul links next to each other.

    How would i go about doing that. Could any one help me out. I suppose a good example would be this site’s footer.
    Where Chris has got Friends, Navigation etc.

    Would i just have a div container then 2 divs inside that then how would i go about getting them both next to each other in the container div…..its driving me made!!! :x

    Ok so reading this back i dunno if it makes sense…but im too tired and going to bed !!

    This is the live link anyway

    http://www.footballsmylife.com

    Thanks in advance for the help :)

    # March 18, 2009 at 4:27 pm

    You have way to many divs in there.

    Code:

    and the CSS

    Code:
    #footer {
    background: whatever;
    }
    .footer_col {
    float: left;
    }

    Set widths and add margins and padding where required.

    Rob
    # March 18, 2009 at 4:34 pm

    firstly – why have you set margin right so large? why dont you just set the footer div width to 900px or whatever it is?

    Ok for your HTML footer structure I would do…

    with the CSS something like

    Code:
    div#footer-conatiner {
    width:900px;
    height:290px;
    }

    ul#footer-friends {
    width:400px;
    display:inline-block;
    float:left;
    }

    ul#footer-friends li:first-child {
    font-size: 1.5em;
    font-weight: bold;
    }

    Obvioulsy thats just an untested idea – but pretty much what I would do.

    # March 19, 2009 at 6:27 am

    Ah ok. Thanks guys, I’ll try your ideas when I finish work.

    I only set the margin-right that large coz I was just messing around to see wot things looked like….(hence red border) and never took it off :D

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

You must be logged in to reply to this topic.

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