Pro HTML5 and CSS3 Design Patterns

(avery) #1
C H A P T E R 13

Blocks


The main purpose of this chapter is to show various ways you can emphasize document structure by
styling blocks. Many design patterns in other chapters apply to blocks, but this chapter contains patterns
specific to styling block elements to reveal document structure.


Chapter Outline



  • Structural Meaning shows how blocks create hierarchical and sequential
    structure.

  • Visual Structure shows how to style blocks to bring out the document structure.

  • Section shows how to organize your document into sections for easy styling and
    for better structural meaning for search engines and document processors.

  • Lists shows many ways to create lists and list markers.

  • Background Bulleted shows how to add bullets to a list using background images.

  • Inlined shows how to render a block element as if it were an inline element. This
    allows blocks to be rendered from left to right and to wrap across lines.

  • Collapsed Margins shows how to collapse and uncollapse vertical margins
    between block elements.

  • Run-In shows how to run a block into the following sibling block as if it were an
    inline element within the following block. Run-in headings save space and are
    very attractive.

  • Horizontal Rule shows how to use and style a horizontal rule in spite of the
    problems caused by Internet Explorer 7, which refuses to remove its built-in styles
    from
    .

  • Block Spacer shows how to insert a precise amount of vertical space between
    selective blocks without having to adjust margins individually.

  • Block Space Remover shows how to remove a precise amount of vertical space
    between selective blocks without having to adjust margins individually.

  • Left Marginal shows how to extract headings, notes, alerts, and images from the
    normal flow and move them into a wide left margin.

  • Right Marginal works like Left Marginal except items are moved to the right.

Free download pdf