| Often, the text of an item in a bulleted list is longer than one line. Using the list-style-position property (Table 10.8), you can specify the position of wrapping text in relation to the bullet. Wrapped text that is indented to start below the first letter of the first line of text is called a hanging indent (Figure 10.8). Table 10.8. List-Style-Position ValuesVALUE | COMPATIBILITY |
|---|
inside | IE4, FF1, S1, O3.5, CSS1 | outside | IE4, FF1, S1, O3.5, CSS1 | inherit | FF1, S1, O4 CSS1 |
Figure 10.8. Outside is generally how bulleted lists are presented. You may want to override that by using Inside to save a little space on the page. In this example (Figure 10.9), I've set up a class called .inside that changes the bullet style position from the outside to the inside and applies it to the third link in the list. Figure 10.9. The third option in the navigation list shows how the Inside style affects an element in a list.
To define the line position for wrapped text in a list item: | | 1. | list-style-position: Type the list-style-position property name, followed by a colon (:) and one of the values presented in Step 2 (Code 10.6). Code 10.6. The list-style-position property allows you to specify how lines of text flow under the bullet.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Creating a Hanging Indent</title> <style type="text/css" media="screen"> h1, h2 { color: #999; margin: .5em 0em; } h2 { clear: both; } li { list-style-type: square; font-size: larger; margin-left: -10px; } .inside { list-style-position: inside; } #navigation { width: 200px; margin: 0px 8px 8px 0px; border: 3px solid #ccc; float: left; font: small Arial, Helvetica, sans-serif; } #navigation a { padding: 2px 4px; text-decoration: none; color: red; } #navigation p { margin: 8px; font-weight: bold; } .author { margin-top: 0cm; font: bold 1em Arial, Helvetica, sans-serif } .chapterTitle { display: block; font-size: smaller; color:black; } .dropBox { width: 228px; padding: 6px; border: 3px solid #999; margin: 0px 0px 8px 8px; float: right; font: small Arial, Helvetica, sans-serif; } </style> </head> <body> <div > <p>Flip To Chapter</p> <ol> <li><a href="#">A Mad Tea-Party</a></li> <li><a href="#">The Queen's Croquet-Ground</a></li> <li ><a href="#">The Mock Turtle's Story</a></li> <li><a href="#">The Lobster Quadrille</a></li> <li><a href="#">Who Stole The Tarts? </a></li> <li><a href="#">Alice's Evidence</a></li> </ol> <a href="#">← Previous </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER X<span > The Lobster Quadrille </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice36a.gif" height="377" width="220" alt="Alice" /> 'Change lobster's again!' yelled the Gryphon at the top of its voice.</div> <p>The Mock Turtle sighed deeply...</p> </div> </body></html> |
| 2. | inside; Type either of the following to determine how you want the text to be indented: inside, which aligns subsequent lines of wrapped text with the bullet. outside, which aligns subsequent lines of wrapped text with the first letter in the first line of the text. Outside is the default style.
|
Tip |