CODEWITHSUNDEEP
htmlcss
Ekin
Ekin

Reputation: 69

Auto generate numbering list in HTML using CSS #Part II

In my previous question, I've been using CSS to create auto generated list numbering for <li></li> tags. In another task, I need to create another list that will have title in between of the list as picture shown below.

Example

Above example can be achieve using below code

HTML

<ol class="main">
    <span class="title">Title</span>
    <li>
        Content
    </li>
    <li>
        Content
    </li>
    <span class="title">Title</span>
    <li>
        Content
    </li>
</ol>

CSS

ul {counter-reset:section}
li {margin:15px 0;text-align:justify}
li:before {counter-increment:section;content:""}
.main {list-style-position:inside;list-style-type:none;padding:0}
.main span {font-weight:700;text-decoration:underline}
.inner {padding:0}
.inner ul {counter-reset:section}
.inner ul > li:before {content:""}
ul {list-style-type:lower-alpha}

However, this code doesn't work in some browser like Opera. This is because in HTML 5, <span></span> tag can't be nested within element <ol></ol>.

jsFiddle that work in Firefox, Chrome and Internet Explorer.

Upvotes: 1

Views: 851

Answers (2)

mg007
mg007

Reputation: 2978

Here's a pure CSS version which works in Chrome 26 and FF 20 (Haven't tested on other browsers). The change from your earlier question is that you don't need to reset your counter every time.

/* Don't reset every time!!! */
/* ol.inner {counter-reset:section;} */

ol.inner li {counter-increment:section;}
ol.inner li:before {content: counters(section,"") ". ";}

Upvotes: 1

Duncan Beattie
Duncan Beattie

Reputation: 2366

You can nest the <ol> inside an unordered list and assign a start position for each:

<ul class="main">
  <li>Title Of Section
      <ol>
          <li>Content 1</li>
      </ol>
  </li>
  <li>Title Of Section
      <ol start="2">
          <li>Content 1</li>
          <li>Content 2</li>
          <li>Content 3</li>
      </ol>
  </li>
</ul>

I put together a quick fiddle which uses jquery to automatically update the atart positions of each ordered list.

Upvotes: 0

Related Questions