In part two of two, we’ll be taking our XHTML and our sliced up images and bringing them together into a the beautiful medley that is CSS.

Step 1 – Setup and Reset

Once you’ve linked to your external style sheet, we’re going to use a CSS reset, which gets rid of all the various default styles that browsers add, which can be inconsistent and cause all sorts of problems. I use a simplified version of  Eric Meyer’s CSS Reset. We can also set some basic styles for the body of the document, including background colour and font-family.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	background: #f7f4d5;
	font-family: "Trebuchet MS", Verdana, sans-serif;
}

Looks good, now we need to set the width of the document’s outer container, which is the width of our main background image, 1000px. To center it, we need to set the left and right margins to auto. Let’s add in the background image while we’re at it. To get the space between the top of the page and the background image, measure it using the ruler tool (I). It looks like about 28px.

#container {
	background: url('images/main_bg.jpg') no-repeat top;
	margin: 28px auto 0 auto;
	width: 1000px;
}

I’m specifying the margin values using css shorthand, which starts at top and goes clockwise around, so this shorthand means we have a top margin of 28px, left and right margins set to auto, and no bottom margin. We need to push the header down a bit, so on your PSD measure the distance from the top of the header image to the top of the main background image. Measure carefully and zoom in if you have to, because we need all those boxes to line up perfectly. I measured 67px.

padding-top: 67px

Step 2 – The Header

Let’s add in the header background image first, then we can figure out how to position it properly. The header image is 859px wide, and also centered, so let’s set that too.

#header {
	width: 859px;
	margin: 0 auto;
	background: url('images/header_bg.jpg') no-repeat top;
}

Now we need to position the content within the header. First, however, we need to replace the header text with image so we know how much space we’re working with. I’m using an image replacement technique where I set the image as the background, and set the text-indent property to something ridiculous like -9999px, so the original text doesn’t appear on the screen, but remains in the markup. When we replace text with images, we need to define the height and width of the image so that they expand properly.

#header h1 {
	background:url('images/logo.jpg') no-repeat;
	text-indent: -9999px;
	height: 60px;
	width: 366px;
}

Now we need to position it, measure the distance from the top of the logo to the top of the header, and the side of the logo to the side of the header, I measured 67px and 45px repsectively. We’re going to add the 67px to the top padding of the containing element, and give the h1 a left margin of 45px.

#header {
	width: 859px;
	margin: 0 auto;
	background: url('images/header_bg.jpg') no-repeat top;
	padding-top:67px;
}

#header h1 {
	background:url('images/logo.jpg') no-repeat;
	text-indent: -9999px;
	height: 60px;
	width: 366px;
	margin-left: 45px;
}

Our logo should now be nicely lined up. On to the paragraph underneath, we just need to add the same left margin of 45px, make the text smaller and a different colour, and set a width so that the line breaks happen in the right places (generally the width of the text box)

#header p {
	font-size: 13px;
	color: #6b3603;
	margin-left: 49px;
	width: 365px;
	line-height: 15px;
	padding-top: 4px;
}

I also added a line-height of 15px, and a tiny bit of padding at the top. Now all that’s left to do is add some space at the bottom of the header and we’re done. We find this value by measuring from the bottom of the paragraph to the top of the navigation bar, and add it as bottom padding on the header div.

#header {
	width: 859px;
	margin: 0 auto;
	background: url('images/header_bg.jpg') no-repeat top;
	padding: 67px 0 40px 0;
}

Notice that I used the shorthand property again instead of adding padding-bottom under the padding-top. Alright, that’s it for the header, you should have something like this:

Step 3 – Navigation

This part is a bit trickier, so pay close attention! First off, lets add the background colour to the entire containing div, as well as giving it a width and centering it (same width as the header: 859px).

#navigation {
	width: 859px;
	margin: 0 auto;
	background: #e4a805;
}

We want the navigation links to be on the left side of the bar, and we want the search form on the right, so to do this we’re going to use opposing floats, the links floating left and the form floating right.

#navigation ul {
	list-style: none;
	float: left;
}

#navigation form {
	float: right;
}

You’ll now notice that our background has gone away. This is because floating elements takes them out of the normal “flow” of the document, and so the rest of elements around them stop behaving well. To restore order, we add overflow: hidden to the parent element.

#navigation {
	width: 859px;
	margin: 0 auto;
	background: #e4a805;
	overflow: hidden;
}

Which leaves us with something like this:

Next, we need to add some space at the top and sides of the navigation bar, because the list and form aren’t aligned with the sides of the bar. Measure the distances from the top of the navigation bar to the top of the search form, from the right side of the “search” button to the right edge of the nav bar, and then repeat for the bottom and left. Add these values as padding to the navigation div, and check it in your browser. The navigation bar has now extended to the left and right! This is because block-level elements add padding, margins and borders to the width of the element, making them wider. To correct this problem, we need to subtract the left and right margin values from the width.

