This tutorial is going to show you how to take a template (not create it) and slice it up in Photoshop and code it in complete CSS. No use of that tables crap, CSS is much faster then using tables, your pages will load a lot faster. Plus you have a lot more control over your templates, and your code will be a lot neater.

This is the template that I will be slicing up and code -

Thumbnail of Template
(Click thumbnail for full view)

You can steal that template if you want, use it on your own website, use it for this tutorial. Claim it as your own. I don't care, I made it in 45 minutes and it's up for grabs!

As you can see, it's not the prettiest template ever made, but it will work perfect for this tutorial, you can take all the techniques you learned in this tutorial and just transfer them over to any other template that you want to code. Once you get the basics done you will see it's actually pretty easy to do.

Throughout this tutorial, I will be switching back and forth between slicing small parts of our template and the actual CSS coding.

So let's start off by defining our HTML document.

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.     <meta name="author" content="TutorialCode.com" />
  7. <title>Slicing a Template</title>
  8.     <style type="text/css" media="screen" title="Main Stylesheet">@import "style.css";</style>
  9. </head>

This just defines your doc-type, does all your fun header stuff. Now, let's start our CSS file, this is also where we will be looking at our template.

PLAIN TEXT
CSS:
  1. body {
  2.     background-color: #585858;
  3.     text-align: center;
  4.     margin: 0px auto;
  5.     font-family: tahoma;
  6.     font-size: 11px;
  7. }

This is where we define our body. In simple terms, this is where we say what we want all the global things to look like. The fonts on the page, size, background color.

For the background color, I just went into photoshop, used the color picker tool and got the color of the background. Plop that hex code into your background-color, and your set.

You may also see that I have text-align: center & margin: 0px auto; - these are 2 small hacks that let you center your layout in the browser, automatically. The margin: 0px auto is what centers your layout in Firefox, now this doesn't work in IE (Internet Explorer), but what does thoguh? So we used text-align: center. Now you may be thinking : "I don't want all my text centered though!". This is ok, we will be setting it back to normal after. Now, more CSS, YAY!

PLAIN TEXT
CSS:
  1. #container {
  2.     width: 700px;
  3.     margin: 0px auto;
  4.     text-align: left;
  5. }

Add that below your last CSS statement, this will be our container, our container is invisible but holds ALL of our template inside of it. Think of it, as a tupperware and all of our template is...peas. I got the width: 700px thing by just measuring the total width (left to right) of our template. Usually when you making a template, you will know how wide you are making it, if not then take your marquee tool, select from 1 side of the template to the other, then in your info pallette (usually grouped with your Navigator) will show the width of your SELECTION (it's the W : ###).

Then, we want our container to be centered, don't worry this is the last time we have to do this, since everything is inside our container, it is centered too. Then this is where we set our text back to normal, and it will be aligned to the left again! Instead of doing our HTML, I'm gonna write some more CSS and get it out of the way :P. So let's create our header -

PLAIN TEXT
CSS:
  1. #header {
  2.     width: 660px;
  3.     background: url(images/header-bg.jpg) repeat-x;
  4.     height: 78px;
  5.     padding: 20px;
  6. }
  7.     #header a {
  8.         font-size: 20px;
  9.         font-family: arial;
  10.         color: #000;
  11.         text-decoration: none;
  12.     }
  13.         #header a:hover {
  14.             text-decoration: underline;
  15.         }

This whole chunk of CSS code is how we make our header, now when dealing with CSS you have to realize, when you use padding, you have to adjust the height and width accordingly.

So, the actual width of our header is 700px, but I am using a 20px padding, and since that means there is padding on the left AND right, that is a total of 40px of padding. So I subtract 40 from the total width of our header, and do the same with the height.

Now for the most important part, our header background. As you can see, it is just the gradient from our picture, except the only difference is we are only using a 1px wide image.

Here, I will show you a picture of what I'm doing in Photoshop -

Header Selection Small
(Click thumbnail for full view)

So as you can see, all I'm doing is making a 1px wide image, of 1 part of our gradient, I then set it the background image of our header to this image, (the 1px wide part of our gradient) and use repeat-x;. This will repeat this small part of our gradient horizontally so that it seems like its 1 big image. Save this image in an /images directory and save all your images there. I save my image name as header-bg - this fits well seeing as how, it is the background for the header :).

The rest of the header mumbo-jumbo is just some styling for our header text, I style our links, and then style our link when your cursor is hovering over it, pretty basic stuff and very straight forward. Now, more CSS!

