Grow your CSS skills. Land your dream job.

Help with a couple of issues on a CSS static-width site

  • # April 11, 2009 at 4:57 pm

    Hi, I’m a PHP/jQuery developer who sometimes deals with CSS. I was asked to mock up a site from a PSD, since I wasn’t busy at the time. I was doing fine, making a nice, fluid width site, until I noticed that the PSD had some subtle shadows on it that I needed to replicate. So, I am in the process of changing it over to a static-width site. Everything is going OK, but I’m having an issue where the ‘div’ that contains the content is waay off from the JPG header image. I’m not entirely sure what the issue is. I’m using Firebug and coding it in vi, but I can’t seem to find the issue. The site is here:

    http://www.littlecaesarsokc.com/dev/

    The biggest issue is the body_content div not lining up with the JPG background above it. However, there’s another issue that I’m not sure about yet, either. This will be converted into a WP template next, so that the client can use WP as a CMS. I need to split the header navigation around the logo, but I’m not sure how. I want it flexible enough to where the client can add new items to the header. From my background, my first thought is to do it with jQuery or PHP, but are either of those the best way?

    Thanks for any help!

    # April 11, 2009 at 5:22 pm

    Ok, add these snippets to your CSS

    Code:
    #page {
    background-image:url(./images/lc_bg.jpg);
    background-position:center top;
    background-repeat:no-repeat;
    margin:0 auto;
    width:920px;
    }
    #content {
    margin:10px auto 20px;
    padding:20px 0;
    width:920px;
    }
    #body_content {
    background-color:white;
    width:920px;
    }

    Not too sure what you mean with the nav?

    # April 12, 2009 at 7:59 pm

    Ok, I got the first problem figured out. With the second, look at the .topnav div. I would like to split it around the logo at the top. Three menu items on the left, two on the right.

    # April 13, 2009 at 2:04 am

    You can either split it into two lists one floated to the left the other to the right or give each <li> its own class and add appropriate widths and margins.

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

You must be logged in to reply to this topic.

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