Coding a Complex Design into CSS and XHTMLBy: Tessa Thornton Today, were going to be taking the PSD website design, from Mahmouds Psdtuts+ Tutorial, and coding it into valid, semantic XHTML and CSS. Along the way, we'll go over some essential CSS techniques like image replacement, sliding doors and CSS sprites. This is a monster of a tutorial, as the design is a bit complex. Nevertheless, a relative beginner should be able to follow along, so put on a pot of coffee and let's get started!

Tutorial DetailsProgram: Adobe Photoshop Version: CS and up Difficulty: Beginner-Intermediate Estimated Completion Time: 1-3 Hours

Planning & SetupAnalyzing the Design Taking a look at Mahmouds design, I can tell ghag 3there are some things that might be a bit challenging to code: Its a very image-heavy design. This makes our task a bit more complicated, and well need to work extra hard to keep the file sizes down. The layout changes a lot: One column, four columns, two columns, and then three columns. This means using a lot of floats, which can be tricky, especially with IE6. The design uses non-web-safe fonts, which we cant embed with @font-face or Cufon (etc.), because theyre proprietary fonts. This means were going to need to replace the text with images. The toughest part of this design is just that there are a lot of sections, which means a lot of code, and a lot of planning. Planning the Layout Now that weve identified some problem spots, we can get started with the tricky layout. First, we need to identify the areas which stretch across the page, as opposed to the areas which are confined within a set width. The header background, the background behind the slider area, and the footer background all stretch across the page; so they have to be outside of any containing divs that we may use. These stretch divs will have ids that end with -stretch, and wont have any width or margin dimensions. Take a look at a quick mockup of the layout:

Notice that the main sections are the header, the slider, the main content (which has the features columns, the about info, and the twitter feed), a footer, and then some copyright info with secondary navigation. Open your code editor and start sketching out the skeleton of the XHTML the main divisions. Make sure to comment the ends of each div, I cant tell you how much time this will save you when you find yourself burried knee-deep in nested divs. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. Logo and navigation Slider Content

20. 21. 22. 23. 24. 25. Features columns 26. 27. 28. 29. About section, Team Section 30. 31. 32. 33. Twitter feed, social media links 34. 35. 36. 37. 38. 39. 40. Contact Form, Testimonials, Blog 41. 42. 43. 44. 45. 46. Footer content 47. 48. 49. 50. Next we divide each section into the smaller sections contained in them, starting with the features section, with the four columns, each describing a feature of the theoretical company. Each column will be wrapped in a div with a unique id, as well as the class of feature. The general-info section will be divided into who which will contain the Who We Are text, and behind-logo with the quote from Mahmoud. The footer is divided into its three columns, contact, testimonials, and blog. Filling in the Content Lets fill in some content now, being careful to use semantic, meaningful markup as we go: view plaincopy to clipboardprint? 1. 2. 3. 4. 5. Logo and navigation 6. 7. 8. 9. 10. 11. Slider Content 12. 13. 14. 15. 16. 17. 18. Features columns 19. 20. 21. 22. 23. 24. 25. Who we are 26. 27. 28. Behind the logo 29. 30.

31. 32. Team Links 33. 34. 35. 36. 37. 38. Twitter feed 39. 40. 41. 42. 43. 44. 45. 46. 47. Contact Form 48. 49. 50. Testimonials 51. 52. 53. Latest Blog Posts 54. 55. 56. 57. 58. 59. 60. 61. Footer content 62. 63. 64. Dont be too intimidated, we'll go over each section one at a time as we come to them.

Part One XHTML Step One HeaderThe header background needs to stretch the full length of the browser window, while the header content needs to be centered and contained within a width of 960px. Because all the contained elements on the page have the same width and will be centered, were going to assign the header div a class of container, which will be applied to any divs we want to be 960px wide and centered. The sites name / logo will be wrapped in h1 and a tags, and were going to markup the navigation as an unordered list of anchor tags. Because the first navigation element is selected, we'll add the class active so we add the background to that item only. view plaincopy to clipboardprint? 1. 2. 3. WebsiteName 4. 5. home 6. about us 7. portfolio 8. services 9. contact 10. 11. 12.

Step Two Slider ContentThe area with the welcome message and the featured content slider also has a stretching background, so it, too, will need two divs: one that stretches, anf one that contains and centers. The welcome message will be wrapped in h2 tags. Each of the arrow buttons will be anchor tags, one before the image and one after. For now were just going to insert the one image, but later were going to use a JQuery plugin to make the content change when the buttons are pressed. The image, "feature1.jpg", is just a slice taken right from the psd that includes the feature image as well as the background. view plaincopy to clipboardprint?

1. 2. 3. Here's Our Brand New Work! 4. Prev 5. 6. Next 7. 8.

Step Three FeaturesBeneath the slider, we have four columns describing features. This part, and the about section below, dont have a stretched background, because the off-white background is going to be set in the body rule. This whole section can therefore go inside one container div. Were going to give it an id of main-container, not because we need to, but just to keep things organized. The four columns are wrapped in a features div. Each column is wrapped in a div with the class feature, the names of each feature will be h3 headings, and each has a paragraph and an anchor link with the class more-link. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 24/7 Support 6. Lorem ipsum dolor sit port amet, consectetur adipiscing edit, sed do eiusmac 24/7 support 7. read more 8. 9. 10. 11. Pride Folio 12. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmos. Stunning portfolio! 13. read more 14. 15. 16. 17. Response Time 18. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo. We're always on time! 19. read more 20. 21. 22. 23. Best Quality 24. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmot. Case study. 25. read more 26. 27. 28. 29.

Step Four About SectionStill inside our main-container div, the about section is wrapped in an content-top div. Inside content-top, we have one div for the left column, called about, and one div for the right column, team. Within about we have the divs who and behind-logo. The headings for each of these sections are h4 headings. The quote in the behind-logo section is wrapped in blockquote tags. The team members area contains an unordered list of people, each containing an image, some paragraphs, and links to Twitter, LinkedIn, and Facebook. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. Who we are 6. Etiam lectus nulla, vestibulum vel luctus eu, ultricies sit amet arcu. In a sem a nibh fringilla blandit. Ut ut metus ut turpis ultricies ullamcorper a quis ante. Suspendisse et torto sed. 7. 8. 9. Behind the logo 10. Etiam lectus nulla, vestibulum vel luctus eu, ultricies sit amet arcu. In a sem a nibh fringilla blandit. Ut ut metus ut turpis ultricies ullamcorper. 11. "Minds was created only to think, but creation comes from the soul, that's why it's Created From The Soul" - Mahmoud 12. 13. 14. 15. Our Team 16. Etiam lectus nulla, vestibulum vel luctus eu, ultricies sit amet arcu. In a sem a nibh fringilla blandit.

17. 18. 19. 20. John Doe 21. Designer 22. Twitter 23. LinkedIn 24. Facebook 25. 26. 27. 28. John Doe 29. Designer 30. Twitter 31. LinkedIn 32. Facebook 33. 34. 35. 36. John Doe 37. Designer 38. Twitter 39. LinkedIn 40. Facebook 41. 42. 43. 44. John Doe 45. Designer 46. Twitter 47. LinkedIn 48. Facebook 49. 50. 51. 52. 53.

