Grow your CSS skills. Land your dream job.

Background still collapsing

  • Wes
    # June 28, 2009 at 1:33 am

    Alright I watched the float video learned a lot. Cleared my floats still the same problem. Background is still collapsing
    http://www.wesascolese.com/portfolio.php

    here is my source code

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    and here is my css (the clear is at the bottom)

    Code:
    body
    {
    background:url(images/bg.jpg);
    font-family:Verdana, Geneva, sans-serif;
    font-size:68.5%;
    }

    h2 { font-size:1.6em); color:#827857; text-transform:uppercase;}
    h3 { font-size:1.4em); color:#827857; text-transform:uppercase;}
    h4 { font-size:1.2em); color:#827857; text-transform:uppercase;}
    h5 { font-size:0.8em); color:#827857; text-transform:uppercase;}

    #page-wrap
    {

    width:800px;
    margin: 0 auto;
    background:url(images/main-bg.jpg) repeat-y;
    }

    #header
    {
    margin:0 auto;
    background:url(images/banner.jpg);
    width:800px;
    height:155px;

    }

    #header ul
    {
    margin:0 auto;
    list-style:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:2.0em;
    font-weight:bold;
    margin-left:150px;

    }

    #header ul li a
    {
    display:block;
    width:100px;
    float:left;
    color:#fff;
    margin:100px 0 5px 0;
    text-decoration:none;
    text-align:center;
    }

    #header ul li a:hover
    {
    color:#e8e4d8;
    }

    #main
    {
    width:450px;
    margin:0 auto;
    }

    #main p
    {
    color:#827857;
    }

    #gallery ul
    {
    margin:0 auto;
    list-style:none;
    }
    #gallery ul li
    {
    float:left;
    }

    #gallery ul li img
    {
    height:50px;
    width:50px;
    margin:5px;

    }

    #footer
    {

    margin:0 auto;
    background:url(images/footer.jpg);
    width:800px;
    height:191px;
    }
    #footer p
    {
    text-align:center;
    padding-top:30px;
    color:#FFF;
    font-size:0.8em;
    text-transform:uppercase;
    }

    .class {clear:both}

    # June 28, 2009 at 4:08 am

    In your css you have:

    Code:
    .class {clear:both}

    It should be:

    Code:
    .clear {clear:both}

    Putting it after the footer in the markup won’t do anything, it needs to be between #main and #footer:

    Code:

    Wes
    # June 28, 2009 at 1:03 pm

    Oh god that is just a plain silly oversight. I feel so dumb :lol: thanks, and like magic it works ugh. Thanks again

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

You must be logged in to reply to this topic.

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