Difference between revisions of "CSS:Layouts101"
From mi-linux
Jump to navigationJump to search| Line 35: | Line 35: | ||
</BODY> | </BODY> | ||
</HTML></nowiki> | </HTML></nowiki> | ||
| + | |||
| + | Your screen should look like this (or similar): | ||
| + | |||
| + | [[Image:layout1screen.png|Screenshot of Layout 2]] | ||
===Stage 3: Match the divisions to the drawing=== | ===Stage 3: Match the divisions to the drawing=== | ||
Revision as of 13:50, 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.
