CSS:Layouts102
Layout 2: 3 columns
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 three "divisions"
- IMPORTANT
- A "quirk" of CSS is that in order to achieve this kind of layout, we need to create the divisions in the following order:
- menu, right, content
- A "quirk" of CSS is that in order to achieve this kind of layout, we need to create the divisions in the following order:
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 6</TITLE>
<LINK rel="stylesheet" href="style6.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="right">
Some interesting information in the right-hand column
</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>
Stage 3: Match the divisions to the drawing
Create the following CSS file (and save as style6.css)
#menu {float:left}
#right {float:right}
Stage 4: Tidy up the presentation
Let's put some more content in the CSS to improve the appearance.
Modify the CSS to the following:
#menu
{
float:left;
border: 2px solid #0000ff;
margin: 0px 0px 0px 10px;
padding: 10px;
width: 200px;
}
#right
{
float:right;
border: 2px solid #0000ff;
margin: 0px 0px 10px 0px;
padding: 10px;
width: 200px;
}
#content
{
border: 2px solid #0000ff;
margin: 0px 240px 0px 250px;
padding: 10px;
}
The new concepts introduced here are:
- float:right
- margins with 4 sets of numbers
The page should now look something more like this:
Layout 3: 3 rows, 3 columns
A very popular layout is to have a header section, a three column section, and a footer on one page - as per the picture below
Stage 2: The Divisions
In order to achieve this layout we need lots of divisions, one division for the header, one to hold the middle 3 divisions, and one for the footer.
- REMEMBER
- A "quirk" of CSS is that in order to achieve this kind of layout, we need to create the middle divisions in the following order:
- header, middle (menu, info, content), footer
- A "quirk" of CSS is that in order to achieve this kind of layout, we need to create the middle divisions in the following order:
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 7
</TITLE>
<LINK rel="stylesheet" href="style7.css" type="text/css">
</HEAD>
<BODY>
<DIV id="header">
Some company logo or heading
</DIV>
<DIV id="middlesection">
<DIV id="menu">
This is the menu
<UL>
<LI>Item 1
</LI>
<LI>Item 2
</LI>
<LI>Item 3
</LI>
</UL>
</DIV>
<DIV id="info">
Some interesting information in the right-hand column
</DIV>
<DIV id="content">
<H1>
This is the Content of the page
</H1>
<P>
Very interesting content - wouldn't you agree?
</P>
</DIV>
</DIV>
<DIV id="footer">
Some company disclaimer or small print
</DIV>
</BODY>
</HTML>
Stage 3: Tidy up the presentation
Let's put some more content in the CSS to improve the appearance.
Modify the CSS to the following:
#header
{
border: 2px solid #0000ff;
padding: 10px;
margin: 10px;
}
#middlesection
{
padding: 10px;
margin: 10px;
}
#menu
{
float:left;
border: 2px solid #0000ff;
margin: 0px 0px 0px 10px;
padding: 10px;
width: 200px;
}
#info
{
float:right;
border: 2px solid #0000ff;
margin: 0px 0px 10px 0px;
padding: 10px;
width: 200px;
}
#content
{
border: 2px solid #0000ff;
margin: 0px 240px 0px 250px;
padding: 10px;
}
#footer
{
border: 2px solid #0000ff;
padding: 10px;
margin: 10px;
}
The page should now look something more like this:
Ready to move on?
When you're happy with the concepts introduced in this chapter, take a look at CSS:Tips for some more tips and tricks you might like to experiment with.
