How to achieve following list layout via markup?

Question

Possible Duplicate:
Achieving sub numbering on ol items html

I'm trying to achieve something like this by using unordered list:

1. Title

Objective: some text here...

     1.1 option1
     1.2 option2
     1.3 option3

2. Title

Objective: some text here...

     2.1 option1
     2.2 option2
     2.3 option3

I tried using list-style: decimal; but that only achieves numbers like 1, 2, 3 etc whereas I need them to have format of 1.2 , 1.3 ... 2.1 ,2.3 etc. Also is this achievable by using one unordered list or will I need to use several?

score 0 · Answer 1 · answered Feb 05 '13 at 14:51

0

I think it is impossible. See here all list-style possible types http://www.w3schools.com/Css/tryit.asp?filename=trycss_list-style-type_all

answered Feb 05 '13 at 14:51

Idrizi.A

9,819
11
47
88

YardenST · Accepted Answer · 2013-02-05T15:10:26.367

0

In one of my projects, I used this code (demo)

(I don't remember where did I get it from, but it works)

ol{ 
    counter-reset: listing ;
}
li { 
    display: block ;
}
li:before { 
    content: counters(listing, ".") " "; 
    counter-increment: listing ;
}

This method gives you controller over many other things of course: you can customize the counter as you pleased using the content property

edited Feb 05 '13 at 15:10

answered Feb 05 '13 at 14:56

YardenST

5,119
2
33
54

score 0 · Answer 3 · answered Feb 05 '13 at 15:29

i think there might be browser compatibility issues with counter property in css.

Why not use jquery?

<style type="text/css">
ul
{
    list-style-type: none;
}
</style>    

<ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
</ul>


<script>
var num = 1.0;
$( "li" ).each(function( index ) {
    var text = $(this).text();
     index++;

     list = num + (index / 10);

     $(this).html(list + " . " + text);

});
</script>

How to achieve following list layout via markup?

3 Answers3