present lists and sublists in html

Question

how to organize html code (with usage ol\li ect.) to present such lists (with sublists)

1. BLA-BLA-BLA

1.1. Bla-bla-bla.
1.2. Bla-bla-bla.
1.3. Bla-bla-bla:
  lalal - balalala;
  lalal - balalala;
  lalal - lalalla.
1.4. Blal-a lalslas
1.4.1. bklalala
1.4.2. sdsdsdsdsd

note: It is not the same that I want

Titanothere

Why would you not want to use an OL for this? – Cockroach

@jlbruno: Where does it say they don't want to use <ol>? – Borrowing

I sure i need use ol but how to make "1.1.", "1.2." ?.. – Titanothere

@jlbruno: with usage ol\li ect. – Expropriate

I'm obviously losing my mind. Thought it said without. Carry on. – Cockroach

If you can give up IE, you can do this with CSS ;) – Expropriate

possible duplicate of Achieving sub numbering on ol items html – Wallas

Possible duplicate of Achieving sub numbering on ol items html – Galatians

Answer 1

ol tag means ordered list (with numbers).

ul tag means unordered one.

Overlapping ol lists allow this kind of presentation : 1.1.2

<ol>
  <li>BLA-BLA-BLA
    <ol>
      <li> Bla-bla-bla.</li>
      <li> Bla-bla-bla.</li>
      <li> Bla-bla-bla.
        <ul>
          <li>lalal - balalala;</li>
        </ul>
      </li>
    </ol>
  </li>
</ol>

Daniels

It does not work as he needs to. See this: jsfiddle.net/vinagreti/ytzduon1 – Galatians

Answer 2

Your question is answered here

Achieving sub numbering on ol items html

The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.

OL { counter-reset: item }
OL>LI { display: block }
OL>LI:before { content: counters(item, ".") " "; counter-increment: item }

Maybe you can edit your question to avoid duplicating questions. Pointing to that one I just told you.

Ewen

Answer 3

ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}

li::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";   /* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}

<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

Refer https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Html ordered list 1.1, 1.2 (Nested counters and scope) not working

Emerson

Answer 4

try this example:

    <ul class="list">
            <ol>
              <div class="white"><h3>White wines</h3></div>
              <li>Pinot Grigio ~
                   <ol>
                       <li>Cavit<span>( Venezia )$8</span><em>&nbsp;</em></li>
                       <li>Santa Margherita<span>( Valdadige) $17/$56</span><em>&nbsp;</em></li>
                       <li>Livio Felluga<span>( Alto adige ) $15/$54</span><em>&nbsp;</em></li>
                  </ol>
               </li>
            </ol>
                     <ol>
              <li>Lacryma Cristi ~
                   <ol>
                       <li>Mastroberardino<span>( Campania )$14/$50</span><em>&nbsp;</em></li>
                  </ol>
               </li>
            </ol>
               <ol>
              <li>Sauvinon Blanc ~
                     <ol>
                       <li>Fume blanc<span></span><em>&nbsp;</em></li>
                       <li>Kim crawford<span>( Malborough )$13/$42</span><em>&nbsp;</em></li>
                  </ol>
               </li>
            </ol>
           <ul>

King

Please don't put divs inside of lists. List items go inside lists. This code makes no sense. – Murat