Use CSS for layout and design

The object is to create a canvas of web pages entirely in CSS so that they will adapt to the size of the navigator and the screen onto which they are viewed.View result / View another result

Introduction

CSS (cascading stle sheets) are very powerful tools that are not only used to modify links, as people often think. There is an introduction to the use of CSS in this tutorial.
Actually, CSS are more and more important with the Web evolution and it is possible to create entire websites using only CSS.

Technically, there are three types of designs for a website:

Advantages, inconvenients and compatibility

CSS have many advantages, they're especially good to lighten the code and weight of the page, and also to make possible things that cannot be done with Javascript or HTML.
Plus, CSS make it easier to update big websites: with a separate CSS sheet, you need only change one line and all the relevant aspects of the entire website are changed.
A big advantage for CSS is that the physical aspect of a page can be changed in no time at all. Just take a look at how you can choose designs for Alsacreations, nad most of all on the reference site CSS Zen Garden: a real chameleon!
CSS also allow for a better respect of web standards, tags semantics and easier accessibility.

As for inconvenients, I have to admit that HTML visual editors such as Dreamweaver have trouble managing these techniques and still use tables to construct pages, or even misuse layers.
Even if the exercise in this tutorial can be re-created with CSS tools integrated in Dreamweaver, you will probably have to rummage in the code itself to get to the next level and more evolved techniques.

As far as compatibility goes, CSS were already integrated with Internet Explorer 3 and nowadays all recent navigators have no trouble managing integrated complex style sheets.
Of course, you must know that old navigators such as Netscape 4 have a lot of trouble managing CSS positioning (they sometimes don't read them at all!) such as we will be using in this tutorial. There is no choice, you must make things move if you want old dinosaurs to go away!

Procedure:

We wont' use any table to create our canvas, but only DIV tags to limit our areas.

NOTE: <div> tags are neutral and they act as containers or blocks. They are like invisible rectangular boxes.
Generally, <div> is assimilated with a concept of "layer", especially on html editors such as Dreamweaver.
We dont' have to use this position property, it can be avoided by placing the divs relatively to each other by using the "margin" property.

To define and differenciate each div block, they will be assigned a different id. For example, the div id="left" (the one that will be used as menu) will be a block placed to the left of the page and will have a defined width of 200 px.

Here is the procedure:

Note: all CSS attributes that we will use are not explained in detail because in general their signification is very explicit. If you need help with some of these, here is a short explanation list: http://www.htmldog.com/reference/cssproperties/

General realisation

  1. HTML code

The general structure - HTML code that will be placed in the "body" tag - is as follows: 

<div id="header"></div>
<div id="content">
   <div id="menu"></div>
   <div id="center"></div>
</div>
<div id="footer"></div>

Our four blocks are now created (header, menu, center and footer). The "menu" and "center" parts are contained in a block named "content", so that both parts interact together (same height and positioning one in connection to the other for example).

Now that the HTML part is done, we only need to take care of the CSS part!

Important: be default, DIV blocks will automatically place themselves one above the other and will take the whole width of the screen. We can use this feature in constructing our page.

  1. CSS code

Below is the CSS code for our page setting, it needs to be placed between the HEAD tags on the html page. Detailed explanations are below the code.

<style type="text/css">
<!--
html, body {
	margin:0;
	padding:0;
  height: 100%;
}
#header {
	background-color: #3333CC;
	height: 10%;
}
#content {
	height: 80%;
	background-color: #66CCFF;
}
#menu {
	background-color: #330066;
	float: left;
	width: 200px;
	height: 100%;
	color: #ffffff;
}
#center {
	margin-left: 200px;
}
#footer {
	background-color: #336699;
	height: 10%;
}
-->
</style>


CSS code explanation and realisation:

1) Let's start by suppressing the page margins by clicking on adding a new style with Dreamweaver (Shift+F11). Click on the option "redefine an existing tag" and choose the BODY tag in the expanding selection.
Within the "box" category, give a value of zero to all margins, keep the "same for all" case clicked.


2) Define the header(div id="header") by clicking on add a new style. Name the style #header (don't forget the # in front of the name).
In the "background" category, choose a background color for the header (I picked #3333CC).
In the "box" category, give it a height of 10% (this is only an example, you can change that).
The header is done, no need to give it a position because it will be automatically placed to the top left of the page. No need to give it a width either because it will occupy the whole width of the screen.


3) Use the same procedure to define the content block (div id="content") that you will nema #content and that will contain the menu and centre blocks.
Give this block a height of 80% and a background color (I picked #66CCFF).
No need to give a position to this "content" block, it will be place automatically below the header block.

4) For the menu block(div id="menu"), it is a little different. This one is the only one to have a defined width because you don't want it to take the whole page width. It will also be different from the other blocks because it will need to be placed to the left and not right below the central block, as it will be placed by default.
Create this id by clicking on add a new style. Call it "#menu" and give it a background color.
In the "box" category, give it a fixed width (200 px) and also a "float:left" value so that it will know to place itself in the left part of its container.
Lastly, specify a height of 100%, so that it will use the whole height of its container (that is the "content" block).

5) For the central block, (div id="center"), which is the one that will hold the content of the page. This one will only need to be placed according to the menu, that is with a left margin of 200 pixels.
Create this id by clicking on add a style. Call it "#centre", no need to give it a background color, it will take the color of its container, that is "content".
In the "box" category, specify a left amrgin of 200 pixels. Unclick the "same for all" option, so that the margin does not aply to all sides..
No need to specify a width to the "centre" block: it will automatically take the width left on the screen.

6) Finish by defining the footer (div id="footer") by clicking on add a new style. Name it #footer.
In the "background" category, choose a background color for the footer (I picked #336699).
In the "box" category, give it a height of 10% (this is only ane xample and you can change that).
That's it, the footer is done. No need to give it a position since it will automatically place below the other blocks. No need to give it a width, it will occupy the whole screen width.

Your turn!

This is basic, this tutorial will allow you to create a simple canvas base. You can practice with this exercise until tou manage to create structures that are more complex, for example by replacing background colors with images (see this exercise)

CSS also allow you to create complex menus: vertical, expanding, animated...(See general page and examples)

Lastly, see a whole array of CSS created page samples.

Print article

Raphael GOETTER
www.alsacreations.com