418 Chapter 23 – Cascading Style Sheets
Positioning with Style Sheets
Web Design in a Nutshell, eMatter Edition
list-style-position
Values:
inside|outside
Example:
OL { list-style-position: outside }
Applies to:
Elements with “display” property set to “list-item”
Inherited:
Yes
This property specifies whether list items should be set with a hanging indent.
Theinsidevalue makes subsequent lines of a list item wrap all the way to
the left margin of the list item (under the list item marker). Theoutside
value starts subsequent lines under the first word of the list item, creating a
hanging indent.
list-style
Values:
list-style-type|list-style-image|list-style-position
Example:
UL { list-style: list-item url(3dball.gif) disc inside }
UL UL { list-style: circle outside }
Applies to:
Elements withdisplay property set tolist-item
Inherited:
Yes
This is a shorthand property for setting thelist-styletype, image, and
position (inside, outside) in one declaration.
Positioning with Style Sheets
In August of 1997, the W3C published its working draft of specifications for style
sheet properties for positioning HTML elements on the page and in three-dimen-
sional space. This greater control over object placement can be used for more
tightly designed static page layout as well as for creating and tracking motion
effects with DHTML.
This effort was initiated by Netscape and Microsoft, who began supporting some
positioning properties in their 4.0 version browsers. The positioning concepts and
properties were picked up and developed further in the CSS, Level 2 specifica-
tion, which was released in May of 1998.
Style sheet positioning is a rich and complex topic that is beyond the scope of this
chapter, however, this section aims to introduce some basic positioning concepts.