Slice a Template and Code it Using CSS

by discovery Wed Mar 23, 2011 8:52 pm

Slice a Template and Code it Using CSS

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 -

Slice a Template and Code it Using CSS Template_small

(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:

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

body {
background-color:
#585858;
text-align:
center;
margin:
0px auto;
font-family:
tahoma;
font-size:
11px;
}

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:

#container {
width:
700px;
margin:
0px auto;
text-align:
left;
}

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:

#header {
width:
660px;
background:
url(images/header-bg.jpg) repeat-x;
height:
78px;
padding:
20px;
}
#header a {
font-size:
20px;
font-family:
arial;
color:
#000;
text-decoration:
none;
}
#header a:hover {
text-decoration: underline;
}

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 -

Slice a Template and Code it Using CSS 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:

#hnav {
width:
700px;
background:
url(images/navigation-bg.jpg) repeat-x;
height:
25px;
padding-top:
7px;
}
#hnav a {
padding-left:
60px;
padding-right:
60px;
color:
#fff;
font-weight:
bold;
text-decoration:
none;
}
#hnav a:hover {
text-decoration: underline;
}

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 -

Slice a Template and Code it Using CSS Nav-selection-small

(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:

#snav {
width:
155px;
border:
1px solid #484848;
text-align:
center;
padding-top:
20px;
padding-bottom:
20px;
float:
left;
background-color:
#747474;
}
#snav ul {
list-style:
none;
padding:
0px;
margin:
0px;
}
#snav a {
color:
#71fd2a;
text-decoration:
none;
}
#snav a:hover {
text-decoration: underline;
}

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 Slice a Template and Code it Using CSS Icon_smile

PLAIN TEXT
CSS:

#content {
width:
537px;
background-color:
#747474;
border:
1px solid #484848;
float:
left;
margin-left:
4px;
}

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:

#content .header {
background:
url(images/content-header-bg.jpg) repeat-x;
height:
19px;
width:
483px;
border:
1px solid #454545;
padding-top:
4px;
padding-left:
15px;
font-weight:
bold;
}
#content .text {
background-color:
#a2a2a2;
border-left:
1px solid #454545;
border-right:
1px solid #454545;
border-bottom:
1px solid #454545;
width:
484px;
padding:
7px;
}

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:

#footer {
width:
690px;
background:
url(images/footer-bg.jpg) repeat-x;
height:
32px;
padding:
5px;
margin-top:
5px;
color:
#cbcbcb;
font-size:
10px;
}
.end {
clear:
both;
}

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:

<body>
<div id="container">
<div id="header">
<a href="#">Slicing
Tutorial</a>
</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:

<div id="hnav">
<a href="#">Nav
Link</a> <a href="#">Nav
Link</a> <a href="#">Nav
Link</a> <a href="#">Nav
Link</a>
</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:

<div id="snav">
<ul>
<li><a href="#">Sub-Nav
Link</a></li>
<li><a href="#">Sub-Nav
Link</a></li>
<li><a href="#">Sub-Nav
Link</a></li>
<li><a href="#">Sub-Nav
Link</a></li>
<li><a href="#">Sub-Nav
Link</a></li>
<li><a href="#">Sub-Nav
Link</a></li>
<li><a href="#">Sub-Nav
Link</a></li>
</ul>
</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:

<div id="content">
<div class="header">
News Post 1
</div>
<div class="text">
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.
</div>
</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:

<div class="end"></div>
<div id="footer">
</div>
</div>
</body>
</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

source: http://www.tutorialcode.com/html/slice-a-template-and-code-it-using-css/