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:


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


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.


(listPropertiesEg1.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>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>
    </ul>

    <p>Different items in this unordered list have a different bullet shape:</p>
    <ul>
      <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>
    </ul>
  </body>
</html>


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

A button for going back to the top of this page