Step Five Twitter FeedThe twitter feed section goes inside a div called follow, and it contains a paragraph with the latest update in it, and the meta info about the tweet goes within small tags nested within the paragraph. After the paragraph, we have the four links to social media sites, each with a unique id and a class of social. view plaincopy to clipboardprint? 1. 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Incididunt ut labore et dolore magna aliqua About 10 hours ago. Web 3. 14. 15. 16. Testimonials 17. Some comments from our clients 18. 19. Mr. John Smith 20. Aug 17th 2009 21. Lorem ipsum dolor sit amet!! Creative! 22. 23. 24. Mrs. Jane Smith 25. Jan 12th 2010 26. Lorem ipsum dolor sit amet!! like your work. 27. 28. 29. John Doe 30. May 2nd 2010 31. Lorem ipsum dolor!! Highly recommended! 32. 33. 34. 35. 36. Latest Blog Posts 37. Here are the latest posts in our blog 38. 39. Blog Post Title Here 40. 01.5.2010 41. Lorem ipsum dolor sit amet!! It's simply a dummy text which would be replaced! 42. 43. 44. Another Blog Post 45. 20.12.2009 46. Lorem ipsum dolor sit amet!! It's simply a dummy text which would be replaced! 47. See More! 48. 49. 50. 51. 52.

Step Seven FooterFinally, we have the footer, which is just some copyright information and navigation links. Because the border between the bottom content area and the footer area stretches across the screen, the footer also needs a stretching div. Inside the footer, all we need is a paragraph for the copyright info, and an unordered list for the navigation. view plaincopy to clipboardprint? 1. 2. 3. Copyright 2010 - WebsiteName - All rights reserved 4. 5. Home 6. About Us 7. Portfolio 8. Services 9. Contact 10. 11. 12.

Final XHTML

After all that, our final markup structure looks like this: view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. WebsiteName home about us portfolio services contact Here's Our Brand New Work! Prev Next 24/7 Support Lorem ipsum dolor sit port amet, consectetur adipiscing edit, sed do eiusmac 24/7 support read more Pride Folio Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmos. Stunning portfolio! read more Response Time Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo. We're always on time! read more Best Quality Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmot. Case study. read more Who we are Etiam lectus nulla, vestibulum vel luctus eu, ultricies sit amet arcu. In a sem a nibh fringilla blandit. Ut ut metus ut turpis ultricies ullamcorper a quis ante. Suspendisse et torto sed.

69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139.

Behind the logo Etiam lectus nulla, vestibulum vel luctus eu, ultricies sit amet arcu. In a sem a nibh fringilla blandit. Ut ut metus ut turpis ultricies ullamcorper. "Minds was created only to think, but creation comes from the soul, that's why it's Created From The Soul" - Mahmoud Our Team Etiam lectus nulla, vestibulum vel luctus eu, ultricies sit amet arcu. In a sem a nibh fringilla blandit. John Doe Designer Twitter LinkedIn Facebook John Doe Designer Twitter LinkedIn Facebook John Doe Designer Twitter LinkedIn Facebook John Doe Designer Twitter LinkedIn Facebook Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Incididunt ut labore et dolore magna aliqua About 10 hours ago. Web id="twitter">Twitter id="linkedin">LinkedIn id="fb">Facebook id="flikr">Flikr

140. Testimonials 141. Some comments from our clients 142. 143. Mr. John Smith 144. Aug 17th 2009 145. Lorem ipsum dolor sit amet!! Creative! 146. 147. 148. Mrs. Jane Smith 149. Jan 12th 2010 150. Lorem ipsum dolor sit amet!! like your work. 151. 152. 153. John Doe 154. May 2nd 2010 155. Lorem ipsum dolor!! Highly recommended! 156. 157. 158. 159. 160. Latest Blog Posts 161. Here are the latest posts in our blog 162. 163. Blog Post Title Here 164. 01.5.2010 165. Lorem ipsum dolor sit amet!! It's simply a dummy text which would be replaced! 166. 167. 168. Another Blog Post 169. 20.12.2009 170. Lorem ipsum dolor sit amet!! It's simply a dummy text which would be replaced! 171. See More! 172. 173. 174. 175. 176. 177. 178. 179. 180. Copyright 2010 - WebsiteName - All rights reserved 181. 182. Home 183. About Us 184. Portfolio 185. Services 186. Contact 187. 188. 189. 190. 191. If we take a look in the browser, we see that the whole thing is logical and makes perfect sense without any styling.

Part Two CSSInstead of going straight to the psd slicing part, were going to go about this one section at a time, slicing out images as we need them. Though this isnt the workflow I usually use, it will allow me to better explain why each image is sliced as it is, and how to apply the techniques to your own designs.

Step One Setup and ResetAfter linking to an external stylesheet, style.css, the first thing we have to do is reset browser default styles for margins, padding, etc. Im using a slightly simplified version of Eric Meyers reset.css, but you can make your own if you prefer. view plaincopy to clipboardprint? 1. 2. 3. 4. 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,

5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

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: baselinebaseline; background: transparent; }

