Categories


Using HTML Lists - Part 3

We’ve discussed how lists are a quick way to present information in an easy to read format.  However,  there is much to know about using them.  In our previous posts on lists we’ve addressed the following . . .

  Part 1 . . .

  • Defined the types of lists – Ordered | Unordered
  • Shown how to change  markers
  • Listed 7 Helpful Tips

and in Part 2 we discussed . . .

  • How to use your own custom markers
  • How to set up Definition Lists

In this post we’ll cover how to control where the markers hang as well as how to control the numbering of an ordered list. 

How to Control Where Markers Hang

By default all lists are indented from the left margin. However, you can have your markers either begin halfway to the right of the starting point or flush with the rest of the text. This last ‘hang’ is referred to as ‘inside’.

To control where your markers hang, you will need to include this bit of code for the desired list or list item: list-style-position:place – where place denotes the position.

If you want the markers to begin halfway to the right of the starting point, you would use ‘inside‘ for place. However, if you wanted the markers to display to the left of the list item text you would use ‘outside‘. You’ll remember from Using HTML Lists – Part 1 that this information goes in the style sheet rule portion of the HTML document (Read more in Part 1).

Sample code for “inside hang” for ‘style sheet rule’:

li.new{

list-style-image:url(http://yourdomain.com/image.gif);

list-style-position:inside

}

Note:   In our sample, in addition to the position variable, there is also a custom marker –  list-style-image:url(http://yourdomain.com/image.gif   –    See  HTML Lists Part 2

Because there are now two variables defined,  we’ve placed a semi-colon – ; – after the  image URL location.  By doing this both variables are included in the {  }  and the code is marked closed  after the line of code defining the position.

The code on the left side of  the graphic below shows how the HTML might look in the tag of the document .  The image on the right side of the graphic shows how it would display.

How to Start List Numbering Other Than ‘ 1 ‘

Starting a list with the number 1 is the default setting, however, there may be times when you want to start your list with another number. To change the initial value of the entire list’s numbering scheme you would place start=”n” within the

    tag – where “n” represents the beginning value for that list.

    For example, if we wanted our list to start with the number 4 our code for that ordered list would look like…

    1. Line of text
    2. Line of text

    How to Change Line Numbering

    In addition to changing the starting number of your ordered list, you can also change the numbers of a specific line

  1. if you so desire.

    To do this use, you would place value=”n” within the

  2. ….
  3. tags where “n” represents the number for that line. The value is always specified as numerical and any following list items will be renumbered accordingly.

    For our example, we’re wanting to start our ordered list with Step 2, omit steps 3 and 4, and then continue with steps 5 and 6. The left side of the  graphic below shows the HTML code used in the of the document –   while the right side shows how it might look.  

     

    Note:   That while we assigned a value of “5” for Step 5, we did not have to assign any values for the following step. You do not need to include any “value=n” in the

  4. code for any following list entries so long as the steps that follow are in the correct continuing numerical sequence. However, if you were going to skip additional steps, you would need to use the
  5. to control the numbering of the sequence.

    Conclusion

    Using lists is an easy way to present information, how-to instructions or directions. You can even nest lists to create a unique presentation or outline format.   Hopefully we’ve give you a good, basic introduction to lists and how to use them.  But if you would like to learn more about the advanced features available using HTML lists get the Elizabeth Castro HTML for the World Wide Web Quickstart Guide from Amazon by visiting this link:  Get My HTML Quickstart Guide Now  – this book uses  pictures rather than lengthy explanations making it very easy to use and understand.   


Comments are closed.