how to create multiple html ordered lists with different headers (edited)

Question

I would like to create an ordered list like the one below. I appreciate your help.

We first collect the following equipments:

Equipment 1: Driver's license.

Equipment 2: Credit card.

Equipment 3: Laptop.

Equipment 4: ...

Then we check the car in the following steps:

Step 1: Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.

Step 2: Check the tires for proper inflation and any obvious damage or signs of excessive wear.

Step 3: Ask someone to stand behind your car to check the lights.

Step 4: ...

[This answer](http://stackoverflow.com/questions/5568229/how-can-i-prefix-ordered-list-item-numbers-with-a-static-string-using-css/5568259#5568259) seems to be what you are looking for and [here's an example](http://jsfiddle.net/ericrasch/NUJJk/) to go along with it — james, Apr 27 '16 at 02:20
While it can achieved using CSS but again support on ie will be trouble. Why do you want it on client side. You could generate it on the server using loops? I am not able to appreciate the use case — avck, Apr 27 '16 at 02:57

score 1 · Answer 1 · answered Apr 27 '16 at 02:29

1

All you would have to do is set up an ordered list like this:

HTML:

    <ol>
      <li>Step 1: Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.</li>
      <li>Step 2: Check the tires for proper inflation and any obvious damage or signs of excessive wear.</li>
      <li>Step 3: Ask someone to stand behind your car to check the lights.</li>
      <li>Step 4: ...</li>
    </ol>

CSS:

ol {
  list-style-type: none;
  }

But make sure in your CSS (whether it is your style tag in the <head></head> section or on a separate style sheet) that you add the list-style-type: none attribute, because that will remove the numbers on your list.

answered Apr 27 '16 at 02:29

stackoverflo

36
1
5

I mean I want these counters for Step 1, Step 2, Step 3,... automatically countered. – user12586 Apr 27 '16 at 02:37
Oh. As far as I know, I don't believe that you can do that. I could be wrong, but I don't think that that is possible. Sorry :( – stackoverflo Apr 27 '16 at 02:45
how can I have the usual ordered list and this type of list in a single webpage? – user12586 Apr 27 '16 at 02:45

Michael Eugene Yuen · Accepted Answer · 2016-04-27T03:34:54.790

0

Give this a try

ol.step {
  margin-left: 0;
  counter-reset: list 0;
}

ol.step > li {
  list-style: none;
}

ol.step > li:before {
  counter-increment: list;
  content: "Step " counter(list) ": ";
  float: left;
  width: 3.5em;
}

ol.equipment {
  margin-left: 0;
  counter-reset: equipment 0;
}

ol.equipment > li {
  list-style: none;
}

ol.equipment > li:before {
  counter-increment: equipment;
  content: "Equipment " counter(equipment) ": ";
  float: left;
  width: 6em;
}

<h2>List 1</h2>
<ol class="equipment">
  <li>Driver's license.</li>
  <li>Credit card.</li>
  <li>Laptop.</li>
</ol>
<h2>List 2</h2>
<ol class="step">
  <li>I would like to create an ordered list like the one below. I appreciate your help.</li>
  <li>Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.</li>
  <li>Check the tires for proper inflation and any obvious damage or signs of excessive wear.</li>
  <li>Ask someone to stand behind your car to check the lights.</li>
</ol>

https://jsfiddle.net/3z7y7vjr/5/

edited Apr 27 '16 at 03:34

answered Apr 27 '16 at 02:59

Michael Eugene Yuen

2,470
2
17
19

It looks great. Now suppose I have two list of this kind in a single webpage. The first list has Step 1, Step 2, Step 3,... and the second list has Part 1, Part 2, Part 3,.... How should I proceed? – user12586 Apr 27 '16 at 03:01
It works the same or you can simple create two classes like: ol.list1 and ol.list2. I have updated the answer – Michael Eugene Yuen Apr 27 '16 at 03:03
I meant there are no hierarchical relation between two lists and these two lists follow one after another. – user12586 Apr 27 '16 at 03:11
check this: https://jsfiddle.net/3z7y7vjr/4/ – Michael Eugene Yuen Apr 27 '16 at 03:11
Looks great and let me check. – user12586 Apr 27 '16 at 03:21
answer updated. please check – Michael Eugene Yuen Apr 27 '16 at 03:36

how to create multiple html ordered lists with different headers (edited)

2 Answers2