Grow your CSS skills. Land your dream job.

I have a CSS problem!!!

  • # July 6, 2008 at 1:45 pm

    I have watched the tutorials on adding code to a PSD file and even though i have used CSS before….i have never sliced up a PSD and pieced it together using CSS.

    The problem i have ( which is flamming peeing me off) is this:
    I have sliced up my PSD file and placed these images ( which i saved as a png) into a file called images inside a file called root. Also in the root file i have a xhtml and css file.
    Then using css…i tried putting all together using <div> tags. But it doesn’t work!!!! Here’s the code.

    HTML:

    <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>

    <body>

    <div id="header">

    </div>

    </body>
    </html>

    (Obviously i have a declaration above this)

    THE CSS:

    body {
    background-color: #333333;

    }

    #header {
    background-image:url(images/header_bg.png);
    background-repeat: repeat-x;
    background-position: top;
    }

    Yet….if i change the header id ( #header) to body…then it works!!
    Please HELP!!!!!!!!!!!!!!

    # July 6, 2008 at 5:47 pm

    I can’t help because i dont understand what seems to be the problem! The code seems fine to me.

    # July 6, 2008 at 5:59 pm

    Since the code looked fine to me too, I tested it local. The code is correct indeed, but I think I know what’s your problem: when you have no content in the header-div and you didn’t gave it a width and hight, you won’t see the background. So fill the div with content or set the width and height to see the background :)

    # July 6, 2008 at 8:51 pm

    Edwin is right =) If there is no content inside the div it will "collapse" to 0px in height and you won’t see the background image.

    # July 7, 2008 at 10:04 am

    Sorted!! I gave it some height and width attributes and bobs your uncle!!

    Many thanks for replies!!

    Neil

    # July 7, 2008 at 5:45 pm

    And I have learned a new expression:

    Quote:
    Bob’s your uncle is a commonly used expression known mainly in Britain and Commonwealth countries. It is often used immediately following a set of simple instructions and roughly carries the same meaning as the phrase "and there you have it." For example, "Simply put a piece of ham between two slices of bread, and Bob’s your uncle.”

    Source: Wikipedia
    Didn’t knew that before ;)

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

You must be logged in to reply to this topic.

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