Next we need to define some basic styling for the body, including the font, which is primarily Arial, and the background colour, which is a sort of off-white view plaincopy to clipboardprint? 1. body {background: #e8e8e8; font-family: Arial, verdana, sans-serif;} Before we get started on the header, let's just define our container class, setting the width to 960px, and the margin to 0 and auto, so that it is centered on the page. view plaincopy to clipboardprint? 1. .container {margin: 0 auto; width: 960px;}

Step Two HeaderBackground Alright, time to open up that PSD file. For the header, we need four images: the background, the logo, and two for the navigation button. Let's start out with making a long, skinny slice with the Slice Tool (C) of the dark gradient background. Save this image by selecting File / Save for web and devices and select JPEG High under the preset menu. Name the image header-slice.jpg.

Lets add this image into our CSS file as the background for header-stretch. Because the detailed part of the gradient is at the bottom, were going to set the position to bottom, and pick out the background colour from the top of the gradient, so if the font is re-sized, well see more of the colour at the top of the gradient. view plaincopy to clipboardprint? 1. #header-stretch {background: #161616 url(images/header-slice.jpg) repeat-x top;} Logo Next we need the logo. In a perfect Internet, we would hide the background and save the logo as a transparent png, but since our friend Internet Explorer 6 doesnt play nice with pngs, were going to avoid transparency for this particular site. This means we need to be extra careful with positioning, so that gradients match up between the background of the header and the logo. Using the guides to help you, slice

out the logo. Save as an optimized JPEG, and name it logo.jpg

Were going to use a text-replacement technique to add our logo, setting the image as the background, and setting the text indent value to -9999px, so that the original text is sent way off the screen. When you use this technique, its important to set height and width dimensions for the element or the entire image wont show. Were going to set the logo as the background for the anchor tag, not the h1, which ensures that the image remains clickable.

Tip: If youre on a mac running Leopard or higher, go to your image folder for the site, right click on the background, and select show view options and then check show item info. This will display the dimensions of the image below the thumbnail. Very useful!To get the logo to stick to the left side of the header, set h1 style to float: left. view plaincopy to clipboardprint? 1. #header h1 a { 2. background: url(images/logo.jpg) no-repeat; 3. float: left; 4. height: 21px; 5. margin-top: 40px; 6. text-indent: -9999px; 7. width: 199px; 8. } Navigation First off, to get the navigation out to the right side of the header, set the ul to float:right. When we do this, we get a big mess. The content from below the header sneaks up between the logo and navigation menu, and we lose our background. The fix for this is simple, add overflow:hidden to the containing element (#header), which forces the rest of the content after the header return to the normal layout of the page and behave like normal. While were at it, we may as well add some padding to the bottom of the header. Well also give the list a top margin of 30px, and set the list-style to none. Next, we need to get our navigation to display horizontally, by setting the list items to float:left. Lets add in a margin of 10px to the left of each list item, and fix the font styling for the links. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. #header { overflow: hidden; padding-bottom: 30px; } #header ul { float: rightright; list-style: none; margin-top: 30px; } #header ul li { float: left; margin-left: 10px; } #header ul li a { color: #fff; text-decoration: none; font-size: 20px; }

To style the active button, were going to use a technique called the sliding doors of CSS, first described by Douglas Bowman in this article on A List Apart. Basically, since the links are all different lengths, we

cant just use one background image for all the links, because some would be too long to fit on the button. To fix this, we slice out an image of the left part of the button, but stretched out a bit longer than we really need, and we assign this image to the background of the list item with the class active. Next, we slice out just the rightmost edge of the button, and assign it to the background of the anchor tag of the active list item. I know this sounds confusing, but just follow along closely. In Photoshop, hide the text layer of the navigation, so you can only see the button over the black background. Next, select the hover shape layer so you can see the path. Using the direct selection tool (A), select the anchors along the right side of the button.

Next, drag these anchor points to the right until the button is long enough to accommodate the longest link title.

With the slice tool (C), take a long slice of the left side, and a small slice of the right, like in the screenshots:

Save both slices as JPEGS, and name them nav-left.jpg and nav-right.jpg. Next, we assign the images to the backgrounds of the active list item and anchor tag. view plaincopy to clipboardprint? 1. #header ul li.active {background: url(images/nav-left.jpg) no-repeat left;} 2. 3. #header ul li.active a {background: url(images/nav-rightright.jpg) no-repeat rightright;} 4. Its hard to see the two images here, because we need to add some padding to let the images spread out. This part can be a big fiddly, I usually have to try a couple values for padding on the list items and anchors before I get it looking right, but the image on the left generally will have more left padding, and the same goes for the right padding of the right image. These are the values I came up with: view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. #header ul li { float: left; margin-left: 10px; padding: 10px 0 10px 12px; } #header ul li a { color: #fff; text-decoration: none; font-size: 20px; padding: 10px 14px 10px 2px; }

Which gives us something like this:

And thats it, were done the header! Here's the css for the full header: view plaincopy to clipboardprint? 1. #header-stretch {background: #161616 url(images/header-slice.jpg) repeat-x top;} 2. 3. #header {overflow: hidden; padding-bottom: 30px;} 4. 5. #header h1 a { 6. background: url(images/logo.jpg) no-repeat; 7. float: left; 8. height: 21px;

9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35.

}

margin-top: 40px; text-indent: -9999px; width: 199px;

#header ul { float: rightright; list-style: none; margin-top: 30px; } #header ul li { float: left; margin-left: 10px; padding: 10px 0 10px 12px; } #header ul li a { color: #fff; text-decoration: none; font-size: 20px; padding: 10px 14px 10px 2px; } #header ul li.active {background: url(images/nav-left.jpg) no-repeat left;} #header ul li.active a {background: url(images/nav-rightright.jpg) no-repeat rightright;}

Step Three SliderLets start out with the gradient background just grab a thin slice that goes from the top to the bottom of the section and save as a high-quality JPEG.

view plaincopy to clipboardprint? 1. #slider-stretch {background:#66923e url(images/slider-slice.jpg) repeat-x;} Since the text for this area is in a non-websafe font, we need to slice it out and add it as a background image, using text replacement like we did with the logo. Again, when we have text over a gradient or otherwise vareid background, ideally wed like to save it as a PNG. Feel free to disagree, but Im thinking that Ill still try to avoid alpha transparency until the IE6 market share drops below 5%. Since were going to be saving the text as a JPEG with the background included, we just have to be really careful to line up the gradients. Slice out the text, using the guides for help, and save for the web as welcome.jpg.

Next, add in the image using the same text replacement as before. Set the height and width to the dimensions of your image, which may not be exactly the same as mine. view plaincopy to clipboardprint? 1. #slider h2 { 2. background: url(images/welcome.png) no-repeat; 3. text-indent: -9999px; 4. height: 77px; 5. width: 521px; 6. } Before clearing the slice around the h2 text, grab the ruler tool (I), and measure the distance from the left side of the container to the left side of the slice, and from the top of the slider background. Add the left width value as the left-margin for the h2 element, and add the top distance value as the padding-top on the slider element nd the gradient backgrounds should line up.

view plaincopy to clipboardprint? 1. #slider {padding-top: 53px;} 2. 3. #slider h2 { 4. background: url(images/welcome.png) no-repeat; 5. text-indent: -9999px; 6. height: 77px; 7. width: 521px; 8. margin-left: 115px; 9. } 10. Next we need to position our feature image properly. In the PSD, with h2 slice still showing, measure the distance from the left side of the container to the image, and from the bottom of the text slice to the top of the image. Add these values as the top and left margins of the image.

view plaincopy to clipboardprint? 1. #slider img {margin: 41px 0 0 70px;} Now that thats all lined up, we need to deal with the previous/next buttons. Again, it would be nice if these were PNGs, but were going to absolutely position them, so we can control exactly where they are, and make sure the background lines up. CSS Sprites Because this design has so many images, it is a perfect situation to use some CSS sprites. Sprites reduce load time and file size by combining multiple smaller images into one larger image, and then displaying only part of the image at a time using background-position. Chris Coyler over at CSS-Tricks wrote a great introduction to sprites, and made a screencast on how to use them . In this case, were going to use a sprite to combine the left and right arrow buttons into a single image. These two images are perfect for turning into sprites because they have identical dimensions, and we will be able to specify height and width. First, slice out the left and right arrows, and make sure both slices are the same size. Zoom in close so you can make sure the slices are close to the edges of the circle. If you hold down option and click the sliced area, you can copy it and drag it over to the other side, to make sure both slices are the same size. Save for the web as JPEGS.

Next, open up the right arrow image you just sliced out in Photoshop, and go to Image/Canvas Size and set the height to double its original size, and anchor to the top. Next, open up the left arrow file, and drag it into the right arrow file and place it directly below. Save this file for the web and call it slider-arrows.jpg.

Set the height and width values for both anchor tags in the same rule, and set the text indent to -9999px. In order to set the width and height, we also need to set the display to block. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. #slider a { display: block; height: 46px; width: 46px; text-indent: -9999px;

Were going to absolutely position the arrows, and to do that we need to decide which element theyre going to be positioned inside. Were going to define the positions of the buttons relative to the slider div, so we need to set position:relative to it. Next, set the background image for the left arrow. Since the left arrow is at the top of slider-arrow.jpg image, we need to set the position of the background to 0 0. For the right arrow, use the same background image, but since the right arrow is 46px from the top of the image, set the background position to 0 -46x; view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. #slider {padding-top: 53px; position: relative;} #slider a#left-arrow { background: url(images/slider-arrows.jpg) no-repeat 0 0px; } #slider a#right-arrow { background: url(images/slider-arrows.jpg) no-repeat 0 -46px; }

