Introduction

This week we will:

• look back at the ways in which CSS can help with issues of navigation and locating people within a web site
• start to look at page layout using CSS. In doing so we will look at how the box model can be used in CSS and at some of the issues with using it.

Different types of boxes

There are a number of ways we can use CSS to position information on a page.

First of all we need to consider the concept of document flow

Then we can look at the different ways of positioning and properties within it:

• Static positioning - the default situation
• Relative, Absolute and Fixed positioning
• Floated elements
• The Z-Index

Designing a web page using CSS positioning

You can use CSS positioning in a variety of ways a few of which are illustrated below:

• Centred boxes;
• two columns-left menu
• three columns

The Box Model

Here are a few notes to help us to understand the box model.

This session's activities

There are three activities to be done in this session:

• Activity 501: Trying out the different sorts of positioning;
• Activity 502:  Producing multiple column pages;
• Activity 503: Setting up a web site using CSS for positioning;
• Activity 504: Using CSS with different browsers - Advanced exercise 3;

You can get further information about these activities by using the activity links on the left.