Home arrow DHTML arrow Page 4 - Layouts, Margins, and Other Style Sheet Property References
DHTML

Layouts, Margins, and Other Style Sheet Property References


In this sixth part of our series on style sheet properties, you'll learn about layout properties, margins, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
October 04, 2007
TABLE OF CONTENTS:
  1. · Layouts, Margins, and Other Style Sheet Property References
  2. · Layout-grid-line
  3. · Line-break
  4. · List-style-image
  5. · Margin

print this article
SEARCH DEVARTICLES

Layouts, Margins, and Other Style Sheet Property References - List-style-image
(Page 4 of 5 )

 

list-style-image
IE 4 NN n/a Moz all Saf all Op all CSS 1

Inherited: Yes

Provides the URL for an image that is to be used as the marker for a list item. Because this property can be inherited, a setting for an individual list item can override the same property setting in its parent.

CSS Syntax

list-style-image: none | uri

Value

For uri, supply any valid full or relative URL (in the CSS format) to an image file with a MIME type that is readable by the browser.

Initial Value          none

Example

ul {list-style-image: url(images/folder.gif)}
li.file {list-style-image: url(images/doc.gif)}

Applies To

dd, dt, li, ol, and ul elements and any other element assigned the display: list-item style property.

Object Model Reference

[window.]document.getElementById("elementID").style.listStyleImage

list-style-position
IE 4 NN n/a Moz all Saf all Op all CSS 1

Inherited: Yes

Determines whether the marker is inside or outside (outdented) from the box containing the list itemís content. When the list-style-position is set to inside and the content is text, the marker appears to be part of the text block. In this case, the alignment (indent) of the list item is the same as normal, but without the outdented marker. Figure 4-5 demonstrates the effects of both settings on wrapped list item text.

CSS Syntax

list-style-position: inside | outside

Value                   Any of the constant values: inside | outside.

Initial Value        outside

Example       ul {list-style-position: inside}

Applies To

dd , dt , li , ol , and ul elements and any other element assigned the display: list-item style property.

 


Figure 4-5.  Results of list-style-position settings

Object Model Reference

[window.]document.getElementById("elementID").style.listStylePosition

list-style-type
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: Yes

Sets the kind of item marker to be displayed with each item. This property applies only if list-style-image is none (or not specified). The constant values available for this property are divided into two categories. One set is used with ul elements to present a filled disc, an empty circle, or a filled square; the other set is for ol elements, which have list items that can be marked in sequences of Arabic numerals, Roman numerals (uppercase or lowercase), or letters of the alphabet (uppercase or lowercase), and some other character
sequences of other languages if the browser and operating system supports those languages.

CSS Syntax

list-style-type: listStyleType

Value

One constant value that is relevant to the type of list container. For ul: circle | disc | square. For ol : decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha . Commonly supported ol element sequences are treated as shown in the following table.

Type

Example

decimal

1, 2, 3, ...

decimal-leading-zero

01, 02, 03, ...

lower-alpha

a, b, c, ...

lower-greek

α,β,γ, ...

lower-roman

i, ii, iii, ...

Type

Example

upper-alpha

A, B, C, ...

upper-roman

I, II, III, ...

Initial Value          disc (for first level ul ); decimal (for ol ).

Example

ul {list-style-type: circle}
li {list-style-type: upper-roman}

Applies To

dd, dt, li, ol, and ul elements and any other element assigned the display: list-item style property.

Object Model Reference

[window.]document.getElementById("elementID").style.listStyleType

Next: Margin >>

blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials