Over the last years I’ve been making a lot of XTHML/CSS site implementations. Every design is different, but I’ve learned that over time I have a good starting point for the css styles and html. This goes especially for designs with a content box with shadows, and a body background, with the content box positioned in the center of the page. Take a look in my portfolio, many of the designs are like that.

So I want to share this “pleasant” start, with some explanations.

Key ingredients:

• Eric Meyer’s reset styles.
• Some years worth of experience setting up XHTML/CSS implementations of designs.
• A well-designed page layout
• Pre-sliced images, knowing which background images that need to repeat and which do not. I will explain the basics shortly.

Getting down to it

Download the CSS and the HTML files zipped in this file. Unpack them, and open them in your favourite code viewer. Before this, or at the same time, you’ll want to slice up your design in Fireworks or Photoshop or whatever you use. That depends on the design. In this simple design I use I have justa top, mid and bottom image for the boxes on the left, middle and right side of the content. Simple enough to understand, right? So we’ll start with the CSS.

Right. So first off, I’ll explain what this is. The CSS is basically Eric Meyer’s reset styles as a start. They will make sure that the browsers, whether it’s Firefox, IE6, Opera or whatever, doesn’t assume things it shouldn’t. For instance that all tables should have borders, or 3 pixels of margin, or anything else. This means that you will be in control, everything is zeroed out and ready for your input style-wise. I’ve marked the code with reset style start and end. There’s also a clearfix style which is a class you can apply to content divs if Firefox isn’t letting the content in a box be pushed by the content in the box above it.

The rest of the CSS is made up of:

• body style for full width and a repeatable background image that repeats horizontally.
• outerWrapper which is a div that is just inside body. This is the first element inside of the body tag. The reason for having an outerWrapper is when you need to have a background image on top of the bodys fade background. Like on my site, I have a flower pattern on top, over the blue’ish fade.
• wrapper that has your site’s width including any shadow around the content box. This box can sometimes have the content background images, but usually I put this in the sitecontainer.
• siteContainer is the main content of the site. Inside of this I often have a repeatable background image which is shown in my code as an example. Also, any elements inside of this I float, so all the main content elements of the site are in a floated layout in the pageflow. In this site all the content boxes are elements inside a hierarchy inside of siteContainer. So there’s no background-image on the siteContainer here. Check out my portfolio for different implementations.
• bottomContainer is positioned after the siteContainer, the reason for this positioning is that you want the content in the siteContainer to push the bottomContainer downwards as it needs to.

See the divs outlined with webdev toolbar (click for big version)

This is the basics of what this site is built on. The rest of the stuff is the actual content boxes and content. And that’s a lot of floats, you can see that by viewing the page source. If you start off with this code, and your pages are usually centered with a fixed width, this should be a good starting point. Of course you have to change all relevant pixel widths and all, but it should get you started.

If you look at the HTML file, it starts with a very basic setup. The doctype is XHTML transitional. I could have gone with Strict, but I usually choose Transitional because 3rd party code I use may not be adapted for the stricter version. If you don’t know what a Doctype is, I must recommend you read up on it, a quick Google search should do the trick. Basically it tells the browser how to draw the page. If you don’t specify one, the browser will often enter something called a Quirks mode, which assumes a lot of things you don’t necessarily want, and the layout may turn out really odd.

Important: This is code unrelated to Wordpress. You need to add Wordpress specific styles, and a lot more generic styles, for instance for code tags and such before your page style is complete. This is just a starting point. Some people also decide to float the entire page, or none of the page. I won’t go into floating or not here, but I prefer to keep all content floated because it makes all content have a logical sequence, also without styles.

If something is unclear, feel free to comment and I’ll see about an edit to fill in more information.