IT 280 Web Development II, Spring 2008

     #example1 {
          width: 200px; 
          padding:25px;                
          margin:10px;
          border-width: 5px;
          border-style: solid;
          border-color: blue;
          background-color: silver;
          text-align: justify;
          }
  

Notice that

• The content area is the same in both.
• The padding makes the first box larger.
• the background color applies to everything inside the border. padding does not have a separate color.
• The margins overlap - the space between the red and blue boxes is 10 pixels, not 20.
• The margins are transparent - the page bckground color shows through.

Note: Some older browsers, such as IE 5, will incorrectly generate a box that is 200x100 pixels from border to border, subtracting the padding and border rather than adding, and leaving a content area only 146 pixels wide. IE 6 gets the box model right, but still misinterprets some other specifications. you should always test in multiple browsers.

Box properties and values can be expressed in a variety of ways. Cascading rules apply, so the latest value designated is used.

Default border style is none. You must specify a border style if you want a visible border.

#example2 {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 25px; 
    margin-left: 100px;
    padding: 25px  50px 10px  0px;    /* top right bottom left */
    border: dashed 2px #0f0;         /* all sides */
    border-right-color: #f00;     
    border-left-style: double;
    border-left-width: 10px;
    text-align: justify;
    }

The display property

All elements have a display property. Possible values include

Rendering boxes

display:block

• boxes are laid out one after the other, vertically, beginning at the top of a containing block. (Think of the headings and paragraphs in a simple page.)
• The vertical distance between two sibling boxes is determined by the margin properties.
• Vertical margins between adjacent block boxes overlap, collapsing to the larger of the two. (See the first example above.)
• The default width of a block is 100%.

display:inline

• is more complex
• boxes are laid out horizontally, one after the other, beginning at the top of a containing block.
• Horizontal margins, borders, and padding are respected between the inline boxes.
• The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned.
• See the W3C documentation for an extensive discussion if you want to learn more.

display:none

• the element generates no boxes in the formatting structure. That is, effectively, the element does not exist.
• descendant elements will not generate any boxes either
• this behavior cannot be overridden.

Positioning Boxes

The blocks in early web pages were simply displayed in the order they occurred in the source code. Images were block elements separated from text. As Web use moved beyond the scientific research community, designers looked for way to reproduce the layout and appearance of printed documents. They used (misused) structural HTML elements such as tables and lists and tricks such as inivisible images (for spacing) to create layout effects. Unfortunately these techniques often make documents less accessible.

In CSS, positioning schemes provide the tools for controlling layout without destroying meaningful structure. A block may be laid out according to three positioning schemes:

• normal flow: includes block formatting of block boxes, inline formatting of inline boxes, relative povsitioning of block or inline boxes.
• float model: a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Subsequent content may flow along the side of a floated element if there is space.
• absolute positioning, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

Normal Flow

Normal flow is the default layout that is used when nothing else is specified.

Floats

The float property allows blocks to be positioned to the side, with text flowing around them. It is used for images and to create complex layouts.

• Possible values for the float property are left, right, and none.
• A floated box is shifted to the left or right on the current display line.
• Subsequent content may flow along its side (or be prohibited from doing so by the 'clear' property, discussed later ).
• Content flows down the right side of a left-floated box and down the left side of a right-floated box.

      #example3 { 
            border: solid thin #f00; 
            padding: 15px;
            width: 200px;
            float: right;
            }
      #example3_image {
            display: block; 
            float: right;
            width:50px; height:50px;
            }

<p id="example3">
  <img id="example3_image" 
        src="graphics/yelblock.gif" 
        alt="[missing image]" />
  This is a bunch of text.  This is some text. This is a another bit of text.
 This is more text. This is text. This is text. This is text.
</p>

Centering a block

The <center> tag is not now, and has never been, standard. HTML 3.2 included the align property, but it is , and has been for many years, deprecated. It is possible to center blocks using only style properties.

In addition to length and percentage values, a block's margin can have a value of 'auto'. In normal flow, if both the left and right margins are 'auto', their computed values will be equal; hence the block will be centered.

      #example4{
          width: 50%; 
          border: outset 10px; 
          margin-left: auto; 
          margin-right:auto;
          } 

    <p id="example4">&nbsp;</p> 

Centering an image

An image is by default an inline element; in order to to center it you should also set its display value to block. If necessary, also unfloat it (style rune float:none) for normal flow.

Example 5: Centering an image

 

The CSS rule

      #example5{
          display: block; 
          margin-left: auto; 
          margin-right:auto; 
          width: 50px; height: 50px;
          } 

The HTML

    <img id="example5"  
           src="graphics/yelblock.gif" 
           alt="[missing image]" /> 

The clear property

The clear property "indicates which sides of an element's box(es) may not be adjacent to an earlier floating box" (in the same block element).

Possible values for the clear property are left, right, both, and none.

The standard specifies exactly how this is to be implemented: if an element is declared clear on the right, its top border edge must be below any right-floating boxes above it.

Examples

Not just text, but images and other boxes flow around a floated box.

       img.f1 { float: right; 
                border: solid thin red; }  
       

       img.f2 { float: right;
                border: solid thin red; 
                clear: right; }  
       

Limitations

You can float an image or block to the right or left, with the content that follows it in the document wrapping around it. There is no simple way to float an image in the center with text flowing on both sides.

Making Columns

Floated divs provide a way to make columns in text without resorting to tables. The resulting layouts can be simple (two vertical columns) or more complex. Of course the more complex layouts are more challenging to create.

An example of using float.

The strategy in this example is to give one div a specific width (in this case in pixels) and float it (in this case to the left). The other column simply flows up beside the first one.

The large image is floated to the right within in the wider column.

The underlying structure is easily seen in a stripped-down example. View the source code to see how it's done.

The illusion of a different background for the left column is created with a single background image. The background is fixed in position so it does not scroll.

Week 3 Lab Practice - part 1

Your task

1. First, make a copy of this version of the wyrd index page.
2. Second, make a copy of the associated CSS file.
3. Study the HTML source code to see what basic blocks are there. Notice that many divisions have IDs.
4. Edit the CSS so that the page looks like the following image. Do not modify the HTML, only the CSS.
5. Note: the apparent texture in the page background is an effect of the screen capture - it is really just a solid color.

To be continued...

(Click for enlargement)