Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer
    
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
add comment

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/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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