PRODUCT CATEGORIES
AZEK® Brand PVC
Balusters (Spindles)
Baseboards
Beadboard & V-Groove
Blocks, Corner/Base/Etc
Brackets
Caps, Door & Window
Casings, Door & Window
Ceiling Medallions
Columns
Corbels
Corner Guards (Beads)
Crown Mouldings
Deck Boards, Etc
Entry & Window Systems
Finials & Drops
Gable Decorations
Gallery Rails
Handrails
Headers
Lamp Posts
Medallions, Fretwork
Mouldings
Newel Posts
Niches, Wall
Pilasters
Polyurethane Products
Porches - START HERE!
Porch Flooring
Porch Posts
Rails
Roof Spires
Running Trim
Screen/Storm Doors
Shingle Siding
Shutters
Small Parts
Spandrels
Spindles (and Balusters)
Stair Parts, Interior
Sunburst Fans
Trim Boards
Vents, Louvered
Wainscot Beadboard
YellaWood® Pressure Treated
The Bargain Room!
More . . .

HELP DESK
Product Options
Ordering Info
Shipping & Returns
How To Information
Frequently Asked Questions
Gift Certificates
Our Company
Employment

Home > Lists 

Sale Banner

< Previous Page

Lists


When using html List to display text in vertical list format, remember that the list will be indented and set with blank lines above and below the list.

If the list can not stand alone without a title, use the Unordered List. However, if we need a title with no blank line between the title and the first item; create list using Bullets

If the list needs to have indented bullets, we need to create an Unordered List. This type of list should start with <ul> and end with </ul>.
The actual items on the list should start with
<li> and end with </li>

Example of a standard list of Apples, Grapes, Oranges, and Watermelon:
  • Apples
  • Grapes
  • Oranges
  • Watermelon
Notice how the List function has indented the list and added the blank lines above and below.

HTML for standard unordered list above:
<ul>
<li>Apples</li>
<li>Grapes</li>
<li>Oranges</li>
<li>Watermelon</li>
</ul>

Example below demonstrates how word wrapping will work with standard list function
  • Apples, bananas, oranges, limes, lemons, grapes, cherries, pears, figs, watermelon, melons, tomatoes, onions, green peppers, okra, cauliflower,
  • Apples
  • Apples
  • Apples
  • Apples


Below is and example of an Ordered List. In order to have the list displayed with numbers and not bullets, start list with <ol> and end with </ol>
  1. Screen Door - this is an example of how the text will wrap when using and ordered list. The text will wrap and indent itself to line up with the first letter.
  2. Bead Board
  3. Spandrels
  4. Moulding
  5. Balusters
HTML for standard ordered list above:
<ol>
<li>Screen Door - this is an example of how the text will wrap when using and ordered list. The text will wrap and indent itself to line up with the first letter.</li>
<li>Bead Board</li>
<li>Spandrels</li>
<li>Moulding</li>
<li>Balusters</li>
</ol>

Ordered List with lower cased letters.
Start with <ol type="a"> end with </ol>
  1. Screen Door - this is an example of how the text will wrap when using and ordered list. The text will wrap and indent itself to line up with the first
  2. Bead Board
  3. Spandrels


Ordered List with CAPITAL letters.
Start with <ol type="A"> end with </ol>
  1. Screen Door - this is an example of how the text will wrap when using the Directory List function
  2. Bead Board
  3. Spandrels


Ordered List with lower cased Roman Numbers.
Start with <ol type="i"> end with </ol>
  1. Screen Door - this is an example of how the text will wrap when using the Directory List function
  2. Bead Board
  3. Spandrels


Ordered List with CAPITAL Roman Numbers.
Start with <ol type="I"> end with </ol>
  1. Screen Door - this is an example of how the text will wrap when using the Directory List function
  2. Bead Board
  3. Spandrels


"DL" with "DD" Definition List w/description (puts blank line before and after list)
Screen Door - this is an example of how the text will wrap when using the Directory List function
Bead Board
Spandrels
Moulding
Balusters


"DL" with "DT" & "DD" Definition List w/term and description (puts blank line before and after list)
Screen Door
This is the definition and where it would appear for the term Screen Door and this is the way it would wrap around for longer definitions
Bead Board
Spandrels
Moulding
Balusters


"DL" with "DT" ONLY Definition List w/term (puts blank line before and after list)
Screen Door - this is an example of how the text will wrap when using this List function
Bead Board
Spandrels
Moulding
Balusters


"Dir" Directory List (puts blank line before and after list)
  • Screen Door - this is an example of how the text will wrap when using this List function
  • Bead Board
  • Spandrels
  • Moulding
  • Balusters
    • "Menu" Disc, Circle or Sqaure types (puts blank line before and after list)
  • Screen Door
  • Bead Board
  • Spandrels
  • Moulding
  • Balusters


    • Newsletter Signup

    Browse Archives

    RELATED PAGES
    Bullets
    Bullets