13. WCSS List Properties

Two kinds of lists are very often used in mobile Internet sites. They are the unordered list (<ul>) and the ordered list (<ol>). WCSS contains several list properties that can help you control how a list should be presented on the screen of a mobile device.

13.1. Changing the Bullet Shape of Unordered Lists (list-style-type Property)

An unordered list is created with the <ul> tag. The <ul></ul> 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 unordered list with three items:

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

Each item in an unordered list begins with a bullet. The default bullet is a disc. To change the bullet to other shape, you need the list-style-type WCSS property. Four bullet shapes are available. They are:

The list-style-type WCSS property can be applied to both the <ul> element and the <li> element. If it is applied to an <ul> element, all <li> elements enclosed in the <ul></ul> tags will be affected; if it is applied to a <li> element, only that list item will be affected.

The following XHTML MP/WAP CSS example illustrates how to use the list-style-type WCSS property to change the bullet shape of an unordered list. It can help you understand the effect of applying the list-style-type WCSS property to <ul> elements and <li> elements.


<?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">
    <title>WAP CSS Tutorial</title>

    <p>All items in this unordered list begin with a circle bullet:</p>
    <ul style="list-style-type: circle">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>

    <p>Different items in this unordered list have a different bullet shape:</p>
      <li style="list-style-type: disc">Disc bullet</li>
      <li style="list-style-type: circle">Circle bullet</li>
      <li style="list-style-type: square">Square bullet</li>

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

Nokia Mobile Browser 4.0

Previous Page Page 19 of 39 Next Page

Feedback Form (Expand)

What do you think about this web page?