HTML: How to create a numerated index

Question

Possible Duplicate:
Number nested ordered lists in HTML
HTML: ordered sublists

I want to create a numerated Index:

1.0

1.1

1.1.1

1.1.2

1.1.3

1.2

2.0

2.1

2.2

What is the best way to do this? ul, ol?

<ul>
<li><span>1.0</<span>First entry</li>
<li><span>1.1</<span>Second entry</li>
</ul>

Go look at your original question you posted a bit earlier. I answered that. — ScottS, Mar 29 '12 at 18:31
@ScottS: what makes you think it's the same user behind both questions? They're very simmilar, yes; but that might just be coincidence. — David Thomas, Mar 29 '12 at 18:35
@DavidThomas--because it is the same user number (user1246987) :-) — ScottS, Mar 29 '12 at 18:36
Hi, it's not really a duplicate :) Thank you for the solution ScottS but I decided to keep the index static and to keep the index static I would like to know whats the best solution to set the numeration self? — bodokaiser, Mar 29 '12 at 19:27
If you are going to do it static, then what is there to "set the numeration" other than you typing it in (anything else would not be static)? I guess the question is, if it is static, you already have that, so what then is your real question? — ScottS, Mar 29 '12 at 21:58

score 1 · Answer 1 · answered Mar 29 '12 at 18:31

1

What you are looking for is easily made with css per counter-increment. You don't need to write the numbers yourself anymore.

Read here

answered Mar 29 '12 at 18:31

Sven Bieder

5,515
2
21
27

score 1 · Answer 2 · answered Mar 30 '12 at 11:36

Hi you can do it i give you example

css

body{
    counter-reset:section;
}
div{
    margin-top:10px;margin-left:10px;
}
.numercal {
    counter-reset:subsection;
    font-weight:bold;
}
.numercal:before{
    counter-increment:section;
    content:"Section " counter(section) ". ";
    font-style:italic;
    color:red;
}
.numercal-no:before{
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

HTML

<div>
    <p class="numercal">Demo Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
</div>


<div>
    <p class="numercal">Demo Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
</div>




<div>
    <p class="numercal">Demo Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
</div>

Live demo click here http://jsfiddle.net/rohitazad/Xwm3C/1/

Now more about this go to this site http://reference.sitepoint.com/css/counter-increment

http://www.w3.org/wiki/CSS/Properties/counter-increment

score 0 · Answer 3 · answered Mar 29 '12 at 18:29

0

You don't need the spans unless you explisitly want to mark it up as something, for styling etc... What you have done seams fine unless you need it to do something different from what it does now. If you just want it enumerated with 1, 2, 3, etc then you can use ol instead of ul.

answered Mar 29 '12 at 18:29

Andreas Hagen

2,335
2
19
34

1.0First entry
1.1Second entry
1.2Second entry

bodokaiser

Mar 29 '12 at 19:30

HTML: How to create a numerated index

3 Answers3