PLAIN TEXT
CSS:
  1. #hnav {
  2.     width: 700px;
  3.     background: url(images/navigation-bg.jpg) repeat-x;
  4.     height: 25px;
  5.     padding-top: 7px;
  6. }
  7.     #hnav a {
  8.         padding-left: 60px;
  9.         padding-right: 60px;
  10.         color: #fff;
  11.         font-weight: bold;
  12.         text-decoration: none;
  13.     }
  14.         #hnav a:hover {
  15.             text-decoration: underline;
  16.         }

Alright, this is pretty much the same CSS coding, as we used for our header except for the fact that the height is different, and we are using a different image.

So we get our background image the same way that we got the background image for our header -

Navigation Selection Thumbnail
(Click thumbnail for full view)

Now, we just do the same thing we did with our header background, if you compare the 2 codes there pretty much the same, except this time we only put padding on the top so our links can be more aligned in the middle of our navigation bar.

Then the rest of our code just styles our links, I have made it so that it fits perfectly for 4 links, if you were using MORE then 4 links for example, with this exact template, you would have to lower the left and right padding for the link, this is that the links are all evenly spaced out, and the more links you add you will have to lower the padding.

Now for some more CSS, we are going to make our sub-navigation box, use some new techniques as well!

PLAIN TEXT
CSS:
  1. #snav {
  2.     width: 155px;
  3.     border: 1px solid #484848;
  4.     text-align: center;
  5.     padding-top: 20px;
  6.     padding-bottom: 20px;
  7.     float: left;
  8.     background-color: #747474;
  9. }
  10.     #snav ul {
  11.         list-style: none;
  12.         padding: 0px;
  13.         margin: 0px;
  14.     }
  15.     #snav a {
  16.         color: #71fd2a;
  17.         text-decoration: none;
  18.     }
  19.         #snav a:hover {
  20.             text-decoration: underline;
  21.         }

There is quite a bit of CSS here, some of it new. Some of it not. This box, our sub-navigation doesn't have a background image, we are just using a solid color. So I just use the color picker in Photoshop, get the color of the background in our sub-navigation and pop that into our background-color: in our CSS. You have seen everything there, except for the float: left; - This is how we are gonna get our sub-navigation and our content, if you didn't put that your sub-navigation and content would be on different lines (or sections). Content underneath your sub-navigation.

Then we say that all ul tags in our sub-navigation will have no list-style, so no little dot next to them. This is a good method for making vertical navigation lists, using <li> tags.

Then we just style our links and thats that for our sub-navigation. Next onto our content box, this one is a bit trickier because we have our news post box, inside of our content box. Phew, slicing a template is tedious! I hope your still with me :)

PLAIN TEXT
CSS:
  1. #content {
  2.     width: 537px;
  3.     background-color: #747474;
  4.     border: 1px solid #484848;
  5.     float: left;
  6.     margin-left: 4px;
  7. }

Alright, that is just the beginning of our content area, we need to the little box inside of the content area next, this just makes a simple box, it just mimics our sub-navigation box except the width is wider obviously.

PLAIN TEXT
CSS:
  1. #content .header {
  2.         background: url(images/content-header-bg.jpg) repeat-x;
  3.         height: 19px;
  4.         width: 483px;
  5.         border: 1px solid #454545;
  6.         padding-top: 4px;
  7.         padding-left: 15px;
  8.         font-weight: bold;
  9.        
  10.     }
  11.     #content .text {
  12.         background-color: #a2a2a2;
  13.         border-left: 1px solid #454545;
  14.         border-right: 1px solid #454545;
  15.         border-bottom: 1px solid #454545;
  16.         width: 484px;
  17.         padding: 7px;
  18.     }

This is where we create the little header image part, so in other words a title for our posts. And then the area where we input our content, or text per say. We take a 1px wide image for the background of our title bar, (you have seen this many times before) and then we do the same thing we always do, then I go through the exact same thing as we have done for our other boxes, and navigation. Then I make the text area for our post, this is extremely simple, just a box with borders on the left, right and bottom. Why none on the top? Because our title has a border ALL the way around it, so it makes up the border for the bottom of the title, and the top of the text area, we don't want a double border!

Almost done! Next we just do our footer, then I show you some of the HTML quickly and were done!

PLAIN TEXT
CSS:
  1. #footer {
  2.     width: 690px;
  3.     background: url(images/footer-bg.jpg) repeat-x;
  4.     height: 32px;
  5.     padding: 5px;
  6.     margin-top: 5px;
  7.     color: #cbcbcb;
  8.     font-size: 10px;
  9. }
  10. .end {
  11.     clear: both;
  12. }

Alright, this is our footer, we make it just as wide as the rest of our template, give it a background image (which we have done numerous times before), give it a margin on the top so there is room between it and the content box/navigation. Now, you will see .end - this will save you in SO many situations when using CSS. In the HTML you will see where I use it and I will explain it to you.

