Difference between revisions of "CSS:Layouts101"
| Line 48: | Line 48: | ||
Now reload the page - what do you see? | Now reload the page - what do you see? | ||
| + | |||
| + | [[Image:layout2screen.png]] | ||
| + | |||
| + | We're making progress - at least the divisions are in the right place. | ||
===Stage 4: Tidy up the presentation=== | ===Stage 4: Tidy up the presentation=== | ||
Revision as of 15:15, 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
<!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>
<DIV id="menu">
This is the menu
<UL>
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
<LI>Item 5</LI>
</UL>
</DIV>
<DIV id="content">
<H1>This is the Content of the page</H1>
<P>Very interesting content - wouldn't you agree?</P>
</DIV>
</BODY>
</HTML>
Your screen should look like this (or similar):
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. In order to do this, we can "float" the first division above the second.
Create the following CSS file (and save as style5.css)
#menu {float:left}
Now reload the page - what do you see?
We're making progress - at least the divisions are in the right place.
