ITSE 1411 Beginning Web
Page Layout Basics Chapter 7
Discussion
  1. Normal flow of a document is to display the elements in the order they appear in the source code. You can use CSS to position the order or placement of the elements as static, relative, absolute, and fixed.
    Page Flow PropertiesPurpose
    static The static value renders the element in normal flow.
    relative The relative value renders the element positioned from the position of the normal flow
    absolute The absolute value renders the element precisely in its container element.
    fixed The fixed value renders the element according to the browser's viewpoint. When the page scrolls, the element remains in the same place.

  2. The offset properties left, right, top, and bottom position the element offset within the container element.
    Offset propertyPurpose
    left The element is positioned to the left of the container element.
    right The element is positioned to the right of the container element.
    top The element is positioned at the top of the container element.
    bottom The element is positioned at the bottom of the container element.

  3. The float property uses normal flow and then shifts the container element either right or left within the container.
    Float Offset
    Property
    Purpose
    right Use right to float the element on the right of the container
    left Use left to float the element on the left of the container
    width Specify a width unless the element has an implicit width
    flow Other elements will flow around the floated element
    restrictions Only block level elements can be floated.

  4. The clear property is used to clear a float.
    Clear PropertyPurpose
    line break A line break can be used with the clear property. This extends the size of the container and any background will extend to the larger container size.
    block element A block element can be used with the clear property. This will cause that block element following the floated element to start on a new line. The container with the float element will not change size.

  5. The overflow property determines how content that is too large for the space allocated displays. The overflow property can also be used to clear a float.
    Overflow PropertyPurpose
    visible Visible is the default value for the overflow property. The element will overflow outside the space allocated.
    hidden The content is clipped to fit the space allocated for the element.
    auto The content will display and if it is too large for the space allocated, scroll bars appear to access the overflow portion of the element.
    scroll The space allocated always shows scroll bars even if the element fits in that space.

  6. Two-column page layout can be designed by floating on of the columns.
    DivPurpose
    wrapper For a sharper look, use an outer div as a wrapper for the columns. Center the wrapper using margin-left auto and margin-right auto. The wrapper is not required.
    left column Assign a fixed width and float the left column to the left.
    right column Assign a margin on the left that is greater than or equal to the width of the left column.
    header The header (if used) can be nested inside the wrapper div to go across both columns. The header can also be nested into the column div where it is to appear.

  7. Vertical Navigation with an Unordered List
    AdvantageUsage
    Accessibility Configuring navigation with a list helps to provide for accessibility. Screen reader applications offer easy keyboard access and verbal cues for information organized in lists.
    Visual Aesthetic Use CSS to eliminate the list marker. You should use a descendant selector so that other lists are not affected.

  8. Horizontal Navigation with an Unordered List
    AdvantageUsage
    Visual Aesthetic Use the display property to configure an unordered list for horizontal navigation.

  9. Pseudo-classes can be used to apply a special effect to a selector. Pseudo-class should be coded in order.
    Pseudo-ClassApplication
    link The state for an unvisited hyperlink.
    visited The state of a visited hyperlink.
    focus The state of a hyperlink that has keyboard focus.
    hover The state of a hyperlink that has a mouse over the hyperlink.
    active The state of a hyperlink when the hyperlink is clicked.

  10. Positioning with CSS
    ValuePurpose
    static Default value; the element is rendered in normal flow.
    fixed Configures the location of an element within the browser viewport; the element does not move when the page is scrolled.
    relative Configures the location of an element relative to where it would otherwise render in normal flow.
    absolute Precisely configures the location of an element outside of normal flow.

  11. CSS Sprites
    Design Consideration 
    sprite A sprite is an image file that contains multiple small graphics. Uses the background-image, background-repeat, and background-position properties to manipulate the placement of the background image.
    Download time Combining images into a single file saves download time.