XHTML/CSS query

[j4]

Okay, this may be a dumb question, but is there a way in XHTML/CSS to create a nested ordered list like this:

1. a list with some stuff in:
        1.1 stuff here
        1.2 more stuff
        1.3 guess what, a nested list:
                1.3.1 stoat
                1.3.2 weasel
                1.3.3 badger
        1.4 no list here

2. another list, or whatever

etc.?

I have looked in all the usual places and they all seem to say "no, can't be done", but you guys are clever...

Update: I really do mean with the numbering as above (1, 1.1, 1.1.1 etc.) not just nested lists in general -- sorry for not being more clear. And it looks like the answer's "no" anyway. :-/

Comments

[nja.livejournal.com]

The quick answer's no. The long answer is that if browsers supported CSS2 properly, you could specify text to be inserted before each instance of an element, and you could probably use scripting to get the current list level and insert the appropriate text. In fact that might still be possible, but using JavaScript to simulate this would be very, very messy. And since there are no tabs in HTML, it would look messy as well, with a proportional font. The answer's probably to use <pre>
blocks, as above. You could knock up a Perl script to automatically generate the item numbering.

[marnameow.livejournal.com]

this:

cats

1. robot


2. bear


3. misty

people

1. marna


2. ali


3. janet


4. sean

places

1. london
   
   
   
   1. marna's house
   
   
   2. juliet's house
   
   
   
   


2. cambridge

things

books

is easy, because it's just nesting the lists.

You can change the style of the list:

cats

1. robot


2. bear


3. misty

people

1. marna


2. ali


3. janet


4. sean


With the "type" attribute - i and I for roman, a and A for lettered.

I'm not sure if you can manage more than that with css - I've never needed to, so have never gone looking. I cna have a try for you, though, if you want?

[karen2205]

Umm - is something like this what you're looking for?

If so, you can see from the source how I created it - it's all done with HTML and nesting the lists (which is a bit tricky, 'cos you've got to get the right number of closing tags so it all lines up).

[marnameow.livejournal.com]

Argh that came out all wrong and I don't know it it made sense anyway.

[huskyteer.livejournal.com]

I don't think there's a way, currently. But this sort of thing is meat and drink to the folk on CSS-D (http://www.css-discuss.org/about.html). If you're going to encounter tricky CSS thingies regularly, or even if you're just curious about CSS, it's a good list to join.

[j4.livejournal.com]

I knew what you meant, it made sense, & thank you. But I know I can do different styles of lists, what I was trying to do was the numbering exactly as in the example I gave... and it sounds from nja's answer as though I can't do that easily if at all. :-(

[j4.livejournal.com]

No no no, I know how to nest lists, I meant with the numbering actually as in the example I gave. Sorry, I should have been more clear.

[marnameow.livejournal.com]

I thought that was what you meant. My huge css reference book has gone walkies, so I can't look anything up in it - I need to get a new one, really, becuase I have been faffing on the web for answers that I can usually get in a few minutes.

[j4.livejournal.com]

It might be a useful list for me to read -- thanks. I wouldn't dare post something like this to a real CSS discussion list, though, because I should imagine they'd eat me alive without salt!

[huskyteer.livejournal.com]

I don't think they would; it's an interesting question, and they're nice people as long as you're not asking an FAQ or straying off topic. I've poked my head above the parapet a couple of times and had a lot of help - the tableless CSS redesign we'll be launching at work real soon now honest wouldn't have been possible without CSS-D and webdesign-l.

Oh, yes...

[huskyteer.livejournal.com]

...the archive and wiki are helpful too, if you don't want the traffic that comes with the list.

[mobbsy.livejournal.com]

Does this help?

http://www.w3.org/TR/REC-CSS2/generate.html#counters

[nja.livejournal.com]

There's an evil method I've just thought of, involving using list-style-image in the CSS and specifying classes for each of the list items, which you could do on-the-fly using CGI and ImageMagick, but this is getting far too messy for simple list numbering. I'd like to know a neat solution myself, documents with that sort of numbering are very common in academia.

[nja.livejournal.com]

See my first comment above - this is CSS2 and it would be very nice if browsers supported it, but they don't. There are some lovely things you could do using the :before and :after selectors, and things like "li + li + li" to select the third item in a list, but they just don't work with current browsers.

[mobbsy.livejournal.com]

Hm… googling around a bit, it does appear to be a bit of CSS2 that nothing except Opera currently supports. Ho-hum.

Actually, I'm bored enough to install no-cost version of Opera and test the sample code from W3C.
<clickity-click>

Yep, that appears to do exactly what j4 wants, using an open standard that's supported on precisely one web browser that few people use.

[marnameow.livejournal.com]

I briefly thought of that, but it's very much the Wrong Way to do it.

[j4.livejournal.com]

This, AFAICTSF, is the main problem with stylesheets -- you can theoretically do shedloads of really funky stuff with them, but the funky stuff is generally only supported on only one browser (and not always the same one, though usually Opera or NS7) if any.

Grrrr.

[mobbsy.livejournal.com]

They're getting there, but very slowly. I've no idea why it takes so long for web standards to be implemented in browsers.

Just noticed that it was CSS2 (http://www.w3.org/TR/REC-CSS2/)'s 6^th birthday yesterday. Happy belated birthday, CSS2. I hope somebody starts paying attention to you soon.

[imc.livejournal.com]

Sorry to be a boring pedant, but could you move your </pre> to the end of the list where it belongs, as this post is currently too wide for my screen. Thanks.

[kaet.livejournal.com]

According to CSS2, yes. According to the real world, no. I think someone should stand up, Kennedy style, and say that they assert that browsers will support CSS properly by the end of the decade, :). They could have a flag, if it would help.

[j4.livejournal.com]

I've fixed this and the updated page is now live.

Yours,
Janet
(as webmaster@admin... no, wait, hang on, there's something wrong here.

[huskyteer.livejournal.com]

I've just bought the O'Reilly CSS book (Two Fish). Eric Meyer has a lovely habit of spending six pages telling you a really neat CSS trick, only to note in a box at the end that it won't work in IE...

[nja.livejournal.com]

What's depressing about Lie and Bos (http://www.amazon.co.uk/exec/obidos/ASIN/0201596253/qid=1084452160/sr=1-11/ref=sr_1_2_11/202-1495803-0666246)'s book, published five years ago, is that most of what they describe wouldn't work in the "big two" browsers back then, and still doesn't.

[nja.livejournal.com]

There's the web standards project (http://www.webstandards.org/). If you have some way of filtering smugness out of web pages, you might like to turn it on before viewing that.

[imc.livejournal.com]

Much appreciated, thanks.