#navigation {
	width: 806px;
	margin: 0 auto;
	background: #e4a805;
	overflow: hidden;
	padding: 13px 25px 10px 28px;
}

So we get this:

Getting our links in a line

To get our link items to display horizontally, we need to float them like we did earlier

#navigation ul li {
	float:left;
}

This float didn’t cause us any problems because if you float an element that’s inside a floated element, all your problems go away! (for the most part). Next lets style the text, and add right margins to the list items. Measure the distance between the brown buttons in the navigation bar. The text styles have to apply to the anchor elements to change the colours and the underline, and the margins have to apply to the list items.

#navigation ul li {
	float:left;
	margin-right: 17px;
}

#navigation ul li a {
	color: #ffffd6;
	text-decoration: none;
}

And our navigation is starting to look a lot better!

Now for the tricky part: the background images. If you haven’t already, I suggest you read an article about the concept of sliding doors, either the original on A List Apart, or just Google it, there are a lot of great tutorials out there. To start, we’re going to apply the left side image to our list items and position them on the left.

#navigation ul li {
	background: url('images/nav_left.gif') no-repeat left;
	float:left;
	margin-right: 17px;
}

Next we add padding to the list items so that the background expands, so measure the distances around the text within the buttons. This part can be a bit fiddly, so just keep checkin in your browser until it looks right.

#navigation ul li {
	background: url('images/nav_left.gif') no-repeat left;
	float:left;
	margin-right: 17px;
	padding: 8px 0px 8px 20px;
}

Next, we add the right half of the button image to the anchor tags, and add padding to the anchor tags so they expand fully. Again, you may need to mess around with these values a bit. Remember to position the background image to the right

#navigation ul li {
	background: url('images/nav_left.gif') no-repeat left;
	float:left;
	margin-right: 17px;
	padding: 8px 0px 8px 20px;
}

#navigation ul li a {
	background: url('images/nav_right.gif') no-repeat right;
	color: #ffffd6;
	text-decoration: none;
	padding: 8px 20px 8px 8px;
}

And finally our navigation menu is finished!

Fixing up the search form

This part is pretty easy, we’re mostly just replacing default backgrounds with our own. Replace the input element with our searchfield image, and the submit button with our own brown search button. Input fields have borders by default, so we have to get rid of those too. Next, we need to add heights and some padding, again, this part can be tricky, especially the input field because there’s no text to measure around. We may as well do the text styling on the search button here too.

#navigation form input#searchinput {
	background: url('images/input.gif') no-repeat;
	border: none;
	height: 32px;
	padding: 0 15px;
}

#navigation form input#searchsubmit {
	background: url('images/search_button.gif') no-repeat;
	border: none;
	height: 28px;
	width: 69px;
	font-size: 16px;
	color: #ffffd6;
	cursor: pointer;
}

And that’s it! we’re done with the navigation bar! Take a look: It’s a thing of beaty.

Step 4 – Main Content

Alright, let’s get started with the main content. First off, we need to set the width and center it, and add in our background image.

#content {
	background: url('images/content_bg.jpg') no-repeat bottom;
	margin: 0 auto;
	width: 859px;
	padding-top:16px;
}

Notice that we positioned the image at the bottom so that no matter how much or little content we have, we always see the bottom border. We’ve also added some padding at the top, which is the distance from the bottom of the nav bar to the top of the pinkish background in the features modules. Next we need to work on the modules themselves. To get them to display horizontally, you guessed it, we need to float them. To prevent things from getting messy, we need to add the overflow:hidden rule to the containing element, which we called #features. The boxes won’t display beside eachother unless their combined widths are less than the width of the container, so we need to set a width for each box too.

#features {
	overflow:hidden;
}

.feature {
	background: #f7f5e2;
	float: left;
	width: 245px;
}

Next we need to space our boxes out one by one, starting with the leftmost one, #exchange. The distance from the edge of the pinkish background to the edge of the content background will be the margin value, and then measure the distances between the boxes.

#exchange {
	margin-left: 35px;
}

#remote {
	margin-left: 30px;
}

#training {
	margin-left: 23px;
}

Looks pretty good so far:

Next we need to style all the text in the boxes, including the h2 headers, which need to be replaced with images, using the same technique we used on the logo. Next, we measure the distances between all the elements in the boxes, and add padding and margin values

.feature h2 {
	text-indent: -9999px;
	height: 21px;
	width: 145px;
	margin: 27px 0 10px 13px;
}

.feature h3 {
	font-size: 13px;
	color: #444439;
	margin-left: 13px;
	padding-left: 39px;
}

