Changing the Sequence Value Type of Ordered Lists (list-style-type Property)

Preferences - Do not show ads

An ordered list is created with the <ol> tag. The <ol></ol> tag pair encloses a number of <li></li> tag pairs. Each <li></li> tag pair is a list item. For example, the following markup creates an ordered list with three items:


<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>


Each item in an ordered list begins with a sequence value. The default sequence value type is decimal (i.e. 1, 2, 3, ...). To change the sequence value type, you can make use of the list-style-type WCSS property. Six sequence value types are available. They are:

  • decimal (1, 2, 3, ...)

  • upper-alpha (A, B, C, ...)

  • lower-alpha (a, b, c, ...)

  • upper-roman (I, II, III, ...)

  • lower-roman (i, ii, iii, ...)

  • none

Specifying a numbering type other than the default decimal is very useful when you want to build an outline by nesting different ordered lists. The following XHTML MP/WAP CSS example helps you understand how to build an outline with different levels having different sequence value types by using the list-style-type WCSS property:


(listPropertiesEg2.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>WAP CSS Tutorial</title>
  </head>

  <body>
    <p>Table of Contents</p>
    <ol style="list-style-type: upper-roman">
      <li>WAP CSS Tutorial Ch1
        <ol style="list-style-type: upper-alpha">
          <li>Section A</li>
          <li>Section B</li>
        </ol>
      </li>

      <li>WAP CSS Tutorial Ch2
        <ol style="list-style-type: upper-alpha">
          <li>Section A</li>
          <li>Section B</li>
          <li>Section C</li>
        </ol>
      </li>

      <li>WAP CSS Tutorial Ch3
        <ol style="list-style-type: upper-alpha">
          <li>Section A</li>
        </ol>
      </li>
    </ol>
  </body>
</html>


This is the result of the above XHTML MP/WAP CSS example in a mobile phone browser:









Nokia Mobile Browser 4.0


Using Image Files as List Bullets (list-style-image Property)

WCSS allows mobile Internet application developers to specify their own image files as list bullets. The list-style-image WCSS property is used for such purpose.

The list-style-image WCSS property takes an absolute or relative URL of an image file. The URL should contain in the parentheses of url(). For example:


list-style-image: url(bullet.gif)


Further details about URL property values can be found in the "Common Types of Property Value: URL" section of this WAP CSS tutorial.

The following XHTML MP/WAP CSS example demonstrates how the list-style-image WCSS property can be used to set an image file as list bullets. The screen shots that follow show the result in some mobile phone browsers.


(listPropertiesEg3.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>WAP CSS Tutorial</title>
  </head>

  <body>
    <p>Table of Contents</p>
    <hr/>
    <ul style="list-style-image: url(blue_bullet.gif)">
      <li>WAP CSS Tutorial Chapter 1</li>
      <li style="list-style-image: url(red_bullet.gif)">WAP CSS Tutorial Chapter 2</li>
      <li>WAP CSS Tutorial Chapter 3</li>
    </ul>
  </body>
</html>



Nokia Mobile Browser 4.0


Openwave mobile browsers include some icons that are stored locally on a mobile phone. They can be used as list bullets. Here is an example that makes use of the icon named "rightarrow1" as list bullets:


ul {list-style-image: localsrc("rightarrow1")}


However, we will not discuss this feature in detail, since it is Openwave-specific and it does not work on non-Openwave WAP browsers.


Previous Page Page 20 of 39 Next Page

Contents at a Glance (Click Here for Full Table of Contents)
Print this Web Page | | Back to Top

Feedback Form (Expand)

What do you think about this web page?






 WCSS Tutorial Table of Contents WCSS Tutorial Contents at a Glance Preferences - Change Color Scheme Preferences - Do Not Show Ads Previous Page Next Page
Home | Acknowledgements | Advertise with Us | Contact Us / Feedback | Glossary | Preferences
© 2004-2018 | Copyright Notice | Privacy Policy | Terms of Use