Next, set the position to absolute for both arrows, and then measure the distance in the PSD from the top of one of the arrows to the top of the slider area. Add this value as the top position for both buttons, and then set the left position of the left arrow to 0, and the right position for the right arrow to 0. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. #slider a#left-arrow { background: url(images/slider-arrows.jpg) no-repeat 0 0px; position: absolute; left: 0; top: 122px; } #slider a#right-arrow { background: url(images/slider-arrows.jpg) no-repeat 0 -46px; position: absolute; rightright: 0; top: 122px; }

And there you have it, our slider area is coded up in XHTML. Were not going to make it slide today, but it it still looks okay like this. Here's the CSS for the section: view plaincopy to clipboardprint? 1. #slider-stretch {background:#66923e url(images/slider-slice.jpg) repeat-x;} 2. 3. #slider {padding-top: 53px; position: relative;} 4. 5. #slider h2 { 6. background: url(images/welcome.png) no-repeat;

7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34.

}

text-indent: -9999px; height: 77px; width: 521px; margin-left: 115px;

#slider img {margin: 41px 0 0 70px;} #slider a { display: block; height: 46px; width: 46px; text-indent: -9999px; } #slider a#left-arrow { background: url(images/slider-arrows.jpg) no-repeat 0 0px; position: absolute; left: 0; top: 122px; } #slider a#right-arrow { background: url(images/slider-arrows.jpg) no-repeat 0 -46px; position: absolute; rightright: 0; top: 122px; }

Step Four FeaturesLets look at the whole feature section at once: though it doesnt have a repeating background, it does have that little shadow effect at the bottom, which were going to add as the background image of the features div. Slice out the shadow, and the background at the sides, so that the image is the full 960px wide.

Next, add it into the code, and remember to set the background position to bottom. Since theres 50px of whitespace from the bottom of the slider to the top of the features, add a margin-top of 50px. Since were going to be floating our four columns side by side, well also need to set overflow:hidden. To get the shadow down to the very bottom, add about 80px of padding to the bottom of the div. view plaincopy to clipboardprint? 1. #features { 2. background: url(images/shadow.jpg) no-repeat bottombottom; 3. margin-top: 50px; 4. overflow: hidden;

5. padding-bottom: 80px; 6. } Next, let's set some general styles for each of the columns, by targeting the feature class. Each column is 240px wide, but 30px on each side of the columns is padding; so let's set the width of the columns to 280px, and set the padding to 30px for left and right. To get them side-by-side, also add float:left. view plaincopy to clipboardprint? 1. .feature { 2. width: 180px; 3. padding: 0px 30px 0 30px; 4. float: left; 5. } Its always a good idea to check frequently in other browsers to make sure everything looks okay. Mostly Im talking about IE6, because most of the time when you get something looking good in IE6, every other browser should be good too. Up until this point, everything looks just fine in IE6, but now we have a problem. Take a look:

Not only is our shadow stuck in the middle of the div, but the headline from the next section is wrapping around the end. This is one of those weird bugs, Im no expert at IE6 bugs, but if Im not sure whats causing the problem, I always try adding display:inline or display:inline-block. Youd be amazed how often display:inline-block can solve your IE6 problems, and this is just one of those cases. view plaincopy to clipboardprint? 1. #features { 2. background: url(images/shadow.jpg) no-repeat bottombottom; 3. margin-top: 50px; 4. overflow: hidden; 5. padding-bottom: 80px; 6. display: inline-block; 7. } Styling the Columns First, let's work on the type styles for the columns, which we can pretty much just copy over from Photoshop. For the headlines, we need to do some more text replacement. Let's slice out images for the header text, and give each image a unique name. Set the appropriate background images for each h3, and repeat the text replacement process (text indent, defining height and width) for each column.

view plaincopy to clipboardprint? 1. .feature h3 { 2. text-indent: -9999px;

3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21.

}

margin-bottom: 20px; height: 27px;

.feature p { line-height: 1.3; font-size: 14px; height: 100px; padding-bottom: 20px; } #support h3 {background: url(images/24-7.jpg) no-repeat;} #portfolio h3 {background: url(images/pride.jpg) no-repeat;} #time h3 {background: url(images/time.jpg) no-repeat;} #quality h3 {background: url(images/quality.jpg) no-repeat;}

For the link buttons, were going to use the same text replacement technique, we just need to slice out one of the buttons, and name it read-more.jpg. Because anchors are inline elements, we need to add display:block, and to center the buttons, add an automatic margin to the sides.

