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
|
Feedback Form (ExpandCollapse)
|
|