Difference between revisions of "CSS:Layouts101"
From mi-linux
Jump to navigationJump to search| Line 5: | Line 5: | ||
===Stage 1: The Drawing=== | ===Stage 1: The Drawing=== | ||
The first stage to approach layouts is to draw a simple diagram of how you would like a web page to be presented: | The first stage to approach layouts is to draw a simple diagram of how you would like a web page to be presented: | ||
| − | [[Image:layout1. | + | |
| + | [[Image:layout1.gif|A simple layout drawing]] | ||
===Stage 2: The Divisions=== | ===Stage 2: The Divisions=== | ||
Revision as of 13:36, 5 September 2007
Layouts
One of the primary strengths of CSS is being able to layout a page ALMOST EXACTLY as you want to. HTML by itself can be limited in this sense, but CSS allows the extension of the box model to produce almost any layout.
Layout 1: 2 boxes side-by-side
Stage 1: The Drawing
The first stage to approach layouts is to draw a simple diagram of how you would like a web page to be presented:
Stage 2: The Divisions
In order to achieve this layout we need two "divisions" - let's create them in HTML
HTML Document - no CSS yet
<nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>CSS 5</TITLE>
<LINK rel="stylesheet" href="style5.css" type="text/css">
</HEAD>
<BODY>
This is the Content of the page
Very interesting content - wouldn't you agree?
</BODY>
</HTML>
Stage 3: Match the divisions to the drawing
Take a look at the page generated above - you'll see that the content isn't where we want it to be.
