Example 5

Content surrounded by 25 pixels padding

Same except with zero padding

• In the border-box sizing, width and height designations apply to the content, padding, and border combined.
• However browsers do not yet all support it support fully.
• Latest versions of Opera, Safari, IE and Chrome do.
• Firefox needs a special coding to make it work

Sides of the box

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.

#box3 {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 25px; 
    margin-left: 100px;
    
    padding-top: 25px;
    padding-right:50px;
    padding-bottom: 10px;
    padding-left: 0px;

    border: dashed 2px #0f0;         /* all sides */
    
    border-right-color: #f00;        /* change some parts */
    border-left-style: double;
    border-left-width: 10px;
    text-align: justify;
    }

Complete example 6 page. Be sure to look at the source code.

A shortcut

Properties such as margin and padding with different values for sides of the box can be condensed into a single rule by giving them in the order: top right bottom left.

The margin and padding for the example could have been written:

#box3 {
    margin: 10px 0 25px 100px;        /* top right bottom left */
    padding: 25px  50px 10px  0px;    /* top right bottom left */

Rounded corners - border-radius (New in CSS3)

Property name	Possible values	Default
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius	length measurement | percentage	0
border-radius Shortcut	1, 2, 3, or 4 length or percentage values	0

Elliptical corners

You can make a corner elliptical by specifying two values: the first for the horizontal radius and the second for the vertical radius.

border-top-right-radius: 100px 50px;
border-top-right-radius: 50px 20px; border-top-left-radius: 50px 20px;
With the shorthand property, the horizontal and vertical radii are separated by a slash. border-radius: 60px / 40px;

Border Images - border-image (New in CSS3)

     .framed {
      ...
      background-color: #fec227;  /* bright yellow-orange */
      border-color: #fec227;      /* bright yellow-orange */
      border-style: solid;
      border-width: 55px;
      border-image: url(fancyframe.png) 55 stretch;
    }
    

Rendering boxes

The display property

All elements have a display property. Possible values include

The display value none can be useful if you are creating style sheets for different media, such as screen and print. For example, see the CS Department News page. Then do a Print Preview from the File menu. Notice that the navigation parts are hidden in the print version.

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.
• 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.
• 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 schemes

The blocks in early web pages were simply displayed in the order they occurred in the source code. 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.
• Block formatting contexts In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
• Inline formatting contexts In an inline formatting context, 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 these 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.
• Relative positioning Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it.
  • Offsetting a box in this way has no effect on the boxes that follow.
  • Subsequent boxes are given a position as if the original were not offset.
  • Relative positioning may cause boxes to overlap.

The values of the right, left, top, and bottom attributes offset the box from its normal positon. The following example is basically the same as the first float example, with relative positioning added. The graphic has been moved left and down, without affecting the position of the flowed text. The text wraps around the box where the image was before the position change, not where it is moved to.

Example: Relative positioning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu massa, sodales id malesuada vel. Praesent dictum facilisis velit vitae lacinia. Lorem ipsum dolor sit amet.

  <div style="width: 225px; 
                border: solid thin #f00;">
  Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.  
  <img style="float: left; 
              position: relative;
              left: -20px;
              top: -20px;
              width: 50px;
              height;50px;" 
       src="graphics/redblock.gif" 
       alt="" > 
 Sed arcu massa, sodales id malesuada vel.
  <img style="float: left; 
              position: relative;
              left: 40px;
              top: 30px;
              width: 50px;
              height:50px;" 
       src="graphics/yelblock.gif" 
       alt="">
 Praesent dictum facilisis velit vitae lacinia. 
 Lorem ipsum dolor sit amet. 

  </div>

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 'display:clear' property ).
• Content flows down the right side of a left-floated box and down the left side of a right-floated box.

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

<p id="ex7">

  <img id="ex7_image" 
        src="lecture/boxmodel/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>

Complete example 7 page. Be sure to look at the source code.

Absolute positioning

In absolute positioning, right, left, top, and bottom values are used as offsets from the containing block and other boxes act as if the box were not there. If the element has 'position: absolute', the containing block is established by "the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', ..."

The next example is similar to the previous one. The outer div is is given 'position: relative' so that it will be considered the containing block. Otherwise the image should have been positioned with respect to the entire window.

Example: Absolute positioning

      <div style="width: 200px; 
                    border: solid thin #f00;
                    position:relative;">
         This is a bunch of text. This is some text. 
         Here's another bit of text. Where's the wrap?
        <img style="position: absolute;
                    left: 20px;
                    top: 40px;" 
            src="graphics/yelblock.gif" 
            alt="" />
         Still more text. Yes another chunk of text.  
         The text wrap ignores the image block.
      </div>

This is a bunch of text. This is some text. Here's another bit of text. Where's the wrap? Still more text. Yes another chunk of text. The text wrap ignores the image block.

---

Fixed positioning

Fixed positioning is a subcategory of absolute positioning.

• The only difference is that right, left, top, and bottom values are used as offsets from the viewport, not the block.
• As with absolute positioning, other boxes act as if the box were not there.
• Fixed elements should NOT scroll.
• Internet Explorer will not handle position:fixed correctly unless there is an XHTML DOCTYPE declaration.

Examples of fixed positioning

The index page for IT 581 uses a fixed header. It includes the menu tabs.

The Topics Index for this class uses fixed positioning to create a permanent menu on the right.

---

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.

Example 8a: Centering a block

 

The CSS rule

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

The HTML

    <p id="ex8a">&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 8b: Centering an image

 

The CSS rule

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

The HTML

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

Complete example 8 page. Be sure to look at the source code.

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.

1. IT 581 Home
2. cs.hood.edu
3. Blackboard

Comments to: dong@hood.edu

Last Modified: 21 July 2015. 16:36