11<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22<html lang="en">
3- <!-- $Id: lists.src,v 1.16 1998-01-14 17:46:34 ijacobs Exp $ -->
3+ <!-- $Id: lists.src,v 1.17 1998-01-15 17:09:28 ijacobs Exp $ -->
44<HEAD>
55<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66<TITLE>Lists</TITLE>
@@ -30,17 +30,24 @@ it's possible to specify different marker types depending on the depth
3030of embedded lists.
3131</ul>
3232
33- <P>Elements with a <span class="propinst-display">'display'</span>
34- property value of 'list-item' are formatted visually like other block-level elements, only each list item is preceded by a marker. The type
35- of marker and its placement is determined by the <a
36- href="#list-props">list properties</a> described below.
33+ <P>An element with a <span class="propinst-display">'display'</span>
34+ property value of 'list-item' generates two boxes: a <a
35+ href="visuren.html#block-level">block-level</a> box that contains its
36+ content and an inline box that contains a marker. Only the content box
37+ is involved with positioning (e.g, in the <a
38+ href="visuren.html#normal-flow">normal flow</a>). The position of the
39+ marker box (see the <span
40+ class="propinst-list-style-position">'list-style-position'</span>
41+ property) does not affect the position of the content box. CSS
42+ properties allow authors to specify the marker type (image, glyph, or
43+ number) and its position with respect to the content box (outside the
44+ content or at the beginning of content).
3745
3846<div class="html-example"><P>
39- The following rule applies to list item (LI) elements in HTML. The
40- <span class="propinst-display">'display'</span> property declares
41- the presentation of the LI element to be a "list-item", and the <span
42- class="propinst-list-style">'list-style'</span> property means that no
43- marker will appear next to list items:
47+ The declaration in the following HTML program causes LI elements to
48+ generated 'list-item' boxes. The <span
49+ class="propinst-list-style">'list-style'</span> value 'none' suppresses
50+ preceding markers.
4451
4552<PRE>
4653<HTML>
@@ -64,8 +71,8 @@ marker will appear next to list items:
6471<P><img src="./images/list-none.gif" alt="A list with no markers."></p>
6572
6673<P>The illustration shows the relationship between the current left
67- margin and the margins and padding of the list element (UL) and the
68- list items (LI). (The lines delimiting the margins and padding are not
74+ margin and the margins and padding of the list (UL) box and the list
75+ item (LI) boxes . (The lines delimiting the margins and padding are not
6976rendered).
7077
7178<P>If we change the <span
@@ -76,8 +83,9 @@ LI { display: list-item; list-style: square }
7683</PRE>
7784
7885<P> each list item will be preceded by a small square. However, the
79- placement of the square does not affect the block formatting of the
80- list item content:</P>
86+ placement of the square does not affect the <a
87+ href="visuren.html#block-formatting">block formatting</a> of the list
88+ item box:</P>
8189
8290<p><img src="./images/list-square.gif" alt="A list with square markers."></p>
8391</div>
@@ -103,12 +111,12 @@ and <span class="propinst-list-style">'list-style'</span>
103111
104112<!-- #include src=properties/list-style-type.srb -->
105113
106- <P> This property is used to determine the appearance of the
107- list item marker if < span
108- class="propinst-list-style-image">'list-style-image'</span> is 'none'
109- or if the image pointed to by the URI cannot be displayed.
114+ <P> This property specifies appearance of the list item marker if
115+ <span class="propinst-list-style-image">'list-style-image'</ span> has
116+ the value 'none' or if the image pointed to by the URI cannot be
117+ displayed.
110118
111- <P>The possible values have the following meanings:
119+ <P>Values have the following meanings:</p>
112120<dl>
113121<dt><strong>disc</strong>
114122<dd>A disc (exact presentation is UA-dependent)
@@ -161,7 +169,7 @@ iii This is the third item.
161169<!-- #include src=properties/list-style-image.srb -->
162170
163171<P> This property sets the image that will be used as the list item
164- marker. When the image is available it will replace the marker set
172+ marker. When the image is available, it will replace the marker set
165173with the <span
166174class="propinst-list-style-type">'list-style-type'</span> marker.
167175
@@ -177,24 +185,19 @@ item to be the image "ellipse.png".
177185
178186<!-- #include src=properties/list-style-position.srb -->
179187
180- <P> The value of <span
181- class="propinst-list-style-position">'list-style-position'</span>
182- determines how the list item marker is drawn with regard to the
183- content.
188+ <P> This property specifies the position of the marker
189+ box with respect to line item content box. Values have the
190+ following meanings:</p>
184191
185192<dl>
186193<dt><strong>outside</strong>
187194<dd>The list item marker is outside the box that is generated for the
188195list item.
189196<dt><strong>inside</strong>
190- <dd>The list item marker is the first part of the box that is generated for the
191- list item. The list item's contents flow after the marker.
197+ <dd>The list item marker is the first inline box generated for the
198+ list item. The list item's contents flow after the marker box .
192199</dl>
193200
194- <P>In either case, the placement of the marker does not affect
195- the relationship between the list item's box and the pertinent margin
196- (depending on script direction).
197-
198201<div class="html-example"><P>
199202For example:
200203
@@ -308,7 +311,7 @@ UL elements to LI elements. This is the recommended way to
308311specify list style information.
309312
310313<div class="example"><P>
311- <P> A URI value can be combined with any other value, as in:
314+ <P> A URI value may be combined with any other value, as in:
312315
313316<PRE>
314317 UL { list-style: url(http://png.com/ellipse.png) disc }
0 commit comments