CSS Layout Question: Overlapping Images and Too Many Divs?

Question

I recently got a few designs made and am trying to slice and code them to get better at CSS. On my first design, I ran into some issues.

First, do I have too many divs? I have a wrapper around each section to allow the expandable background section on the left and right of the content to be a different color than the content itself. I also had to use a conditional style to get IE to position the ul correctly. Is there a better way to do that?

Second, would I make a div for each colored block in the content section? That would give me a white, blue, white, gray, and blue div all stacked onto each other. The main issue with that is going to be the parrot and the great price $199 emblem that breaks out of the div.

Here's what I got: http://www.astigmaproductions.com/

Here's what it should look like: http://www.astigmaproductions.com/ap.jpg

Answer 1

You're not using a reset css, which will lead to crossbrowser issues. Consider adding one. You will run into IE issues and in this case a conditional style is the way to go. But adding a reset will lead to less IE problems.

Since the parot breaks out of its div you shouldn't break everything into multiple divs. There is a gradient that is non-linear and lots of graphics going on in this header. Just grab the image and make it a big background (blue bg + grey line + parrot) and it should work. Add the skype and co. icons on top of that as well as the text.

If you want the text to be anti-aliased, try using sIFR or add the text to the main background.

That's pretty much it from what I see, you just need to start working and see if you run into issues.