Nested list with left aligned “bullets”?

This might be a little "hackish," but what I would do is use the nested unordered lists, as you have them, and place the spans in there as well with classes like list-level-1 list-level-2 and so on. For JavaScript-disabled browsers, it'll display as a normal nested list. Using jQuery or another JavaScript library, convert the lists into series of div s (with two classes like list-item-number and list-item-level-1 list-item-level-2 ).

Set the margin-left for the latter to appropriate widths.

This might be a little "hackish," but what I would do is use the nested unordered lists, as you have them, and place the spans in there as well with classes like list-level-1, list-level-2, and so on. For JavaScript-disabled browsers, it'll display as a normal nested list. Using jQuery or another JavaScript library, convert the lists into series of s (with two classes like list-item-number and list-item-level-1, list-item-level-2).

Set the margin-left for the latter to appropriate widths. 1Fruits 1.1Apples 1.1.1Red Delicious 1.1.2Fuji You could even use a table to a similar effect (and superior semantic meaning, in my opinion), but I have had bad luck with tables and jQuery. For a pure HTML/CSS solution, your best option is to use a table.

Remember that tables aren't inherently bad -- they're just bad for layout.

In the end I may well have to go with tables...I am just not convinced that it is tabular data. If I am going to go with list-level-# (I mentioned that approach in my original post) to control indenting, I might as well leave it as an unordered list. I am not seeing the benefit of using javascript to convert it.

What am I missing? – Jason Mar 24 at 17:27 Using JavaScript to convert from the UL style to a presentational style allows you to think of the data as it should, conceptually, be laid out. JavaScript allows you to control the appearance of it more exactly than CSS.

– syrion Mar 24 at 17:34 That comment was poorly worded. What I should say is that using JavaScript to render the data client-side allows you to store the data in a format that represents its natural structure, while also presenting the data in a visually appealing way. It degrades gracefully, becoming a plain when a user does not have JavaScript.

– syrion Mar 24 at 17:41 I see what your saying Syrion...just not sure I agree. Either markup (when using the list-level-# class approach) is going to require CSS to get the proper width and right margin of the node number or left-margin of the text in order to get this to line up. Since I am already using CSS I think I am better off leaving it as nested lists.At this time I am not going to mark this as the answer as I was looking for a non-track-the-level approach... – Jason Mar 24 at 17:55.

To keep everything aligned correctly, I would take the spans out of normal flow by floating them and give them a negative margin. This will cause them not to affect the layout of the text unless they actually run into it. You'll need a rule for each level of the list, but that's just kind of endemic to nested lists in CSS*.

Ul { padding: 0; margin: 0; list-style-type: none; } li { margin-left:1em; padding-left: 0; } li li span { display: block; float: left; margin-left: -2em; } li li li span { margin-left: -3em; } I just tested it in the horribly broken IE 5 for Mac and it worked perfectly, so I assume newer versions should be OK, unlike solutions using pseudo-elements and generated content (which are stylistically superior but break in Explorer.

An ordered list with a bit of counters magic, no IE7 and below, though it degrades to an indented numbered list. CSS ol { counter-reset: item; padding: 0; margin: 0; margin-left: 20px! Ie7; } ul {margin: 0; padding: 0; list-style: none;} li { display: block; } ol li:before { display: inline-block; content: counters(item, ".") " "; counter-increment: item; width: 50px; } ol li li:before {width: 70px;} ol li li li:before {width: 90px;} ol li li li li:before {width: 110px;} and the HTML: Project Root Node Task 1 Travel (1.1) Travel (1.1.1) Do Work (1.1.2) Do Work (1.2) Task 2 Travel (2.1) Do Work (2.2) Task 3 Travel (3.1) Do Work (3.2) adjust the widths of the :before psuedo elements to create the indented text updated to make project node not numbered and include IE7 remargin UPDATE link to JSFiddle containing a samle of code using dls (definition lists) instead bearing in mind the need for IE7 support JSFiddle using DL.

The problem is that IE7 is my primary target for this site. The site is an internal website used at the company. – Jason Mar 25 at 15:12 hmm.. that sucks - in that case what about a dl where you manually put the numbering in the dt and use the dd for li - the top node could then be a plain heading element - I had to do this once for a large TOC and I think I coded it in GASP MSWORD so it auto generated the numbering I then searched and replaced the code to wrap the dd and dd tags – clairesuzy Mar 25 at 15:51 I've updated answer to include link to sample using dls – clairesuzy Mar 25 at 16:24.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.