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

[coding_hero]

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!

[apostrophe]

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?

[coding_hero]

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.

[apostrophe]

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.

[Author]

Posts