Grow your CSS skills. Land your dream job.

Displaced header image

  • # July 28, 2008 at 4:43 am

    Hello everyone,

    I have just started with Chris Coyiers mockup to CSS tutorial. Everything works perfectly until after the second video (I think). I try to follow Chris’ coding in the videos exactly, but after the second video my header image gets lowered on the page. I will attach a screenshot to this message. For some reason the image gets corrected when I remove

    width: 130px;
    float: left;
    display: block;

    in my CSS. But it then mess up my CSS:ed menu links.

    Here is my CSS code:

    * {
    margin: 0;
    padding: 0;
    }

    body {
    font-size: 62.5%;
    font-family: Helvetica, sans-serif;
    background: url(images/body-bg.gif) repeat-x top #f5ecd4;
    }

    p, li {
    font-size: 1.2em;
    line-height: 1.3em;
    margin-bottom: 0.8em;
    }

    h1 { font-size: 3.0em; margin:-bottom: 0.8em; }

    .clear { clear: both; }

    div#page-wrap {
    width: 800px;
    margin: 0 auto;
    }

    ul#nav {
    height: 236px;
    background: url(images/header-bg.gif) no-repeat;
    list-style: none;
    padding-left: 125px;
    }
    ul#nav li a {
    width: 130px;
    float: left;
    display: block;

    margin-top: 168px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    }
    ul#nav li a:hover, ul#nav li a:active {
    color: yellow;
    }

    div#main-content {
    padding-bottom: 50px;
    }
    div#main-content div#left-column {
    float: left;
    width: 530px;
    }
    div#main-content div#right-column {
    float: right;
    width: 260px;
    border-top: 8px solid #540000;
    }

    div#footer {
    background: #560000;
    color: white;
    padding: 10px 0 10px 0;
    text-transform: uppercase;
    border-top: 2px solid red;
    text-align: center;
    }

    (I have left the buttons for the menu intact on purpose, along with the CSS:ed menu. They will be removed later on.)

    Hope that someone can help me adjust the header image.

    Regards,
    H

    box
    # July 28, 2008 at 8:39 am

    post a url to the problem page – its much easier for someone to diagnose any problems on a live site.

    # July 28, 2008 at 11:25 am

    I’m sorry, but I don’t have a URL yet. Currently I’m running everything locally. Anyone with any ideas???

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".