CSS positioning tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 20: Line 20:


; Moving on
; Moving on
* [[CSS positioning tutorial]]
* [[CSS for XML tutorial]]
* [[CSS for XML tutorial]]
* [[DHTML]]
* [[DHTML]]
Line 41: Line 40:
* The whole model is very complex with respect to how various properties interact
* The whole model is very complex with respect to how various properties interact
* You will have to fight browser implementation issues (e.g. IE bugs, though IE 9 seems to do quite well now - [[User:Daniel K. Schneider|Daniel K. Schneider]] 23:04, 13 November 2011 (CET))
* You will have to fight browser implementation issues (e.g. IE bugs, though IE 9 seems to do quite well now - [[User:Daniel K. Schneider|Daniel K. Schneider]] 23:04, 13 November 2011 (CET))
 
* See also [[CSS float tutorial]] (create simple layouts with float:left)
== Simple fluid layouts using the float property ==
 
'''Maybe you don't need positioning !''' Using simply the '''float:left''' CSS property/value combo, you can create simple fluid column layouts. We shall discuss an example that shows how to create a page with a heading box on top, a main body with three columns and a footing box.
 
Originally, the float property wasn't mean for creating layouts. It was meant to create boxes around which other text can flow, e.g. something like the little green box to the right of this page. However, since CSS doesn't include any proper layout design language (like in [http://www.w3.org/TR/xsl11/ XSL]), some designers now use the float property for creating column layouts.
 
<div>
<p style="background-color:green; float:right">This is a float</p>
</div>
Simple float example (see to the right)
<source lang="xml">
<div>
<p style="background-color:green; float:right">This is a float</p>
</div>
</source>
 
Now let us explain how floats can be used to create page layouts. The basic principle shall be illustrated with a simple hypothetical example: Imagine that you have two columns, one should go to the left and the other to the right. Floats, basically (1) tell an element to float horizontally (left or right) and (2) that other sibling elements or text of the parent element can float around. The latter feature isn't used for layout.
 
The HTML for a two column layout would look like this:
<source lang="xml">
<div id"container">
  <div id="left_col">
  ... Contents of left column ....
  </div>
 
  <div id="right_col">
  ... Contents of right column ....
  </div>
</div>
</source>
 
The CSS looks like this:
<source lang="CSS">
#container {}
#left_col  {float:left; width:49%;}
#right_col {float:right; width:49%;}
</source>
 
The CSS alo might look like this, i.e. the second (right) box would float against the first one.
<source lang="CSS">
#container {}
#left_col  {float:left; width:49%;}
#right_col {float:left; width:49%;}
</source>
Life examples:
* [http://tecfa.unige.ch/guides/css/ex/layout/css-left-right-boxes.html css-left-right-boxes.html]
* [http://tecfa.unige.ch/guides/css/ex/layout/css-left-right-boxes2.html css-left-right-boxes2.html]
 
Let's now have a look at a more real example, i.e. a page that has something on top, followed by a threee column part, follwed by a bottom. Creating such a fluid three column layout is quite simple:
* Use a hierarchical structure that defines all the big boxes: (1) top, (2) main and (3) bottom. The "main" box includes (2a) left, (2b) center and (2c) right.
* Define the ''width'' of these (2a) left, (2b) center, (2c) right columns with '''percentages''' and '''do not use''' any margins borders, or padding. If you do need margins etc., insert yet another div inside these divs.
* Use ''div id="xxx"'' for all major layout boxes, and ''div class="yyy"'' for content boxes that go inside (this way you can fill the columns with several boxes).
* After using a ''float:left'', insert ''clear:both'' in the next div if you don't want the next div to float around. E.g. we use one for the bottom div.
 
Example:
* http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-example-fluid.html
 
This page has the following layout:
[[image:css-boxes-example-fluid.jpg|thumb|800px|none|Div layout structure]]
 
The CSS is included in the example HTML page. Look at its source. Its most important elements are:
<source lang="CSS">
#top {
      border: 1px solid;
}
 
#main {
    float: left;
    margin-top: 1cm;
    margin-bottom: 1cm;
    width: 100%;
    }
 
#left_col {
    float: left;
    width:17%;
    min-width: 112px;
    /* When using borders, you have to adjust percentages
      You can uncomment these just for debuggin boxes
      */
    /* border: 1px dotted; */
}
 
.left {
    border: 1px solid;
    margin-bottom: 2px;
}
 
#text_col {
    float:left;
    width: 66%;
    min-width: 4cm;
}
 
.text {
    background-image: url(tree_silhouette.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-left:1%;
    margin-right:1%;
    border: 1px solid;
    padding: 1em;
}
#right_col {
    float: left;
    width:17%;
    min-width:2cm;
}
 
.right {
    border: 1px solid;
    border: 1px solid;
    margin-bottom: 2px;
    }
 
#bottom_padding {
    clear: both;
    border: 1px transparent;
}
 
#bottom {
    margin-top: 1cm;
    border: 1px solid;
}
</source>
 
Remarks:
* Numbers in the yellow boxes just show the order in which we defined our div's in the HTML
* This page will not correctly display in IE 9 (''clear:both'' will not clear the "main" box, but the right column ...). You can hide the borders of the offending box or include the bottom box in the central "text_col" box ...
 
Template you can use:
* http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html
 
