- <li style="list-style-type: decimal;"></li>.
- <li style="list-style-type: decimal-leading-zero;"></li>.
- <li style="list-style-type: lower-roman;"></li>.
- <li style="list-style-type: upper-roman;"></li>.
- <li style="list-style-type: lower-alpha;"></li>.
- <li style="list-style-type: upper-alpha;"></li>.
- <li style="list-style-type: lower-greek;"></li>.
- <li style="list-style-type: armenian;"></li>.
- Figure 3.17: An ordered list showing eight different style types.
- The list-style-type property sets the type of list as well as the marker used.
- An ordered list element behaves just like an unordered list element if the list-style-type value is disc , circle , or square .
- Likewise, an unordered list element behaves just like an ordered list element if its list-style-type value is one of the keywords for an ordered type.
- Every list has an internal counter that keeps track of the array of list items no matter if.
- Example 3.17: HTML and CSS for displaying ordered list style types (continued).
- If the value of the list-style-type property is one of the sets of numbers or alphabets, the number or letter corresponding to the counter value is used as the marker for that list item.
- This is illustrated in Figure 3.18, which was generated with the HTML and CSS code shown in Example 3.18.
- The last list item in the second list illustrates the syntax for using the list-style-image property..
- Example 3.18: HTML and CSS for mixed list-style-type values.
- <title>Example 3.18</title>.
- <style type="text/css">.
- <li>This</li>.
- <li style="list-style-type: circle;">is</li>.
- <li style="list-style-type: lower-roman;">an</li>.
- <li style="list-style-type: square;">ordered</li>.
- <li>list</li>.
- <li style="list-style-type: decimal;">an</li>.
- <li style="list-style-type: lower-latin;">UNordered</li>.
- <li style="list-style-image: url(peace.gif);">list</li>.
- Figure 3.18: ordered and unordered lists with different list-style-type values.
- HTML elements that are part of the normal content flow in a document are said to have static positioning.
- relative The element’s position is offset by some amount from its static position.
- The notion of an element’s containing element needs some explanation..
- You often see such elements as extra toolbars at the top of the window or as feedback buttons at the sides or bottom..
- The offset amounts set by the top , right , bottom , and left properties are measured, on each respective side, from the inner edge of the border (if there’s no border, from the inner edge of the margin) to the outer edge of the ele- ment’s corresponding margin.
- Example 3.19 illustrates how this works..
- Example 3.19: HTML to demonstrate CSS positioning.
- <title>Example 3.19a</title>.
- <div id="d1">.
- <div id="d2"></div>.
- In each example, the document body consists of the same two nested divisions with borders to show their size and positioning.
- Figure 3.19a shows how the code of Example 3.19a is displayed in a typical browser..
- Figure 3.19a: Nested divisions with static positioning.
- The inner division, d2 , has its height and width properties set to 50%, which makes it a 100-by-100-pixel square occupying the top-left quadrant of its parent, which sits within the body element’s 1 em of padding..
- Saving and reloading the example displays something similar to Figure 3.19b.
- Example 3.19: HTML to demonstrate CSS positioning (continued).
- value of auto , the inner division’s top-left corner is in the same place as it was in Figure 3.19a.
- Thus, the inner division is half the height and width of the browser’s window and will grow and shrink as the window is resized.
- Figure 3.19b: A division with absolute positioning and auto offset.
- Finally, add some offset to the position of the inner division as shown in the following CSS statement, save, and reload the example again.
- Figure 3.19c shows the result that I saw using Firefox..
- Figure 3.19c: An absolutely positioned element offset with respect to the viewport.
- As shown in Figure 3.19c, the right edge of the inner division, with its solid border, is now 0 pixels from the viewport’s right edge and 0 pixels from its top..
- It is actually outside the body element’s border!.
- The HTML code shown in Example 3.20 creates a simple horizontal navi- gation menu with second-level drop menus by using relative and absolute positioning.
- Example 3.20: HTML skeleton code for creating a two-level horizontal drop menu.
- <title>Example 3.20</title>.
- list-style: none.
- li >.
- <li><a href gt;Apples</a>.
- <li><a href gt;Red Delicious</a></li>.
- <li><a href gt;Gala</a></li>.
- <li><a href gt;Macintosh</a></li>.
- </li>.
- <li><a href gt;Oranges</a>.
- <li><a href gt;Navel </a></li>.
- <li><a href gt;Valencia</a></li>.
- <li><a href gt;Blood</a></li>.
- Figure 3.20 shows how this appears in a typical browser.
- Figure 3.20: Creating a simple drop menu.
- Example 3.21 shows how to set the display property of the list items to inline so that the information is displayed more like a paragraph..
- Example 3.21: Using the display property to make a list display inline.
- <title>Example 2.21</title>.
- <ul class="post-listing">.
- <li><a href="/?p=1">What happened yesterday</a></li>.
- <li><a href="/?p=2">What's happening now</a></li>.
- <li><a href="/?p=3">What will happen tomorrow</a></li>.
- Figure 3.21 shows how this HTML appears in a typical browser..
- Figure 3.21: Showing how a list can be changed into a paragraph with the display property.
- But perhaps the most important use of the display property is to make items appear and disappear in response to a user’s action.
- The HTML code and CSS in Example 3.22 cause the first paragraph to disappear when the mouse button is held down over the “missing” link.
- Example 3.22: disappearing an element by using the display property.
- <title>Example 3.22</title>