Jump to content

two hierarchical nested lists linked together


caruga
 Share

Recommended Posts

I'm wondering if css supports a solution to this problem, or whether I need something like javascript (and if I do need js, whether someone can point me to a link that will get me started on the solution I'm looking for). I'd like to automatically have the members of a list (table of contents) be links to a bookmark within the page, presumably using the number as the name of the anchor. This would mate together content and chapter headings. e.g. there would be a TOC like so: 1. blah2. blah2.1. blah blah2.2. blah blah2.2.1. blah blah blah And when I build the list with <ol> and <li> it would automatically insert the metadata around it: <a href="#2.1.">blah blah</a> and down below, a separate list under a separate class that also uses counters would exist, and would have <a name="2.1">blah blah</a>

Link to comment
Share on other sites

Hmm, looks like I will need js from what i've been reading. Right now I'm more bewildered about merely getting the counters to work. It seems you can't target specific instances of a counter that share the same identifier. If I have: .digest ol { counter-reset: n; } .digest li:before { counter-increment: n; content: counters(n,'.')'. '; } .digest li { display: block; } and: <ol class="digest"> <li>test 1</li> <li>test 2</li> <ol> <li>test 3</li> <li>test 4</li> </ol> <ol> <li>test 5</li> <li>test 6</li> </ol> I get:1. test 12. test 22.1. test 32.2. test 42.1. test 52.2. test 6 If I increment inside ol it skews all the numbers. What I want is: 1.2.2.1.2.2.3.1.3.2. EDIT: seems i'm forced to nest within an ol within the li element.

Edited by caruga
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...