view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. .feature a { background: url(images/read-more.jpg) no-repeat; text-indent: -1200px; height: 29px; width: 99px; margin: 0 auto; display: block;

Unfortunately, the text comes out a bit different on the webpage than in Photoshop, so not all of the column text is the same length, and our buttons dont line up. There are other ways to deal with this, but for now Im just going to add a height of 100px to the paragraph text. Lastly, we need to add the icons to the top of each column. To leave room for the icons, we need to add padding to the top of each feature column, and set the icons as background images. Grab the original icons from Pixel Mixer, and use the 6464px icons. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. .feature { width: 180px; padding: 80px 30px 0 30px; float: left; } #support {background: url(images/help.png) no-repeat top; border-left: none;} #portfolio {background: url(images/briefcase.png) no-repeat top;} #time {background: url(images/clock.png) no-repeat top;} #quality {background: url(images/graph.png) no-repeat top; border-right: none;}

The last step here is to add the borders between the columns. Since we dont want borders on the left of the first column, or the right of the last column, so we need to specify that. We will also have to alter the width of the columns to account for the extra width of the borders view plaincopy to clipboardprint? 1. .feature { 2. width: 178px; 3. padding: 80px 30px 0 30px; 4. float: left; 5. border-right: 1px solid #fff; 6. border-left: 1px solid #b3b3b3; 7. } 8.

And here's the full css for the features section: view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. #features { background: url(images/shadow.jpg) no-repeat bottombottom; margin-top: 50px; overflow: hidden; padding-bottom: 80px; display: inline-block; } .feature { width: 178px; padding: 80px 30px 0 30px; float: left; border-right: 1px solid #fff; border-left: 1px solid #b3b3b3; } .feature h3 { text-indent: -9999px; margin-bottom: 20px; height: 27px; } .feature p { line-height: 1.3; font-size: 14px; height: 100px; padding-bottom: 20px; } .feature a {

32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54.

}

background: url(images/read-more.jpg) no-repeat; text-indent: -1200px; height: 29px; width: 99px; margin: 0 auto; display: block;

#support {background: url(images/help.png) no-repeat top; border-left: none;} #portfolio {background: url(images/briefcase.png) no-repeat top;} #time {background: url(images/clock.png) no-repeat top;} #quality {background: url(images/graph.png) no-repeat top; border-right: none;} #support h3 {background: url(images/24-7.jpg) no-repeat;} #portfolio h3 {background: url(images/pride.jpg) no-repeat;} #time h3 {background: url(images/time.jpg) no-repeat;} #quality h3 {background: url(images/quality.jpg) no-repeat;}

Step Four Top Content SectionThe content-top section starts about 20px beneath the shadow from the feature section, so let's add that in the margin at the top of the div. Were going to need to float the columns to get them side-by-side, so the top-content div also needs the overflow:hidden rule. view plaincopy to clipboardprint? 1. #content-top {margin-top: 20px; overflow: hidden;} Next, we can add all the typography styles for the section, including the image replacement for all the headings, so just slice out the headings for this section just like you did in the features section. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. #content-top p {font-size: 14px; line-height: 1.3;} #content-top h4 { text-indent: -9999px; padding-bottom: 15px; } #who h4 { background: url(images/who.jpg) no-repeat; width: 163px; height: 22px; } #behind-logo h4 { background: url(images/behindlogo.jpg) no-repeat; width: 216px; height: 27px; } #team h4 { background: url(images/team.jpg) no-repeat; height: 22px; width: 135px; }

For the blockquote section, we need the background image of the large quotation mark, then we need to add padding to the left to leave room for it. We also need a bit of padding at the top and bottom, to give the background image space to spread out.

view plaincopy to clipboardprint? 1. #behind-logo blockquote { 2. background: url(images/quotes.jpg) no-repeat; 3. color: #6e9637; 4. padding: 8px 0 16px 60px; 5. margin-top: 16px; 6. line-height: 1.3; 7. font-size: 14px; 8. font-style: italic; 9. } Next we need to get the layout working. The about section is 470px wide, with 30px of whitespace to the right. Since were going to be adding a 1px border to the edge of the column, we need to set this 30px as padding instead of as a margin, and will need to subtract this padding from the width of the column. We also need to set it to float:left, and add the border. While were at it, we can also add some space between the two divs in the about section. view plaincopy to clipboardprint? 1. #about { 2. float: left; 3. width: 440px; 4. padding-right: 30px; 5. border-right: 1px solid #b3b3b3; 6. } 7. 8. #who {padding-bottom: 22px;} Now to clean up the team section. This section is 480px wide, with 35px of padding on the left. Since were going to have to float the team bios to get them in a line, we need to set the overflow to hidden on the team div. view plaincopy to clipboardprint? 1. #team { 2. float: left; 3. width: 445px; 4. padding-left: 35px; 5. display: inline; 6. overflow: hidden; 7. border-left: 1px solid #fff; 8. } Lets clean up the list of team members; the list itself needs a margin at the top, and we need to get rid of the list-style. We need to set each list item to float: left, and need to define the width of each section. The images are each 91px wide, and have about 26px of space between them. view plaincopy to clipboardprint? 1. #team ul {list-style: none; margin-top: 20px;} 2.

3. #team ul li { 4. float: left; 5. width: 91px; 6. margin-right: 26px; 7. } 8. Since each item has the 26px of padding to the right, this padding will be excess on the last item, and will cause the last bio to be pushed down underneath. If all browsers worked the way they should, we could just say li:last-child {margin:0}, however, IE6 doesnt support the last-child pseudo-selector, so its not that easy. In this situation, were just going to add the class last to the last list item. However, when Im coding up a site that already uses javascript, and where the content might be dynamic, Id add in the class using javascript instead of putting it in the code. One of the team members seems to be featured, so Ive added the class featured to the list item, and changed the text colour for that item. Were also going to add a small margin to the bottom of each image. view plaincopy to clipboardprint? 1. #team ul li.last {margin-right: 0;} 2. 3. #team li.featured {color: #6e9637;} 4. 5. #team img {margin-bottom: 7px;} More Sprites For the three social media link icons, were going to use some sprites again. This sprite is going to be a bit more complicated, because we have a total of 6 images. Ive decided that when hovered over, the links in the non-featured list items will become coloured like the one in the featured column. Slice each icon from the PSD, both the grey ones and the coloured ones.

Next, find out which of the images is widest, and make a note of the width. For me, the widest icon (LinkedIn), is 24px wide, so Im going to create a new document with a width of 324px. For the height of the new document, simply double the height of your images (they should all be the same height). My new image has the dimensions 72px by 50px. Set the background colour to the background colour of the design. Next were going to set up some guides: one horizontal guide halfway down the image, and then two vertical guides, dividing the image in 3.

Next, drag in the six images you just sliced out, and align them to the guides like so:

Save for the web, and name it team-sprite.jpg. Now comes the tough part: adding in the code for the sprites. Lets start by defining some styles for all of the links. Were using image-replacement again for the text. Since we need to define height and width, we need to set display to block, but since we want them side-by-side, we need to set them float:left. view plaincopy to clipboardprint? 1. #team li a { 2. text-indent: -9999px; 3. display: block; 4. float: left; 5. margin-right: 8px; 6. margin-top: 8px; 7. } 8. let's do the twitter icon first, because its the easiest. Just set the background image to the sprite, and set background position to 0 0 and set the height and width. view plaincopy to clipboardprint? 1. #team a.twitter { 2. background: url(images/contact-sprite.jpg) no-repeat 0 0; 3. height: 25px; 4. width: 16px; 5. } Next, lets do the linkedin link, with the same background image, but this time, we set the background position to -24px 0, because the linkedin image is 24px from the left edge of the entire image. Repeat the proces for the facebook link, but this time set the background position to -48px 0. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. #team a.linkedin { background: url(images/contact-sprite.jpg) no-repeat -24px 0; height: 25px; width: 24px; } #team a.fb { background: url(images/contact-sprite.jpg) no-repeat -48px 0; height: 25px; width: 16px; }

To set the featured column links to display the coloured images, and to do the same for hover states on the other columns, we only need to change the background position for the y-axis to -25px. view plaincopy to clipboardprint? 1. #team li.featured a.twitter, #team a.twitter:hover {background-position: 0 -25px;} 2. 3. #team li.featured a.linkedin, #team a.linkedin:hover {background-position: -24px -25px;} 4. 5. #team li.featured a.fb, #team a.fb:hover {background-position: -48px -25px;} Alright, thats it, were done the content-top section!

Here's what we've got for this section: view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. #content-top {margin-top: 20px; overflow: hidden;} #content-top p {font-size: 14px; line-height: 1.3;} #content-top h4 { text-indent: -9999px; padding-bottom: 15px; } #about { float: left; width: 440px; padding-right: 30px; border-right: 1px solid #b3b3b3; } #who {padding-bottom: 22px;} #who h4 { background: url(images/who.jpg) no-repeat; width: 163px; height: 22px; } #behind-logo h4 { background: url(images/behindlogo.jpg) no-repeat; width: 216px; height: 27px; } #behind-logo blockquote { background: url(images/quotes.jpg) no-repeat; color: #6e9637; padding: 8px 0 16px 60px; margin-top: 16px; line-height: 1.3; font-size: 14px; font-style: italic; } #team { float: left; width: 445px; padding-left: 35px; display: inline; overflow: hidden; border-left: 1px solid #fff; }

49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100.

#team h4 { background: url(images/team.jpg) no-repeat; height: 22px; width: 135px; } #team ul {list-style: none; margin-top: 20px;} #team ul li { float: left; width: 91px; margin-right: 26px; } #team ul li.last {margin-right: 0;} #team li.featured {color: #6e9637;} #team img {margin-bottom: 7px;} #team li a { text-indent: -9999px; display: block; float: left; margin-right: 8px; margin-top: 8px; } #team a.twitter { background: url(images/contact-sprite.jpg) no-repeat 0 0; height: 25px; width: 16px; } #team a.linkedin { background: url(images/contact-sprite.jpg) no-repeat -24px 0; height: 25px; width: 24px; } #team a.fb { background: url(images/contact-sprite.jpg) no-repeat -48px 0; height: 25px; width: 16px; } #team li.featured a.twitter, #team a.twitter:hover {background-position: 0 -25px;} #team li.featured a.linkedin, #team a.linkedin:hover {background-position: -24px -25px;} #team li.featured a.fb, #team a.fb:hover {background-position: -48px -25px;}

Step Five Twitter FeedYou might notice that we still have some text-wrapping in IE6, but this is easily fixed by adding clear:both to the follow div. We also need to add the 40px margin at the top. view plaincopy to clipboardprint? 1. #follow { 2. clear: both; 3. margin-top: 40px; Now we need to slice out the images for the twitter feed area. First, we need a slice of the background. Notice how the four social media link icons are slightly higher than the top of the green background of the section. This can cause a bit of a problem for absolute positioning, because the tops of the icons will be cut off. To fix this, we just need to expand the background up a bit, which means creating a slice that goes up as high as the tops of the icons.

view plaincopy to clipboardprint? 1. #follow { 2. background: url(images/follow-slice.jpg) repeat-x top; 3. clear: both; 4. margin-top: 40px; 5. } 6. Next we need to style the paragraph within it. Were going to use the paragraph to add in the little twitter icon at the left side, which we need to slice out. Save this image as twitter-bg.jpg. Now we add padding to the top, bottom and left, as well as 320px of padding to the right to restrict the width of the paragraph. For some reason, in IE6 the paragraph gets bumped down out of position, but this is fixed easily by setting display:inline-block. Well also add some styles to the small tag inside the paragraph.

view plaincopy to clipboardprint? 1. #follow p { 2. background: url(images/twitter-bg.jpg) no-repeat ; 3. padding: 30px 320px 20px 85px; 4. font-size: 15px; 5. display: inline-block; 6. } 7. 8. #follow p small {

9. color: #fff; 10. font-style: italic; 11. padding-left: 10px; 12. font-size: 15px; 13. } 14. 15. #follow p a {color: #fff;} For the social media links, were going to use another sprite! This one is a little less complicated than the last one, because theyre all in one row, and theres only 4 images. After slicing out each icon, I have 4 images with a width of 56px and height of 54px. Lets create a new document then with the dimensions 456px = 224px by 54px, and place guides every 56px. Then simply line up the icons along the guides, and save it as social-sprite.jpg.

Style all of links with the social class just as we have all other text-replacing images, since the links will be absolutely positioned relative to the follow div, add position:relative to follow. Now set position: absolute for the links, and since theyre all aligned with the top of the div, you can add top:0 too. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. #follow { background: url(images/follow-slice.jpg) repeat-x top; clear: both; margin-top: 40px; position: relative; } #follow a.social { display: block; position: absolute; height: 54px; width: 56px; text-indent: -9999px; top:0; }

Starting with the right-most link (flikr) we can now add the background images in using the same technique we used with the social media links in the team section. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. #follow a#flikr { background: url(images/social-sprite.jpg) no-repeat; background-position: -168px 0; } #follow a#fb { background: url(images/social-sprite.jpg) no-repeat; background-position: -112px 0; } #follow a#linkedin { background: url(images/social-sprite.jpg) no-repeat; background-position: -56px 0; } #follow a#twitter { background: url(images/social-sprite.jpg) no-repeat; background-position: 0 0; }

Next we need to position the links relative to the follow div. The linkedin link will have a right value of 30px, because it is 40px from the edge of the div. Next, all you need to do is measure the distance from each icon to the edge of the div, and add that value as the right value of the link. view plaincopy to clipboardprint?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.

#follow a#flikr { rightright: 40px; background: url(images/social-sprite.jpg) no-repeat; background-position: -168px 0; } #follow a#fb { rightright: 100px; background: url(images/social-sprite.jpg) no-repeat; background-position: -112px 0; } #follow a#linkedin { rightright: 166px; background: url(images/social-sprite.jpg) no-repeat; background-position: -56px 0; } #follow a#twitter { rightright: 235px; background: url(images/social-sprite.jpg) no-repeat; background-position: 0 0; }

And thats it, were done the twitter feed section!

Step Six Bottom ContentFirst thing we need to do here is slice out the background for the content-bottom-stretch div. Since the gradient of the bottom content area fades into a solid colour pretty quickly, we only need to slice the top bit until the solid colour starts, and then we just add the solid colour to the background rule in our css. The bottom content area is 50px below the twitter feed, so add a margin-top of 50px. Theres also 50px of padding at the top, and 30px padding at the bottom. We also need to add the border to the bottom of the section. view plaincopy to clipboardprint? 1. #content-bottombottom-stretch { 2. background: #202020 url(images/bottombottom-slice.jpg) repeat-x; 3. border-bottom: 1px solid #181818; 4. margin-top: 50px; 5. padding: 50px 0 30px 0; 6. }

Since were going to be floating the three columns, we need to add overflow:hidden to content-bottom. Next lets replace the text of the headings in the footer just as weve been doing all along. view plaincopy to clipboardprint? 1. #content-bottombottom {overflow: hidden;} 2. 3. #content-bottombottom h4 { 4. height: 29px;

5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22.

}

