Grow your CSS skills. Land your dream job.

Vertical-expanding box issues and css footer help

  • # January 26, 2010 at 11:45 pm

    Ok, I’m working on my portfolio site (http://blog.fiveeightfive.com/) and for the life of me I can’t tell why there’s such a large space between the social media icons and the picture of myself. That whole sidebar div was made be me trying to replicate this tutorial: http://css-tricks.com/expandable-css-note-box/ . Also, how can I get my footer to stick to the bottom of the page?

    # January 27, 2010 at 10:34 am

    Before you do anything validate. You have 82 errors….
    In IE7 and IE6 the navigation doesn’t sit at the top (add display: inline to the ul#nav li) and the right side with the photo of you and the social media covers the top of the rounded background image.

    For the footer to stick to the bottom, you will need to set margin and padding to 0 on <body class="home blog">. It is good practice to do a css reset and add them to your css as needed. Each browser has it’s own default settings for margins, padding, h tags etc.

    I changed the following to fix your problem with the space between the photo and icons (works in Firefox and IE8) but this does not alter the problems you have in IE7

    Code:
    .xbox .inside .tk-colaborate h2 {
    color:#FFFFFF;
    font-size:28px;
    font-weight:400;
    margin:10px;
    text-shadow:1px 1px 0 #000000;
    }
    #headshot (does not need any css)

    #topabout {
    float:right;
    width:195px;
    }

    #topabout .tk-colaborate p {
    font-size:15px;
    margin:0 0 20px;
    }

    Here are 2 articles, which will help you understand the whole concept of positioning.
    http://www.barelyfitz.com/screencast/ht … sitioning/
    and this one on absolute positioning within relative positioning
    http://css-tricks.com/absolute-position … sitioning/

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

You must be logged in to reply to this topic.

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