Difference between revisions of "CSS:Layouts102"

From mi-linux
Jump to navigationJump to search
Line 83: Line 83:
  
 
[[Image:layoutscreen23.png]]
 
[[Image:layoutscreen23.png]]
 +
 +
=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
 +
 +
[[Image:layout22.gif|A more complex layout drawing]]
 +
 +
===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
 +
 +
 +
''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 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>
 +
</nowiki>
 +
 +
===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:
 +
 +
<nowiki>#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;
 +
}
 +
 +
</nowiki>
 +
 +
The page should now look something more like this:
 +
 +
[[Image:layoutscreen24.png]]
  
 
=Ready to move on?=
 
=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.
 
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.

Revision as of 10:45, 10 September 2007

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

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

A more complex layout drawing

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


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:

Layoutscreen24.png

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.

Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=CSS:Layouts102&oldid=2323"