text-indent: -9999px; margin-bottom: 5px;

#contact h4 { background: url(images/talk.jpg) no-repeat; width: 160px; } #testimonials h4 { background: url(images/testimonials.jpg) no-repeat; width: 173px; } #blog h4 { background: url(images/latest-blog.jpg) no-repeat; width: 231px; }

Next, lets style the h5 headings. They have a border right under them, and while we could do this with CSS borders, its going to be much simpler to just grab a tiny image and set it as the background for the h5. Zoom in really close and grab a tiny slice of the border, and save it as a GIF called border.gif.

view plaincopy to clipboardprint? 1. #content-bottombottom h5 { 2. font-size: 15px; 3. font-weight: normal; 4. margin-bottom: 15px; 5. color: #d3d3d3; 6. padding-bottom: 20px; 7. background: url(images/border.gif) repeat-x bottombottom; 8. } Next, lets style the text for the testimonial and blog sections: view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. #testimonials h6 { font-size: 14px; margin-bottom: 10px; color: #d3d3d3; } #testimonials p { color: #d3d3d3; font-size: 14px; margin-bottom: 10px; } #testimonials blockquote { color: #7ea547; font-size: 14px; }

17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34.

#blog h6 { font-size: 15px; color: #7ea547; margin-bottom: 7px; } #blog p { font-size: 14px; line-height: 1.3; color: #fff; } #blog p.date { padding-bottom: 10px; }

Next we need to get the layout working properly. Add the width and margin values to each section based on the PSD, and set each to float:left. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. #contact { width: 280px; float: left; margin-right: 60px; } #testimonials { width: 280px; margin-right: 30px; float: left; } #blog { width: 280px; float: left; }

Lets just clean up each column a bit. For the contact column, we need to cut out background images for the text input, the textarea, and the submit button. Save them as JPEGs and name them textinput.jpg, textarea.jpg, and send.jpg.

