Fun with lists -- Ordered vs Unordered

[mlezak]

I'm having major issues getting my lists to behave -- and it's going to make me crazy.

For my current project, I tend to have fairly complex lists -- Such as numbered lists with indented bulleted lists, interspersed with notes.

I'm sure I'm just doing something really dumb with the CSS, but I cannot figure out how to get it right.

Here's what I want:

InTheory.png

Here's what I'm getting:

InPractice.png

Here's the HTML:

html.png

And finally, all of the CSS that I'm using to try to beat this into submission:

list_css.css

Any ideas?

Thanks much (Oh -- did I mention my deadlines?)

Miriam the frustrated

[crdmerge]

First of all, any nested list styling is negated when you end the outer list before starting the inner list; ain't gonna work! The /ol ul lines ensure that the ul will not be nested inside the ol list.

The easiest way is to mostly forget about li and p classes, and just set up the structure, for standard location and table cell location (td). Then, you let the HTML and CSS protocols do their thing. For example:

Code: Select all

ul li,
ul ul li,
ul ol li,
ol li,
ol ol li,
ol ul li
{
	margin-top: 4pt;
	margin-bottom: 6pt;
	line-height: 1.2em;
}

/* line-height for lists is less in tables */

td ul li,
td ul ul li,
td ul ol li,
td ol li,
td ol ol li,
td ol ul li
{
	margin-top: 4pt;
	margin-bottom: 4pt;
	color: 595959;
	line-height: 1.1em;
}

ul
{
	list-style-type: square;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 15px;
	margin-left: 15px;
}

ul ul
{
	list-style-type: disc;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 8px;
	margin-left: 8px;
}

ul ol
{
	list-style-type: decimal;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 10px;
	margin-left: 10px;
}

ol
{
	list-style-type: decimal;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 18px;
	margin-left: 18px;
}

ol ol
{
	list-style-type: lower-alpha;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 10px;
	margin-left: 10px;
}

ol ul
{
	list-style-type: square;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 8px;
	margin-left: 8px;
}

td ul
{
	list-style-type: square;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 8px;
	margin-left: 8px;
}

td ul ul
{
	list-style-type: disc;
	padding-left: 7px;
	margin-left: 7px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

td ul ol
{
	list-style-type: decimal;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

td ol
{
	list-style-type: decimal;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

td ol ol
{
	list-style-type: lower-alpha;
	padding-left: 9px;
	margin-left: 9px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

td ol ul
{
	list-style-type: square;
	padding-left: 8px;
	margin-left: 8px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

td ol li ul li
{
	margin-top: 2px;
	padding-top: 2px;
	margin-bottom: 2px;
	padding-bottom: 2px;
}

Then, you select the entire group of potential list items and apply numbers or bullets from the toolbar button, then select the inner list items and click the Increase Indent toolbar button. Reset numbers or bullets in those inner items. If you want no numbers or bullets for an item, place your cursor at the end of the previous item, select Make Paragraph Item(s) from the List Actions drop-down, and press Enter. The yellow box indicates a non-list item.


Good luck,
Leon

[NorthEast]

I'd suggest using 'complex selectors', which aren't as hard as they sound.
Using this method, you just set the bullet/number you want to use for each level in your lists, so you don't need to use styles for the list items (li).

See: http://forums.madcapsoftware.com/viewto ... =12&t=4983

[mlezak]

Thanks to both of you --

I'm trying to figure it out, but I'm still having trouble with it.

Miriam

[LTinker68]

I'm trying to figure it out, but I'm still having trouble with it.

When you're in your numbered list and you want a sub-bullet, press Enter to get a new list item, then click the Indent icon. The indented list will appear as a numbered list, initially (it matches the parent list until you change it). To change it, click the drop-down list type icon and select a bullet list. The indented list will switch to a bullet. I think it's these last few steps that you were missing.

If you use Dave's complex selector suggestion, then you can set it up so that any time an <ul> list is inside a <ol> list, the bullet looks like a square. You could set that yourself in the GUI, but that makes the list type selection an inline style; by using complex selectors you can standardize it, make it automatic, and easily change it later, if you need to.

Any time you want a paragraph for additional info for a list item (regardless if it's a numbered or bulleted list and regardless of the indent level), click the drop-down arrow to the right of the List Actions icon (not the list type, the other icon) and select Make Paragraph Items. If you look at the show blocks area at the left of the XML Editor, you'll see that a <p> tag has been inserted inside the <li> tag. Press the Enter key to create a new paragraph that's even with the text of the parent bullet. When you want to get back to the next list item (number/bullet), either click the outdent icon or click the drop-down arrow next to the List Actions icon and this time select Make Simple Item (I think that's how it's worded).

[crdmerge]

Tip: To repair your existing lists, you're best served by unbinding them first, which reduces them to regular paragraphs. (Right click the ul and ol "blocks" and select the Unbind option.) Then follow the instructions in the last paragraph in my previous post.

Tip2: To un-number/bullet an item already there, follow the Make Paragraph Item(s) instructions, then select and drag the paragraph to the empty line at the yellow box.


Good luck,
Leon

[mlezak]

Thanks all -- I'm slowly wrapping my brain around it as I bump into the various broken lists. I guess I've spent too much time trying to make Word behave like Framemaker in Flare...

[i-tietz]

Oh and: I gather you want that first unordered list inside the list item with the number 3?
Your code says, that you have an ordered list that contains three items, and after that list is closed you have a bullet list with items ... won't work that way.

And:
I gave up parctising strange algorithms to get nested lists: I generate the lists side-by-side and then do cut & paste
either in the xml editor
or, if that doesn't work in the text editor
But I supposed that Is no alternative for you if you have tons of pages like that ... maybe you can make a prototype and make it a snippet that you insert and convert to text?

[alexhoston808]

All the post here can help me, I'm looking for many ideas that I can used for my coding.