Let's recall the principle:
* Firstly we need to organise page contents in a '''good hierarchical div structure'''. The big div boxes defining top, main/middle, left, right and bottom need to be simple ! '''No margins, no borders, no padding''' !
* In order to include margins and paddings within these major boxes, used an embedded div. These are often called '''"tubing divs"'''.
* Multi-column layout can be achieved with two tricks: Use "float:left" for each column and make sure that the total will fill the total width. The bottom element then should include a ''clear:both'', i.e. it will be told not to float around the previous element.
* Deal with various IE bugs (not covered here).


== Basic positioning ==
== Basic positioning ==

Revision as of 14:05, 16 November 2011

Draft

<pageby nominor="false" comments="false"/>

<pageby nominor="false" comments="false"/>

Learning goals
  • Understand CSS positioning features
  • Be able to create simple CSS-based layouts
Prerequisite
Concurrent
Moving on
Level and target population
  • Beginners
Teaching materials
Remarks
  • This tutorial is intended for students in a field that is technology intensive (e.g. computer applications or educational technology). For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
  • Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).
  • There are some inline examples. However, they had to be created in a away that makes them fit into a wiki page. I.e. we use inline style (something we usually don't advocate) and we also had to add extra styling properties.

Introduction

Positioning and layout with CSS is one of the most difficult chapters

  • The whole model is very complex with respect to how various properties interact
  • You will have to fight browser implementation issues (e.g. IE bugs, though IE 9 seems to do quite well now - Daniel K. Schneider 23:04, 13 November 2011 (CET))
  • See also CSS float tutorial (create simple layouts with float:left)

Basic positioning

Positioning other than using floats is done with two sets properties:

  1. Four positioning properties: left, right, top and bottom.
  2. The position property.

Each HTML element can be positioned with the left, right, top and bottom properties. Each of these properties defines a distance between this element and either the next element or the parent's border depending on the the position property settings.

Example of positioning 1cm to the right and 1cm down: 

 top: 1cm; 
 left: 1cm;

Example of positioning 1cm the left and 1cm up: 

 right: 1cm;
 bottom: 1cm;

In order to tell HTML how to position an element with respect to what, we need another property: position. The position property defines wether an element is positioned with respect to the parent element (absolute positioning) or with respect to its "normal" position (relative positioning).

Let's illustrate this with a few CSS examples:

  • Set the left edge of the element with respect to the right edge of the containing element:
div.picture {
     left:1cm;
     position:absolute;
     }
  • Move the left edge (and the whole element) X units to the left with respect to its normal position.
div.picture2 {
     left:1cm;
     position:relative;
     }
  • Do not position, i.e. ignore the left (that's the default)
div.picture3 {
    left:1cm;
    position:static;
     }

Absolute positioning will remove an element from the normal text flow, i.e. it will be inserted wherever you tell it to go. In other words, it can overlap with other elements.

Have a look at this example:

We are not done yet. The position:relative CSS declaration will have another effect. It will define a local coordinate system, i.e. all child element's absolute positionings will refer to this box and not the page as a whole.

Let's now look at two very simples examples that pull together these elements: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>CSS background demo - First principles of instruction</title>
  <style type="text/css" media="all">
#container {
	     top:2cm;
             }
#left_col  {
             border:solid thin; position:absolute; 
             top:0.5cm; left:0pt;  width:49%;
             }
#right_col {
             border:solid thin; position:absolute; 
             top:0.5cm; right:0pt; width:49%;
             }
  </style>
</head>

<body>
<div id="container">
  <div id="left_col">
  Contents of left column ....
  Contents of left column ....
  </div>

  <div id="right_col">
  Contents of right column ....
  </div>
</div>

</body>
</html>

Life example:

This example may not do what we want. Each of the two left_col and right_col boxes are positioned with repsect to the body element. In order to position them with respect to the container element, we must use the following kind of code:

The "container" element includes a position:relative; declaration. This is needed in order to create a relative positioning system for the child elements. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>CSS background demo - First principles of instruction</title>
  <style type="text/css" media="all">
    /* <![CDATA[ */

#container {
             top:2cm;
             position:relative;
             border: dotted thin;
             color: green;
             }
#top_right { 
             border:solid thin; position:absolute;
             right: 0;
             }
#left_col  {
             border:solid thin; position:absolute; 
             top:0.5cm; left:0pt;  width:49%;
             color: black;
             }
#right_col {
             border:solid thin; position:absolute; 
             top:0.5cm; right:0pt; width:49%;
             color: black;
             }

    /* ]]> */
  </style>
</head>

<body>
<div id="top_right">HOME</div>

<div id="container">
  container content that should be removed ...
  <div id="left_col">
  Contents of left column ....
  </div>

  <div id="right_col">
  Contents of right column ....
  </div>
</div>
</body>
</html>

Life example:

Some discussion:

  • As you can see, the left and right column boxes will move over the contents of the container box, i.e. absolute positioning removes a box from the normal "flow".
  • Also these two columns now position with respect to the container box, because the CSS of the container box includes the position:relative declaration. (We can't understand why the CSS folks didn't invite another keyword for that feature).
  • Finally, we added a little box on top right that is positioned with respect to the html page itself. As you can see, there is not default margin to its top and right.

Other examples / To do

I probably will translate, repair and expand an old example series (partly in french): http://tecfa.unige.ch/guides/css/ex/boxing0.html

Example layouts that you could look at:

In the meantime, please have a look at other tutorials, some of which are listed in the links section.

Links

CSS Positioning tutorials

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=CSS_positioning_tutorial&oldid=36305"