Difference between revisions of "CSS:Layouts102"

From mi-linux
Jump to navigationJump to search
 
(13 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 5: Line 9:
  
 
===Stage 2: The Divisions===
 
===Stage 2: The Divisions===
−
In order to achieve this layout we need three "divisions" - let's create them in HTML
+
 
 +
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
 
''HTML Document'' - no CSS yet
Line 24: Line 32:
 
         <LI>Item 5</LI>
 
         <LI>Item 5</LI>
 
       </UL>
 
       </UL>
 +
    </DIV>
 +
    <DIV id="right">
 +
      Some interesting information in the right-hand column
 
     </DIV>
 
     </DIV>
 
     <DIV id="content">
 
     <DIV id="content">
 
     <H1>This is the Content of the page</H1>
 
     <H1>This is the Content of the page</H1>
 
     <P>Very interesting content - wouldn't you agree?</P>
 
     <P>Very interesting content - wouldn't you agree?</P>
−
    </DIV>
 
−
    <DIV id="right">
 
−
      Some interesting information in the right-hand column
 
 
     </DIV>
 
     </DIV>
 
   </BODY>
 
   </BODY>
Line 38: Line 46:
 
Create the following CSS file (and save as style6.css)
 
Create the following CSS file (and save as style6.css)
  
−
  <nowiki>#menu {float:left}</nowiki>
+
  <nowiki>#menu {float:left}
−
 
+
#right {float:right}</nowiki>
−
Now reload the page - what do you see?
 
−
 
 
−
[[Image:layout2screen.png]]
 
−
 
 
−
We're making progress - at least the divisions are in the right place.
 
  
 
===Stage 4: Tidy up the presentation===
 
===Stage 4: Tidy up the presentation===
Line 56: Line 59:
 
   float:left;
 
   float:left;
 
   border: 2px solid #0000ff;
 
   border: 2px solid #0000ff;
−
   margin: 10px;
+
   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;
 
   padding: 10px;
 
}</nowiki>
 
}</nowiki>
 +
 +
The new concepts introduced here are:
 +
 +
*float:right
 +
*margins with 4 sets of numbers
  
 
The page should now look something more like this:
 
The page should now look something more like this:
  
−
[[Image:layoutscreen3.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.
  
−
Now we'll do the same for the content division
+
Modify the CSS to the following:
  
−
  <nowiki>#content
+
  <nowiki>#header
 
{
 
{
−
   border: 2px solid #ff0000;
+
   border: 2px solid #0000ff;
 +
  padding: 10px;
 
   margin: 10px;
 
   margin: 10px;
 +
}
 +
 +
#middlesection
 +
{
 
   padding: 10px;
 
   padding: 10px;
−
}</nowiki>
+
  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;
 +
}
  
−
The page should now look something more like this:
+
#footer
 +
{
 +
  border: 2px solid #0000ff;
 +
  padding: 10px;
 +
  margin: 10px;
 +
}
  
−
[[Image:layoutscreen4.png]]
+
</nowiki>
  
−
This isn't what we want, but it emphasises the concept of "floating" - because the menu division is floating above the content division, the menu division passes BELOW the content division, and the content division is overlapping.
+
The page should now look something more like this:
  
−
There are a number of ways in CSS to fix this, but the easiest (in this example) is to also "float" the content division, since floating divisions appear side-by-side (as long as there is space) - change the content division CSS to also include a float statement:
+
[[Image:layoutscreen24.png]]
  
−
<nowiki>#content
+
=== A Quick note ===
−
{
 
−
  float: left;
 
−
  border: 2px solid #ff0000;
 
−
  margin: 10px;
 
−
  padding: 10px;
 
−
}</nowiki>
 
  
−
The page should now look something more like this - this is pretty close to what we want:
+
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)
  
−
[[Image:layoutscreen5.png]]
+
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"