Grow your CSS skills. Land your dream job.

Background not expanding with my gallery part 2

  • Wes
    # June 23, 2009 at 8:18 pm

    Alright now that I have cleaned up my code and found a decent option for displaying my work rather than some fancy gallery I am still having the problem of unordered lists not making my background expand
    I can solve it with breaks but I would prefer to learn why it is doing this
    http://www.wesascolese.com/portfolio.php

    here is my html

    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

    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;
    }
    #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 img
    {
    float:left;
    height:50px;
    width:50px;
    background-position:50% 50%;
    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;
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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