Now we need to add these images as the backgrounds for the inputs with the class text and for the textareas. Well need to define height and with, as well as adding some padding to the sides and top of each element. We also need to make sure to get rid of the default browser borders. For the submit button, we need to use image replacement again. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. #contact input.text { background: url(images/textinput.jpg) no-repeat; border: none; margin-bottom: 10px; width: 205px; height: 25px; color: #7ea547; font-size: 15px; padding-left: 5px; } #contact textarea { background: url(images/textarea.jpg) no-repeat; width: 200px; height: 106px; margin-bottom: 20px; border: none; color: #7ea547; font-size: 15px; padding: 5px; } #contact a.send { background: url(images/send.jpg) no-repeat; height: 29px; width: 99px; display: block; text-indent: -9999px; }

For the testimonials, all we need to do is add some space between each testimonial

view plaincopy to clipboardprint? 1. .testimonial { 2. margin-bottom: 20px; 3. } For the blog section, we just need some space between each post, and we need to cut out the button, and replace the link text with it. view plaincopy to clipboardprint? 1. .post {padding-bottom: 15px;} 2. 3. #blog a { 4. background: url(images/see-more.jpg) no-repeat; 5. height: 29px; 6. width: 99px; 7. display: block; 8. margin-top: 20px; 9. float: rightright; 10. text-indent: -9999px; 11. } 12. 13. And thats it, were done with content-bottom!

Step Seven FooterWere almost there! The footer is the easiest part, set the background as the same colour as the content-bottom area, and add the one pixel border to the top. view plaincopy to clipboardprint? 1. #footer-stretch { 2. background: #202020; 3. border-top: 1px solid #2f2f2f; 4. } Next, we just need to worry about a bit of padding and font styles. We also need to add overflow:hidden because were going to be floating the paragraph to the left and the list to the right. view plaincopy to clipboardprint? 1. #footer p a {color: #7ea547; text-decoration: none;} 2. 3. #footer ul li a { 4. color: #fff; 5. text-decoration: none; 6. } Next were just going to set the floats, and also set the list items to float to the left to display the navigation in a line. view plaincopy to clipboardprint?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.

#footer p { float: left; } #footer ul { float: rightright; list-style: none; } #footer ul li { float: left; padding-left: 5px; }

And I cant believe were done! It took a while but it was worth it: our webpage looks nearly identical to the PSD, and looks good across browsers, even IE6! Take a look:

Here's the full CSS code for this tutorial:

view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 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: baselinebaseline; background: transparent; } body {background: #e8e8e8; font-family: Arial, Helvetica, sans-serif;} .container {margin: 0 auto; width: 960px;} /* Header Styles */ #header-stretch {background: #161616 url(images/header-slice.jpg) repeat-x top;} #header {overflow: hidden; padding-bottom: 30px;} #header h1 a { background: url(images/logo.jpg) no-repeat; float: left; height: 21px; margin-top: 40px; text-indent: -9999px; width: 199px; } #header ul { float: rightright; list-style: none; margin-top: 30px; } #header ul li { float: left; margin-left: 10px; padding: 10px 0 10px 12px; } #header ul li a { color: #fff; text-decoration: none; font-size: 20px; padding: 10px 14px 10px 2px; } #header ul li.active {background: url(images/nav-left.jpg) no-repeat left;} #header ul li.active a {background: url(images/nav-rightright.jpg) no-repeat rightright;} /* Slider Styles */ #slider-stretch {background:#66923e url(images/slider-slice.jpg) repeat-x;} #slider {padding-top: 53px; position: relative;} #slider h2 { background: url(images/welcome.png) no-repeat; text-indent: -9999px; height: 77px;

71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142.

}

width: 521px; margin-left: 115px;

#slider img {margin: 41px 0 0 70px;} #slider a { display: block; height: 46px; width: 46px; text-indent: -9999px; } #slider a#left-arrow { background: url(images/slider-arrows.jpg) no-repeat 0 0px; position: absolute; left: 0; top: 122px; } #slider a#right-arrow { background: url(images/slider-arrows.jpg) no-repeat 0 -46px; position: absolute; rightright: 0; top: 122px; } /* Features Styles */ #features { background: url(images/shadow.jpg) no-repeat bottombottom; margin-top: 50px; overflow: hidden; padding-bottom: 80px; display: inline-block; } .feature { width: 178px; padding: 80px 30px 0 30px; float: left; border-right: 1px solid #fff; border-left: 1px solid #b3b3b3; } .feature h3 { text-indent: -9999px; margin-bottom: 20px; height: 27px; } .feature p { line-height: 1.3; font-size: 14px; height: 100px; padding-bottom: 20px; } .feature a { background: url(images/read-more.jpg) no-repeat; text-indent: -1200px; height: 29px; width: 99px; margin: 0 auto; display: block; } #support {background: url(images/help.png) no-repeat top; border-left: none;} #portfolio {background: url(images/briefcase.png) no-repeat top;} #time {background: url(images/clock.png) no-repeat top;}

143. 144. 145. 146. 147. 148. 149. 150. 151. 152. 153. 154. 155. 156. 157. 158. 159. 160. 161. 162. 163. 164. 165. 166. 167. 168. 169. 170. 171. 172. 173. 174. 175. 176. 177. 178. 179. 180. 181. 182. 183. 184. 185. 186. 187. 188. 189. 190. 191. 192. 193. 194. 195. 196. 197. 198. 199. 200. 201. 202. 203. 204. 205. 206. 207. 208. 209. 210. 211. 212. 213. 214.

#quality {background: url(images/graph.png) no-repeat top; border-right: none;} #support h3 {background: url(images/24-7.jpg) no-repeat;} #portfolio h3 {background: url(images/pride.jpg) no-repeat;} #time h3 {background: url(images/time.jpg) no-repeat;} #quality h3 {background: url(images/quality.jpg) no-repeat;} /* Content - Top Styles */ #content-top {margin-top: 20px; overflow: hidden;} #content-top p {font-size: 14px; line-height: 1.3;} #content-top h4 { text-indent: -9999px; padding-bottom: 15px; } #about { float: left; width: 440px; padding-right: 30px; border-right: 1px solid #b3b3b3; } #who {padding-bottom: 22px;} #who h4 { background: url(images/who.jpg) no-repeat; width: 163px; height: 22px; } #behind-logo h4 { background: url(images/behindlogo.jpg) no-repeat; width: 216px; height: 27px; } #behind-logo blockquote { background: url(images/quotes.jpg) no-repeat; color: #6e9637; padding: 8px 0 16px 60px; margin-top: 16px; line-height: 1.3; font-size: 14px; font-style: italic; } #team { float: left; width: 445px; padding-left: 35px; display: inline; overflow: hidden; border-left: 1px solid #fff; } #team h4 { background: url(images/team.jpg) no-repeat; height: 22px; width: 135px; } #team ul {list-style: none; margin-top: 20px;} #team ul li { float: left;

215. 216. 217. 218. 219. 220. 221. 222. 223. 224. 225. 226. 227. 228. 229. 230. 231. 232. 233. 234. 235. 236. 237. 238. 239. 240. 241. 242. 243. 244. 245. 246. 247. 248. 249. 250. 251. 252. 253. 254. 255. 256. 257. 258. 259. 260. 261. 262. 263. 264. 265. 266. 267. 268. 269. 270. 271. 272. 273. 274. 275. 276. 277. 278. 279. 280. 281. 282. 283. 284. 285. 286.

}

width: 91px; margin-right: 26px;

