Difference between revisions of "CSS:Layouts102"

From mi-linux
Jump to navigationJump to search
 
(9 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
[[Main Page]] >> [[4CC002|Website fundamentals]] >> [[4CC002Workbook|Workbook]] >> [[CSS]] >> More Complex Layouts
 +
 +
[[Category:CSS]]
 +
 
=Layout 2: 3 columns=
 
=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:
 
The first stage to approach layouts is to draw a simple diagram of how you would like a web page to be presented:
Line 83: Line 87:
  
 
[[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]]
 +
 +
=== A Quick note ===
 +
 +
When creating this layout, if the height of either the left or right columns is more than that of the contents of your page, they will 'spill' over onto your footer. Ensure the height of your contents is greater than the heights of both your side columns to avoid this. (added by Gary Steinert 0709495)
 +
 +
To avoid this use&nbsp;&nbsp;&nbsp;&nbsp; '''clear:both;&nbsp;'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; in the footer of your stylesheet. (added by Harpreet Singh 0917661)<br>
  
 
=Ready to move on?=
 
=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.
+
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.
 +
=Related Pages=
 +
<categorytree mode=pages>CSS</categorytree>

Latest revision as of 15:02, 12 July 2011

Main Page >> Website fundamentals >> Workbook >> CSS >> More Complex Layouts

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

A Quick note

When creating this layout, if the height of either the left or right columns is more than that of the contents of your page, they will 'spill' over onto your footer. Ensure the height of your contents is greater than the heights of both your side columns to avoid this. (added by Gary Steinert 0709495)

To avoid this use     clear:both;       in the footer of your stylesheet. (added by Harpreet Singh 0917661)

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.

Related Pages

<categorytree mode=pages>CSS</categorytree>

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