Grow your CSS skills. Land your dream job.

FOOTER ICONS NOT SETTING LEVEL — ARRRRRR HELP PLEASE! – SOLVED!

  • # December 16, 2012 at 1:56 pm

    Guys, I can’t for the life of me figure out how to get my social media icons to set level with my footer text.

    You can see the icons are setting a few pixels above the bottom line of the footer text. I’ve tried using FireBug to figure it out, but I just can’t!

    This is driving me crazy and I appreciate ANY help!! THANK YOU!!

    # December 16, 2012 at 2:08 pm

    You could add a

    .footer img {
    vertical-align:middle;
    }
    That would align the top of the images with the top of the text.
    I would however do this. It looks a little nicer. The middle of the images is about center with the middle of the text.

    .footer img {
    position: relative;
    top: 3px;
    }

    # December 16, 2012 at 2:10 pm

    Wouldn’t this look better? http://cloud.chrisburton.me/LcxS

    # December 16, 2012 at 2:14 pm

    Thanks Kevin! Chris, that does look pretty good man. I”ll check the code for that as well! Thanks guys!

    # December 16, 2012 at 2:17 pm

    Kevin, I’m still a novice with CSS… do I have to create a new class called footer, or is having a div called footer enough?

    # December 16, 2012 at 2:19 pm

    Actually, you already have it set as an ID. I should have written:

    #footer img {
    position: relative;
    top: 3px;
    }

    Add that to your CSS and you should be fine.

    # December 16, 2012 at 2:20 pm

    okay, great. I’ll try that.

    # December 16, 2012 at 2:22 pm

    Perfect, I got it Kevin, thanks!! Chris, if I did want to implement your suggest… How would I set that up? Do a float left on the text and then a float right on the icons?

    # December 16, 2012 at 2:23 pm

    Let me get ya’lls opinion .. does it seem like the icons as I have them are for Simeon (the webbuilder) or for Hayley (the actual person who’s site it is) … thanks!

    # December 16, 2012 at 2:26 pm

    With Chris’s setup it looks like it’s for Hayley. With the current setup, it’s a tossup in my opinion. I could see it being either’s. If it’s for Hayley, I’d switch it over to Chris’s setup. If it’s for Simeon, keep it the way it is.

    # December 16, 2012 at 2:29 pm

    @hendrix940 If you remove your entire `.copyrights` css, I’ll code it up for you.

    Your markup should look like this:

    Your text here


    # December 16, 2012 at 2:34 pm

    Right on men! Thank you very much for all the help and feedback!! Yes, the icons at the bottom are for Hayley. Chris, I’ll try that sir, thank you!

    # December 16, 2012 at 2:36 pm

    Chris, yes please, I would like for your help on the layout of the footer. I have my markup as you have quoted above.

    # December 16, 2012 at 2:39 pm

    There’s no reason to wrap it with the images. Plus, this gives me/you more control over the icons.

    # December 16, 2012 at 2:42 pm

    I have the mark up as you highlighted above Chris.

Viewing 15 posts - 1 through 15 (of 29 total)

You must be logged in to reply to this topic.

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