13. WCSS List Properties

Preferences - Do not show ads

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:

  • disc

  • circle

  • square

  • none

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

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-2020 | Copyright Notice | Privacy Policy | Terms of Use