Cascading Style Sheets (CSS); Formatting Lists
By
William
Bontrager
This article will show you
how you can change the style of individual lists, all lists on your page,
and all lists on your entire web site by changing just a few things on your
style sheet.
By changing one word in your global style sheet, for example, you can change
all your web site's ordered lists style type from lower-case roman numeral
to upper-case alphabet.
If you're unfamiliar with CSS, please read the "Cascading Style Sheets (CSS);
Getting Started" and "...Learning More" articles, both linked from the archives
index page at
http://willmaster.com/possibilities/archives/
Some CSS styles render differently according to the browser. When you use
CSS, test your pages with the major browsers to become familiar with what
most of your users will see.
To work with this article, use a web page like this:
<html>
<head>
<style type="text/css">
<!--
OL {
list-style-type: decimal;
list-style-position: outside;
}
-->
</style>
</head>
<body>
<ol>
<li>One,<br>two,<br>or three.</li>
<li>Four,<br>five,<br>or six.</li>
<li>Seven,<br>eight,<br>or nine.</li>
</ol>
</body>
</html>
The breaks within the list item lines demonstrate how line wraps will appear,
without having to use long lines to see the effect.
Notice the two style properties for the ordered list tag OL. Later, we'll
introduce a third, one to use an image as item bullets.
The example could also be a UL tag; both OL and UL can be styled the same
ways.
list-style-type: square;
The first property is "list-style-type". The example specifies "decimal,"
but other values are available. Here is a list:
~~ decimal
Causes the list to be numbered with decimal
numbers; 1., 2., 3., etc. This is most browser's
default for ordered lists.
~~ lower-roman
Causes the list to be numbered with lower-case
roman numerals; i., ii., iii., etc.
~~ upper-roman
Causes the list to be numbered with upper-case
roman numerals; I., II., III., etc.
~~ lower-alpha
Causes the list to be labeled with lower-case
alphabet characters; a., b., c., etc.
~~ upper-alpha
Causes the list to be labeled with upper-case
alphabet characters; A., B., C., etc.
~~ disc (not "disk")
Causes the list to be bulleted with a disc
character, a filled circle. This is most browser's
default for unordered lists in the first level.
~~ circle
Causes the list to be bulleted with a circle
character, an outlined circle.
~~ square
Causes the list to be bulleted with a square
character, whether outlined or filled depends
on the browser. This is most browser's default for
unordered lists in second and subsequent levels.
~~ none
Causes the list to have no label or bullet. The
effect is like a left paragraph indent.
Some of the above can be specified
without the use of CSS, as an attribute in the UL or OL tag. The UL tag can
have a style="disc" attribute, for example, and the OL tag can have a style="i"
attribute for lower-case roman numerals.
The advantage of using CSS is that all lists on a page or on an entire web
site can be changed by changing only one style sheet. And, with CSS, an ordered
list can be made to use bullets and an unordered list can be made to sport
labels.
list-style-position: outside;
The second property in the example, "list-style-position", has an "outside"
value. "outside" is the default. One other value is available, "inside".
"outside" causes the hanging indent you see with most lists on web pages.
The label or bullet extends left of the content block and, if the lines wrap,
second and subsequent lines hang to the right and below the label or
bullet.
A value of "inside" causes the label or bullet to shift toward the right
and to be the first character of the first line of the content block. The
content block is still indented left, like it would be with "outside".
list-style-image: url(image.jpg);
The "list-style-image" property is not in the example above, because it replaces
the "list-style-type" property. To try it, replace
list-style-type: decimal;
with
list-style-image: url(image.jpg);
Replace the image URL between the parenthesis with your own. The URL can
be a relative URL or an absolute http://... URL. If you have reason to believe
the location of the image file will change relative to your page, or if your
page is used as a template by a CGI script, an absolute http://... URL is
preferred. With relative URLs, if the relativity changes, then the URL link
is broken.
The "list-style-image" property lets you use your own image as the bullet
of a list.
Of the browsers I've tested (Windows platform only), all align the bottom
of the image where the bottom of the bullet character would have been. The
image extends upward from there.
One browser I tested (IE 5), displayed the entire image when the image was
wider than the space the bullet character would have used. The beginning
of the text on the first line is shifted toward the right to accommodate
the image.
Opera 6 and Netscape 6.2 and 7.0, displayed only the left portion of the
image when the image was wider than the space the bullet character would
have used.
Opera 5 and Netscape 4.7 don't recognize the
"list-style-image" property, instead reverting
to the list's default label or bullet.
Because the differences in handling
of images as bullets, I recommend that the images be no wider than the space
the bullet character would have used.
Those are some of the things you can do with list labels and bullets. For
methods of implementing color and images as backgrounds for your lists, see
the two "Cascading Style Sheets (CSS); Backgrounds..." articles linked from
http://willmaster.com/possibilities/archives/
Will Bontrager
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.
Web
Development
