Teaching the Browser to Count


Browsers can create sequentially numbered lists automatically, starting at 1 and counting by ones. We will explore this concept in greater detail later in this chapter. However, what if you need to start numbering from 6 instead of 1? Or what if you need to create two sequential lists that are nested inside of each other?

CSS allows you to set up multiple counter lists to be used with the counter value of the content property (see the previous section). The counter-reset property (Table 10.2) is used to set the initial value for the count and the counter-increment property (Table 10.3) to increase the counter by a specific value.

Table 10.2. Counter-Reset Values

VALUE

COMPATIBILITY

<counterName>

FF1, O4 CSS2

<num>

FF1, O4, CSS2

none

FF1, O4, CSS2

inherit

FF1, O4, CSS2


Table 10.3. Counter-Increment Values

VALUE

COMPATIBILITY

<counterName>

FF1, O4 CSS2

<num>

FF1, O4, CSS2

none

FF1, O4, CSS2

inherit

FF1, O4, CSS2


In this example (Figure 10.3), the list that is used to create the table of contents begins at Chapter 6 and is increased by one every time the element is used.

Figure 10.3. The chapter numbering starts at 7 instead of 1. (The counter is set to start at 6, but increments by 1 with each use.)


To use a counter:

1.

ol {...}


Set up a CSS rule for the selector that will be the parent element for your numbered list (Code 10.2). This can be the ol (ordered list) tag, but as you'll discover later in the chapter, you can turn any element into an item in a list, so you can use any parent container.

Code 10.2. The counter-reset and counter-increment properties are used with the counter()value for the content property to customize numbered lists.

[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 &amp; Ajax | Teaching the Browser to Count</title> <style type="text/css" media="screen"> h1, h2 {      color: #999;      margin: .5em 0em; } h2 { clear: both; } #navigation {      width: 240px;      margin: 0px 8px 8px 0px;      background-color: #ccc;      float: left;      font: small Arial, Helvetica, sans-serif; } ol { counter-reset: chapterNum 6; } li {      display: block;      margin-left: -30px;      padding-bottom: 4px; } li:before {      content: "Chapter " counter(chapterNum);      counter-increment: chapterNum 1;      font-weight: bold; } #navigation a {      padding: 2px 4px;      border-top: 3px solid #fff;      text-decoration: none;      display: block;      color: red; } #navigation ol a:before {      margin-left: 0px; } #navigation p {      margin: 8px;      font-weight: bold; } .author {      margin-top: 0cm;      font: bold 1em Arial, Helvetica, sans-serif } .chapterTitle {      margin-bottom: 8px;      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="#">&larr; Previous </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>Chapter VII      <span >A Mad Tea-Party</span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice26a.gif" alt="The Mad Hatter Speaks" width="220" height="246" /> The Hatter opened his eyes very wide on hearing this; but all he SAID was, 'Why is a raven  like a writing-desk?' </div> <p>There was a table set out under a tree in front of the house, and the March Hare and  the Hatter were having tea at it...</p> </div> </body></html>

2.

counter-reset: chapterNum 6;


Add the counter-reset property to your declaration block, a colon (:), and then the name of the counter identifier you are defining (this can be any name you want), a space, and then the number you want the list to start with.

3.

li:before {...}


Type a selector with the :before or :after pseudo-class (see "Working with Pseudo-Classes" in Chapter 2), which defines where the number will be positioned in relation to the selector. Generally, this will be the li selector.

4.

content: "Chapter " counter(chapterNum);


As shown in the previous section, add the content property and the counter() value, with the name of the counter identifier in the parentheses. You can also add whatever other content you want with the number, such as the text "Chapter".

5.

counter-increment: chapterNum 1;


Add the counter-increment property to the declaration block and include the name of the counter identifier, as well as a value for how much you want to increase the count for each instance. Generally this value will be 1.

Tip

  • Because the counter-reset and counter-increment properties are not supported in Internet Explorer (not even version 7), it is best not to rely on these properties for critical information.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net