CSS:Layouts102

From mi-linux
Jump to navigationJump to search

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:

A simple layout drawing

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

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:

Layoutscreen23.png

Ready to move on?

When you're happy with the concepts introduced in this chapter, take a look at CSS:Layouts102 for some more layout ideas, and how to implement them.