1

I'm trying to recreate list in HTML which has clauses and subclauses like this:

1. Main Clause
  (a) Sub clause
  (b) Sub clause
2. Another main clause
  (a) Sub clause

The problems I'm running into are:

  1. If I use the existing HTML elements (ol and li) there doesn't seem to be a list style for (a) - I can have a. b. c. or A. B. C. but not (a) (b) (c).

  2. If I don't use the existing HTML elements and start using span tags, then if a subclause runs beyond the end of the line it appears underneath the clause number, rather than being indented.

Like so:

(a) Very long subclause
which goes over one line

when what I really want is the behaviour from lists, which is:

(a) Very long subclause
    which goes over one line

Is there any way to get round these two problems at the same time? I'd prefer to use semantic HTML and CSS for styling, but having the clauses spaced correctly is more important than doing things 'the right way'.

I may need subsubclauses at some point (i.e. (i), (ii) etc.), so I can't assume that (a) will be the maximum clause depth.

2

Your second problem can be solved with CSS using list-style-position: outside;

ul, ol
{
    list-style-position: outside;
}

Result:

1. text that is long...and
   wraps around

Your first problem cannot be solved with CSS or HTML as there is no official (a), (b), etc option for ordered lists. So if you must have it formated like that you'll have to get creative and try things like using <dl> and dynamically adding your own bullet items.

  • I do have to have it formatted as (a), (b) etc. as some of the clauses refer to each other (e.g. 1(a)). The problem is that if I use list-style-type: none and then do: <li>(a) Clause</li> the wrap-around text ends up below the (a) rather than being indented. – pwaring Mar 29 '11 at 15:13
0

You can generate content using before and then combine it with counter-reset and counter-increment to generate a customized ordered list. Then by using padding on the generated content, you can finally achieve the effect you want only with CSS.

Here's the reference for how counters work on CSS: http://www.w3.org/TR/CSS2/generate.html#propdef-counter-increment

And here's a proof of concept: http://jsfiddle.net/p3U9j/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.