.feature p {
	color: #444439;
	font-size: 13px;
	line-height: 16px;
	padding-top: 10px;
	margin-left: 13px;
}

#exchange h2 {
	background: url('images/exchange_server.jpg') no-repeat;
}

#remote h2 {
	background: url('images/remote_desktop.jpg') no-repeat;
}

#training h2 {
	background: url('images/product_training.jpg') no-repeat;
}

The reason we need so much padding on the left of the h3 elements is because we need to add in the icons beside each heading:

#exchange h3 {
	background: url('images/graph.jpg') no-repeat left;
}

#remote h3 {
	background: url('images/tool.jpg') no-repeat left;
}

#training h3 {
	background: url('images/page.jpg') no-repeat left;
}

To get all the boxes the same height, we have to add more padding to the bottom of the last box than the others, something like this:

#exchange {
	margin-left: 35px;
	padding-bottom: 31px
}

#remote {
	margin-left: 30px;
	padding-bottom: 31px;
}

#training {
	margin-left: 23px;
	padding-bottom: 47px;
}

And that’s it, we’re done with those boxes!

Second group of boxes

To get our “sidebar” and “description” boxes beside eachother, we need to float them, too, which means we need to set a width value. Find the padding and margin values the same way we did with the other boxes, and set the background colours of the sidebar

#sidebar {
	background: #f6f1ba;
	float: left;
	padding: 9px 0 18px 13px;
	margin: 18px 0 0 35px;
	width: 232px;
}

#description {
	float: left;
	margin: 18px 0 0 30px;
	width: 463px;
}

To prevent the footer from wrapping around the side, we set overflow:hidden on the parent element, which is the #content div.

#content {overflow: hidden;}

Now we just need to style the text in the boxes, including the h2 image replacements.

#sidebar h2 {
	background: url('images/sed_dolor.jpg') no-repeat;
	text-indent: -9999px;
	height: 17px;
	width: 134px;
	padding-bottom: 8px;
}

#sidebar ul {
	list-style: none;
}

#sidebar ul li {
	background: url('images/bullet.gif') no-repeat left;
	padding-left: 13px;
}

#sidebar ul li a {
	color: #444439;
	font-size: 13px;
}

#description h2 {
	background: url('images/integer_vel.jpg') no-repeat;
	text-indent: -9999px;
	width: 247px;
	height: 27px;
	padding-bottom: 12px;
}

#description p {
	font-size: 13px;
	color: #444439;
	line-height: 16px;
}

Let’s just add some padding to the bottom of the content div, and there, we’re basically done with the main content!

#content {
	background: url('images/content_bg.jpg') no-repeat bottom;
	margin: 0 auto;
	overflow: hidden;
	width: 859px;
	padding: 16px 0 35px 0;
}

Internet Explorer 6 double-margin bug

If we look at our page in IE6, some of the margins are doubled up! This is because of an IE6 bug which causes margins on floated elements to double on the side of the float, such that if you float an element to the left, the margin-left will be doubled, and the reverse for elements floated to the right. Fortuneatly, the fix for this bug is really simple, we just need to apply display:inline to the floated element!

.feature {
	background: #f7f5e2;
	float: left;
	width: 245px;
	display: inline;
}
#sidebar {
	background: #f6f1ba;
	float: left;
	padding: 9px 0 18px 13px;
	margin: 18px 0 0 35px;
	width: 232px;
	display: inline;
}

There we go, all fixed!

Step 6 – Footer

All that’s left to do is style the footer, which should be pretty simple, so see if you can figure it out yourself, here’s what we need to do:

1. Declare the width and make the footer centered
2. Change the text styles
3. Float the unordered list of navigation links to the left, and the copyright text to the right
4. Get the list items displaying in a row
5. Fix the double-margin but on the ul

Can you figure it out?

Okay, here’s the answer:

#footer {
	margin: 0 auto;
	overflow: hidden;
	padding: 18px 0 60px 0;
	width: 859px;
}

#footer ul {
	list-style: none;
	float: left;
	margin-left: 67px;
	display: inline;
}

#footer ul li {
	float: left;
	padding-right: 16px;
}

#footer ul li a {
	color: #6b3603;
	font-size: 13px;
}

#footer p {
	color: #6b3603;
	float: right;
	font-size: 13px;
	display: inline;
	margin-right: 114px;
}

And that’s it! we’re done! We’ve successfully coded up a fairly complex PSD template into valid, semantic XHTML and CSS!

Note: One generally shouldn’t size text in absolute units like pixels, because it can’t be resized in earlier versions of Internet Explorer, so you should be using ems, I just didn’t really want to get into it here, because I already mentioned it in this Nettuts tutorial. You have to scroll down a bit to around step 11

View Demo