CSS Formatting - Basic Error? RRS feed

  • Question

  • CSS = it's Common Sense, Silly! Well, maybe not for me.

    I have started a new MasterPage, and have all the grunt work done to get things where they need to be - somewhat. I think the majority of the CSS is correct (otherwise it would be even more of a mess). The problem is that this is the first time I have really used "nested" div tags, and I think in some places, the parameters of parent elements are conflicting with those of child elements.

    To see what I am about to reference, visit www.nathanchesebro.org.

    Everything from the top of the page to the light blue navigation bar is correct. These div tags are all in line rather than nested - hence I got them correct!

    What is next is a real prize. On the left side should be a white rectangle 800px in width that expands with the text. As you can see, the corners are not rounded, and it is chopped up. To achieve rounded corners, I just made an 800px wide white rectangle in Design, and sliced it appropriately, no repeat. The center is the center cut of the rectancle, repeat x. The bottom is the bottom slice of the rectangle image. This is all float left in a larger CSS container.

    To make things more difficult, i have created a panel in that same larger container float right. Inside that container are more sliced rectangles with rounded corners on all four corners. They too should expand with their contents. They do this sucessfully, but it seems the bottom slice of the rectangle is masked by the overflow, rather than moving downwards with the text. I thought that was a clear: both; to fix that, but that was unsucessfull.

    Finally, there should be a 20px space between the white rectangle that holds the body text from the black footer.

    Has anyone encountered the same thing? Or have I just created a myraid of nested CSS containers that is causing conflict?

    Any help would be much appreciated.

    Thanks! -Nate

    Monday, June 7, 2010 4:22 AM

All replies

  • Try backing up.  Put only the elements and styles on the page that are working.  Then, add the others, one by one, style by style, previewing at each step.  When something doesn't work as you expect, stop and figure it out, and don't add anything else until you do.  If you can't, post that page, and repost here.  In short: tackle it in small steps, not in large chunks.  It's a lot easier.
    Monday, June 7, 2010 6:29 AM