Making a CSS design
Here is the purpose of this tutorial: making a centered layout with two sidebars, a header and a footer without tables. It should look like this: click.
In the picture, I've represented the div layers needed to realize this.
As you can see, 5 elements (header, sidebars, footer, text) but 6 layers! The extra layer will contain all the elements and set the width of the layout. We will also use it to center our layout.
Here is our index.htm source so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="leftside"></div>
<div id="text"></div>
<div id="rightside"></div>
<div id="footer"></div>
</div>
</body>
</html>
Don't forget the doctype (underlined) for validation, as well as the link to the stylesheet. I have put IDs in the div layers so that we can control their looks and position with CSS. Remember that an ID can be used once in a page only, contrary to classes which can be used as much as you want.
Now, let's take a look at stylesheet.css : (ignore the backgrounds color, I've put them so that you can see the different divs on the final layout.)
body {
margin: 0px;
padding: 0px;
background: #FFFFFF;
}
#container {
/* margins at top and bottom are 0px but on the sides, "auto" will center the layout */
margin: 0px auto;
padding: 0px;
/* sets the layout width */
width: 700px;
}
#header {
width: 100%;
height: 150px;
background: #EEE;
}
#leftside {
width: 150px;
/* float it to the left of the text */
float: left;
background: #DDD;
}
#rightside {
width: 150px;
/* float it to the right of the text */
float: right;
background: #CCC;
}
#text {
width: 400px;
background: #BBB;
/* float it to the left of the right sidebar */
float: left;
}
#footer {
width: 100%;
height: 50px;
/* clear: both so that it remains at the bottom of the 3 columns */
clear: both;
background: #AAA;
}
The # before each layer's ID in the stylesheet is needed! It's similar to the . in front of classes in stylesheets. The structure of the page is now ready, it looks like this. All that's left is to add style. Let's start adding space between the layers' borders and the text. Add this to your stylesheet:
p {
/* margins on the sides are 10px now */
margin: auto 10px;
/* font size is 11px and line-height is 15px */
font: 11px/15px Arial, Verdana, sans-serif;
}
It's starting to look like something! We now have this. Notice how the sidebars are smaller than the text layer height? We're going to fix this with a little trick. We're going to make an image background for the container layer. The background image. This trick is called faux columns. Now in your stylesheet, find #container and add this in the properties:
/* add the background to make faux columns */Click here to see the finished page! You can customize it as you want with CSS, make beautiful css menus, etc. Use the CSS background properties to define your header image and graphics. Why? So that without changing your HTML code, you can change your layout easily!
background: url(background.jpg) repeat-y;
CSS design sample files (5.9 KB, 504 hits)
3 Responses to “Making a CSS design”
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)
wow! this was very helpful. i always thought you'd have to make a picture with the layout...
Nice CSS starter layout. I use Dreamweaver for design and have a very handy extension for creating valid CSS layouts. If anyone's interested, it's found at WebAssist: http://www.webassist.com/professional/products/productdetails.asp?PID=135&WAAID=649
I really don't get it .. sorry!!
does it have to be a ".org" website??