CSS Forum

**JeremyMiller** · 07-22-2008, 03:25 PM

How do I modify CSS to allow formatting which understands the indentation level to make numbers of the format x.y.z....?

For example,

Code:

1. Top Level.
  1.1 Secondary Level
  1.2 Another secondary level.
    1.2.1 Tertiary level

I've been trying to modify this from XHTML like this:

Code:

<ol>
  <li>Top Level.
    <ol>
      <li>Secondary Level</li>
      <li>Another secondary level.
        <ol>
          <li>Tertiary level</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

TK will be given for any help and you, of course, have my sincere appreciation.

**LadynRed** · 07-22-2008, 04:03 PM

Define the style type:
ol.decimal {list-style-type: decimal}

**JeremyMiller** · 04:38 PM

Thanks Lady. I gave that a shot with this code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
    ol.decimal {list-style-type: decimal}
    </style>
  </head>
  <body>
  <ol class="decimal">
    <li>Top Level.
      <ol class="decimal">
        <li>Secondary Level</li>
        <li>Another secondary level.
          <ol class="decimal">
            <li>Tertiary level</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
  <ol>
    <li>Top Level.
      <ol class="decimal">
        <li>Secondary Level</li>
        <li>Another secondary level.
          <ol class="decimal">
            <li>Tertiary level</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
  <ol>
    <li>Top Level.
      <ol>
        <li>Secondary Level</li>
        <li>Another secondary level.
          <ol>
            <li>Tertiary level</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
  </body>
<html>

and I'm getting (for all 3 OLs)

Code:

1. Top Level.
  1. Secondary Level 
  2. Another secondary level. 
    1. Tertiary level

Did I misunderstand?

Oh and in my first example I forgot the trailing periods -- they're fine. I'm more interested in retaining the parent number. So, the correct way should be

Code:

1. Top Level.
  1.1. Secondary Level
  1.2. Another secondary level.
    1.2.1. Tertiary level

Thanks again and, as promised, TK's coming your way.

**LadynRed** · 07-22-2008, 04:40 PM

Yes.. ordered lists like that are a problem. I've never tried this method, but you might want to give it a shot:

http://www.w3.org/TR/REC-CSS2/generate.html#counters

**JeremyMiller** · 07-22-2008, 04:41 PM

Thanks. I will and will report back here on what I figure out.

**JeremyMiller** · 07-22-2008, 04:50 PM

This did it:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
    OL { counter-reset: item }
    LI { display: block }
    LI:before { content: counters(item, ".") " "; counter-increment: item }

    </style>
  </head>
  <body>
  <ol>
    <li>Top Level.
      <ol>
        <li>Secondary Level</li>
        <li>Another secondary level.
          <ol>
            <li>Tertiary level</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Top Level.
      <ol>
        <li>Secondary Level</li>
        <li>Another secondary level.
          <ol>
            <li>Tertiary level</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
  </body>
<html>

**LadynRed** · 07-22-2008, 05:17 PM

Coolness

**vangogh** · 07-22-2008, 08:42 PM

Nice. Sorry I missed the Q&A portion of the game, but it's good to know how to do this. Thanks.