Page Setup
Unlike other tutorials that show you how to do this using Dreamweaver only, this guide will show you how to do it in the code needed, therefore making it usable for everyone, and probably teaching you a bit more than which buttons to press too.
This step will be going through how to set up your page, how to set up the margins, the importance of a container element and.. well.. all the rest of the basics. As we go along, we'll be testing in Firefox, but later on we'll come to browser testing and compatibility for the big three.
So, first of all we need to set our margins to zero, zilch, nought i.e. nothing. This is done simply in CSS, after writing out our basic document structure. If you're too lazy, don't know all the crazy characters in the DOCTYPE declaration, or really don't care, then here it is for you in all of its XHTML 1.0 glory:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Slicing Guide </title>
</head>
<body>
</body>
</html>
For the time being, we will be using an inline CSS tag just to keep everything in one file. Since we won't be running any server side code on it yet, you're better off developing the page locally, i.e. on your own hard drive. There are a few advantages to this:
- Near-instant loadtime.
- No need to run after missing "broken" images.
- No need to upload anything.
- Upload it when it's finished, not when it's half completed.
- ...you won't need to keep refreshing on a much slower server located in Zanzibar.
With that said, it's time to get cracking with our CSS. As I mentioned earlier, we need to set our margins to zero. This is because different browsers have different padding properties for the html and body tags. In my opinion there is no need for browser-defined padding in any case, so it may as well become deprecated. Nonetheless, setting margins to zero erases the gap between the browser's viewing frame and the content, which is what we want to achieve. To do so, we use this code:
body {
margin: 0;
padding: 0;
text-align: center;
}
For those of you who are new to CSS and are used to seeing "px", "pt", "%", or "em" all over the place, when you define a style with a property set to zero you must never include a unit. This is simple logic really, and it makes sense (let's face it - you'll probably never come across logic that doesn't). Have you ever seen the stock exchange when €0 equalled £0.20? The answer is simply, no you haven't, and you never will. Why? Because having nothing of anything means you can't have any fraction or quantity equal to anything else. With that minor geek rant over, it's time to talk to you about the importance of having a container div.
Container divs are wonderful things. They're like an unofficial second body tag that sets the maximum width for the page layout and positions everything inside it. Having one container div means that we save having to type out the same line of CSS for everything else in our webpage, which means a faster load time in the end, which is what we're trying to achieve with CSS design.
First of all, we'll have to measure the layout's width. You can do this in Photoshop by using the ruler tool and measuring the layout's main area from left to right. By "main area", I mean the regions of the layout that won't be whitespace or the background image, colour or pattern.
First we'll get our layout open in Photoshop if it's not already, and then select the ruler tool by pressing CTRL+R. If you'd rather do it the menu way, then you'll find it under the View menu. When the rulers are up, you'll see where they meet in the top left. If you're lost, look for the image below:
Now, if you "grab" that square by clicking and holding your mouse down, you should get two dotted guidelines moving around the screen with your mouse. Line them up with the beginning of the main area of the template like so:
Once you have these set, just measure across the layout to get to the end of the main area and then take the measurement in pixels. In this example, it measures 800 pixels.
We've now got the dimensions for the container div - 800 pixels wide. As well as adding a width, we're also going to centre the layout to make it display in the middle. To do this, we add in some CSS code:
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
The property, auto, will centre* the layout. Once we've got this inside the CSS tag we put in earlier, we're going to put in the corresponding div inside the body. This is done pretty easily, like so:
<div id="container">
</div>
*Centring the layout for modern browsers only. There is a workaround for pre IE6 users which takes advantage of how it renders the text-align attribute, which has been applied accordingly. To learn more, read this mini article.
Once you've done that, we've now set our page up - ready to start adding in the main layout contents. The end code you should have should be something like below - and it should look like a blank page for the time being!
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Slicing Guide </title>
<style type="text/css">
body {
margin: 0; padding: 0;
text-align: center;
}
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
</head>
<body>
<div id="container">
</div>
</body>
</html>
Got that? We're done! Your page is setup to start adding in the rest of the layout now. Let's move on to step 4.