: Formatting HTML lists using CSS 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)

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:

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).
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.

10.02% popularity Vote Up Vote Down

: How Do I Prevent Users from Accessing a Page More Then Once? Hi I have a URL say for example http://www.xyz.com/form1.html. Now i need to hide this URL since I dont want people to keep coming

@Speyer207

Posted in: #Security #Url

1 Comments

: Any Alexa rank above 100000 is pretty unreliable and prone to change. The Website never shows any two websites as having the same Alexa rank whenever I checked! Can you tell us which URLs

@Speyer207

0 Comments

: You can use WordPress with the GD Star Rating plugin. You may have to make a post for each website you list, or create a new post type (or use a template). There is a good O'Reilly book

@Speyer207

0 Comments

: Have you checked the file ownership and read/write permissions? Usually it's either that, or you're not allowing .htaccess overrides in your httpd.conf.

@Speyer207

0 Comments

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

@Shelley277

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: www.w3.org/TR/CSS2/generate.html#propdef-counter-increment
And here's a proof of concept: jsfiddle.net/p3U9j/

10% popularity Vote Up Vote Down

@Kristi941

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.

10% popularity Vote Up Vote Down

Feed

: Formatting HTML lists using CSS 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)

More posts by @Speyer207

: How Do I Prevent Users from Accessing a Page More Then Once? Hi I have a URL say for example http://www.xyz.com/form1.html. Now i need to hide this URL since I dont want people to keep coming

: Any Alexa rank above 100000 is pretty unreliable and prone to change. The Website never shows any two websites as having the same Alexa rank whenever I checked! Can you tell us which URLs

: You can use WordPress with the GD Star Rating plugin. You may have to make a post for each website you list, or create a new post type (or use a template). There is a good O'Reilly book

: Have you checked the file ownership and read/write permissions? Usually it's either that, or you're not allowing .htaccess overrides in your httpd.conf.

Login to post a comment!

2 Comments

Back to top | Use Dark Theme