Difference between revisions of "CSS:Layouts101"

From mi-linux
Jump to navigationJump to search
 
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
[[Main Page]] >> [[4CC002|Website fundamentals]] >> [[4CC002Workbook|Workbook]] >> [[CSS]] >> Simple Layouts
 +
 +
[[Category:CSS]]
 +
 
=Layouts=
 
=Layouts=
 
One of the primary strengths of CSS is being able to layout a page ALMOST EXACTLY as you want to.  HTML by itself can be limited in this sense, but CSS allows the extension of the box model to produce almost any layout.
 
One of the primary strengths of CSS is being able to layout a page ALMOST EXACTLY as you want to.  HTML by itself can be limited in this sense, but CSS allows the extension of the box model to produce almost any layout.
Line 34: Line 38:
 
     </DIV>
 
     </DIV>
 
   </BODY>
 
   </BODY>
−
</HTML>
+
</HTML></nowiki>
 +
 
 +
Your screen should look like this (or similar):
 +
 
 +
[[Image:layout1screen.png|Screenshot of Layout 2]]
  
 
===Stage 3: Match the divisions to the drawing===
 
===Stage 3: Match the divisions to the drawing===
−
Take a look at the page generated above - you'll see that the content isn't where we want it to be.
+
Take a look at the page generated above - you'll see that the content isn't where we want it to be.  In order to do this, we can "float" the first division above the second.
 +
 
 +
Create the following CSS file (and save as style5.css)
 +
 
 +
<nowiki>#menu {float:left}</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===
 +
 +
Let's put some more content in the CSS to improve the appearance.
 +
 +
Modify the CSS to the following:
 +
 +
<nowiki>#menu
 +
{
 +
  float:left;
 +
  border: 2px solid #0000ff;
 +
  margin: 10px;
 +
  padding: 10px;
 +
}</nowiki>
 +
 +
The page should now look something more like this:
 +
 +
[[Image:layoutscreen3.png]]
 +
 +
Now we'll do the same for the content division
 +
 +
<nowiki>#content
 +
{
 +
  border: 2px solid #ff0000;
 +
  margin: 10px;
 +
  padding: 10px;
 +
}</nowiki>
 +
 +
The page should now look something more like this:
 +
 +
[[Image:layoutscreen4.png]]
 +
 +
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.
 +
 +
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:
 +
 +
<nowiki>#content
 +
{
 +
  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:
 +
 +
[[Image:layoutscreen5.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.
 +
=Related Pages=
 +
<categorytree mode=pages>CSS</categorytree>

Latest revision as of 15:02, 12 July 2011

Main Page >> Website fundamentals >> Workbook >> CSS >> Simple Layouts

Layouts

One of the primary strengths of CSS is being able to layout a page ALMOST EXACTLY as you want to. HTML by itself can be limited in this sense, but CSS allows the extension of the box model to produce almost any layout.

Layout 1: 2 boxes side-by-side

Stage 1: The Drawing

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 two "divisions" - let's create them in HTML

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 5</TITLE>
     <LINK rel="stylesheet" href="style5.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="content">
     <H1>This is the Content of the page</H1>
     <P>Very interesting content - wouldn't you agree?</P>
    </DIV>
  </BODY>
</HTML>

Your screen should look like this (or similar):

Screenshot of Layout 2

Stage 3: Match the divisions to the drawing

Take a look at the page generated above - you'll see that the content isn't where we want it to be. In order to do this, we can "float" the first division above the second.

Create the following CSS file (and save as style5.css) 

#menu {float:left}

Now reload the page - what do you see?

Layout2screen.png

We're making progress - at least the divisions are in the right place.

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: 10px;
  padding: 10px;
}

The page should now look something more like this:

Layoutscreen3.png

Now we'll do the same for the content division 

#content
{
  border: 2px solid #ff0000;
  margin: 10px;
  padding: 10px;
}

The page should now look something more like this:

Layoutscreen4.png

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.

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: 

#content
{
  float: left;
  border: 2px solid #ff0000;
  margin: 10px;
  padding: 10px;
}

The page should now look something more like this - this is pretty close to what we want:

Layoutscreen5.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.

Related Pages

<categorytree mode=pages>CSS</categorytree>

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