#team ul li.last {margin-right: 0;} #team li.featured {color: #6e9637;} #team img {margin-bottom: 7px;} #team li a { text-indent: -9999px; display: block; float: left; margin-right: 8px; margin-top: 8px; } #team a.twitter { background: url(images/contact-sprite.jpg) no-repeat 0 0; height: 25px; width: 16px; } #team a.linkedin { background: url(images/contact-sprite.jpg) no-repeat -24px 0; height: 25px; width: 24px; } #team a.fb { background: url(images/contact-sprite.jpg) no-repeat -48px 0; height: 25px; width: 16px; } #team li.featured a.twitter, #team a.twitter:hover {background-position: 0 -25px;} #team li.featured a.linkedin, #team a.linkedin:hover {background-position: -24px -25px;} #team li.featured a.fb, #team a.fb:hover {background-position: -48px -25px;} /* Follow Styles */ #follow { background: url(images/follow-slice.jpg) repeat-x top; clear: both; margin-top: 40px; position: relative; } #follow p { background: url(images/twitter-bg.jpg) no-repeat ; padding: 30px 320px 20px 85px; font-size: 15px; display: inline-block; } #follow p small { color: #fff; font-style: italic; padding-left: 10px; font-size: 15px; } #follow p a {color: #fff;} #follow a.social { display: block; position: absolute ; height: 54px; width: 56px;

287. 288. 289. 290. 291. 292. 293. 294. 295. 296. 297. 298. 299. 300. 301. 302. 303. 304. 305. 306. 307. 308. 309. 310. 311. 312. 313. 314. 315. 316. 317. 318. 319. 320. 321. 322. 323. 324. 325. 326. 327. 328. 329. 330. 331. 332. 333. 334. 335. 336. 337. 338. 339. 340. 341. 342. 343. 344. 345. 346. 347. 348. 349. 350. 351. 352. 353. 354. 355 . 356. 357. 358.

}

text-indent: -9999px; top:0;

#follow a#flikr { rightright: 40px; background: url(images/social-sprite.jpg) no-repeat; background-position: -168px 0; } #follow a#fb { rightright: 100px; background: url(images/social-sprite.jpg) no-repeat; background-position: -112px 0; } #follow a#linkedin { rightright: 166px; background: url(images/social-sprite.jpg) no-repeat; background-position: -56px 0; } #follow a#twitter { rightright: 235px; background: url(images/social-sprite.jpg) no-repeat; background-position: 0 0; } /* Content-bottom Styles */ #content-bottombottom-stretch { background: #202020 url(images/bottombottom-slice.jpg) repeat-x; border-bottom: 1px solid #181818; margin-top: 50px; padding: 50px 0 30px 0; } #content-bottombottom {overflow: hidden;} #content-bottombottom h4 { height: 29px; text-indent: -9999px; margin-bottom: 5px; } #content-bottombottom h5 { font-size: 15px; font-weight: normal; margin-bottom: 15px; color: #d3d3d3; padding-bottom: 20px; background: url(images/border.gif) repeat-x bottombottom; } #contact { width: 280px; float: left; margin-right: 60px; } #contact h4 { background: url(images/talk.jpg) no-repeat; width: 160px; } #contact input.text { background: url(images/textinput.jpg) no-repeat; border: none; margin-bottom: 10px; width: 205px; height: 25px; color: #7ea547;

359. 360. 361. 362. 363. 364. 365. 366. 367. 368. 369. 370. 371. 372. 373. 374. 375. 376. 377. 378. 379. 380. 381. 382. 383. 384. 385. 386. 387. 388. 389. 390. 391. 392. 393. 394. 395. 396. 397. 398. 399. 400. 401. 402. 403. 404. 405. 406. 407. 408. 409. 410. 411. 412. 413. 414. 415. 416. 417. 418. 419. 420. 421. 422. 423. 424. 425. 426. 427. 428. 429. 430.

}

font-size: 15px; padding-left: 5px;

#contact textarea { background: url(images/textarea.jpg) no-repeat; width: 200px; height: 106px; margin-bottom: 20px; border: none; color: #7ea547; font-size: 15px; padding: 5px; } #contact a.send { background: url(images/send.jpg) no-repeat; height: 29px; width: 99px; display: block; text-indent: -9999px; } #testimonials { width: 280px; margin-right: 30px; float: left; } #testimonials h4 { background: url(images/testimonials.jpg) no-repeat; width: 173px; } #testimonials h6 { font-size: 14px; margin-bottom: 10px; color: #d3d3d3; } #testimonials p { color: #d3d3d3; font-size: 14px; margin-bottom: 10px; } #testimonials blockquote { color: #7ea547; font-size: 14px; } .testimonial {margin-bottom: 20px;} #blog { width: 280px; float: left; } #blog h4 { background: url(images/latest-blog.jpg) no-repeat; width: 231px; } #blog h6 { font-size: 15px; color: #7ea547; margin-bottom: 7px; } #blog p { font-size: 14px; line-height: 1.3;

431. 432. 433. 434. 435. 436. 437. 438. 439. 440. 441. 442. 443. 444. 445. 446. 447. 448. 449. 450. 451. 452. 453. 454. 455. 456. 457. 458. 459. 460. 461. 462. 463. 464. 465. 466. 467. 468. 469. 470. 471. 472. 473. 474. 475. 476. 477. 478. 479. 480. 481. 482.

}

color: #fff;

#blog p.date {padding-bottom: 10px;} #blog a { background: url(images/see-more.jpg) no-repeat; height: 29px; width: 99px; display: block; margin-top: 20px; float: rightright; text-indent: -9999px; } .post {padding-bottom: 15px;} /* Footer Styles */ #footer-stretch { background: #202020; border-top: 1px solid #2f2f2f; } #footer { padding-top: 15px; font-size: 15px; padding-bottom: 15px; color: #fff; overflow: hidden; } #footer p a {color: #7ea547; text-decoration: none;} #footer ul li a { color: #fff; text-decoration: none; } #footer p { float: left; } #footer ul { float: rightright; list-style: none; } #footer ul li { float: left; padding-left: 5px; }

Missing Step - JQuery SliderSo I was originally planning to write another step about implementing a jQuery plugin to get the slider working, but the tutorial is really long enough as it is. I can however, offer some tips. Your best bet is to try the absurdly easy-to-use JQuery Cycle Plug-in. It's simple and has tons of options. For our purposes, check out the second demo on this demo page, see how easy it is to add previous and next links? If you're familiar with using JQuery plug-ins, you could get this working in a couple of minutes, but it does require a little bit of CSS tweaking. Good Luck!

ConclusionI hoped you've learned some useful techniques here that you can apply to your own designs. Invest some time checking out some of the articles I've linked to if you're new to things like sprites or sliding doors, because these are key CSS techniques that you'll find yourself using over and over. For a more in-depth explanations of some of the topics I've covered, check out these links: Chris Coyler examines image replacement in his post Nine Techniques for CSS Image Replacement Douglas Bowman's Original article on The Sliding Doors of CSS Smashing Magazine has a great intro to CSS Sprites with links to some great tutorials and articles For IE6 Bug-squishing, check out Siddarth's tutorial right here on Nettuts+ Nine Most Common IE Bugs and How to Fix them For general CSS and HTML techniques and resources, A List Apart and Chris Coyler's CSS-Tricks are endlessly useful resources. In addition to Nettuts+, of course! So go, code, browse, design! Hope you learned something here!