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

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:

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


13.3. 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


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.