Alright you are totally done with the CSS part of the site! Now I'll show you some of the HTML, and that's it!

PLAIN TEXT
HTML:
  2. <div id="container">
  3.     <div id="header">
  4.         <a href="#">Slicing Tutorial</a>
  5.     </div>

Alright, since we have got all our CSS out of the way, I can just zip through the HTML easy, and you will understand everything that is going on :).

That is where we define our header, remember we called it header in our CSS file? Then I make a quick link, nothing fancy. That is why I styled it all nice in my CSS file, because it will be the main website title.

PLAIN TEXT
HTML:
  1. <div id="hnav">
  2.         <a href="#">Nav Link</a> <a href="#">Nav Link</a> <a href="#">Nav Link</a> <a href="#">Nav Link</a>
  3.     </div>

This is our horizontal navigation, so we start off our navigation, by using a div, now since we already defined a background for our navigation all we have to do is add simple text links! And since they are already spaced out properly, they are extremely easy to add, just add a link tag and your done.

PLAIN TEXT
HTML:
  1. <div id="snav">
  2.         <ul>
  3.         <li><a href="#">Sub-Nav Link</a></li>
  4.         <li><a href="#">Sub-Nav Link</a></li>
  5.         <li><a href="#">Sub-Nav Link</a></li>
  6.         <li><a href="#">Sub-Nav Link</a></li>
  7.         <li><a href="#">Sub-Nav Link</a></li>
  8.         <li><a href="#">Sub-Nav Link</a></li>
  9.         <li><a href="#">Sub-Nav Link</a></li>
  10.         </ul>
  11.     </div>

Now, do you remember when we made this sub-navigation. We used an un-ordered list <ul>, and then we just made list items for each of our links, this makes for neater coding, and it is a lot easier to style and transform via the CSS file.

PLAIN TEXT
HTML:
  1. <div id="content">
  2.         <div class="header">
  3.             News Post 1
  4.         </div>
  5.         <div class="text">
  6.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam imperdiet, lacus nec hendrerit suscipit, est felis ultrices diam, ac facilisis nunc turpis a turpis. Duis dictum varius nulla. Integer pulvinar libero in leo. Etiam nonummy tortor a odio mattis porta. Nulla feugiat. Sed vitae arcu ut augue tincidunt sollicitudin. Nullam et ante. Sed leo nunc, pulvinar id, tempor hendrerit, vehicula vel, velit. Sed a libero quis elit placerat bibendum. Morbi facilisis nunc a est. Cras porttitor lobortis erat. Integer pellentesque semper ipsum. Vestibulum posuere.
  7.         </div>
  8.     </div>

Now, we start our content box, in our content box we make a header, so that we can put our title in it. Then after that we add a text box right under it, I fill it with some simple lorem ipsum, this is just filler text so you can get a feel for what it looks like with text in it.

Now for our footer,

PLAIN TEXT
HTML:
  1. <div class="end"></div>
  2.     <div id="footer">
  3.         <div align="right">Your Copyright Information, 2006 - TutorialCode.com</div>
  4.     </div>
  5. </div>
  6. </body>
  7. </html>

This is where we use our end class we defined at the end of our CSS file, now remember when we used the float: left for our sub-navigation and content area? Well that made those 2 things next to each other. Now what if we wanted our footer underneath those 2 things, if you just did it normally without add this end div, you would notice that your text is in the right place, but the background image would be behind everything, and way up high.

This is because the sub-navigation and content area are still floating left, and technically nothing is filling the gap underneath the main navigation, it is a bit hard to explain, so go ahead, try it now. Remove the end class div from your HTML and try it out, see what happens :).

Alright, that concludes my tutorial on how to slice and code a layout using CSS.

If you have any questions on this tutorial, leave a comment. You can download ALL the source files for this tutorial (images, css file and HTML) just below here. This template has been tested and works in both IE (internet explorer) and FireFox.

You can view a demo of the outcome here -
http://tutorialcode.com/slicing-tutorial/slicing-coding-tutorial.html

As you can see, it looks almost exactly like our static image in the beginning of the tutorial, and when you highlight everything, only the text is highlighted!

I hope you stuck with me through it all!

Thanks,
Sean
TutorialCode.com

Download All Source Files - HTML, CSS and Images :
Slice a Template and Code it Using CSS - Source

Share and enjoy our tutorial : These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • del.icio.us
  • Fark
  • Furl
  • Slashdot
  • Netscape
  • BlinkList
  • Ma.gnolia
  • Reddit
  • Technorati