Mixing numbers and bullets gives unpredictable results

[Cheryl B]

I am getting unpredictable results when mixing numbers and bullets. Here is an example. (This example was done in a project that used only the styles.css that comes with Flare. No customization has been done.)

1. Start with this list.

example 1.png

2. Select line six and click the bullet icon.
3. Line seven's numbering has changed.

example 3.png

4. Click line seven and then choose to continue sequence.

example 4.png

5. Now the numbering is worse.

example 5.png

6. Click line seven again and force the item number to be 6.[

example 6.png

Now it looks ok, but if you insert an item in the list, line seven's numbering does not change. (I can't show you because I've maxed the attachments.)

Is there a better way to create lists that mix numbers, bullets, and indented text?

[LTinker68]

Method 1

2. Select line six and click the bullet icon.

After this step, click the drop-down arrow next to the bullet icon and select Numbered list or whatever number format you want. You'll end up with
1. One
2. two
3. three
4. four
5. five
1. six
1. seven

At that point, you can either do the step you did to continue the list, or you can right-click on the <ol> block in the show blocks area on the left side of the XML Editor and select Merge with Previous List. You'll need to do that with both steps six and seven.

Method 2
Go to the end of step list item 5, press Enter to get list item 6, then drag the text from paragraph six to the new list item. You can then merge step seven with the previous list or do the drag option again. I generally use this process.

[Cheryl B]

That's not exactly what I want. I want the list to look like this. Right now, if I use the "Item Number" function, I can force the list to look like this.

start.png

Then, If I need to insert a step, I want the list to automatically keep the numbers synced. right now, if I use "Item Number" to force the number, then the numbers are not automatically updated.

end.png

[LTinker68]

I'm sorry, I'm still not sure what you're trying to do. Are you trying to insert a second-level list under a step (top level is numbers, second level is bullets), or are you trying to insert a paragraph under (but part of) an item?

If you're trying to do a second-level list, then simply click the indent icon on the item you want indented. Then click the drop-down arrow next to the bullet icon so you can select a different bullet or number type, because by default it will insert a second-level list of the same bullet/number type as the parent list.

If you're trying to insert a paragraph, then go to the end of a list item, click the drop-down arrow next to the List Actions icon (three to the right of the bullets icon), and select Make Paragraph Item(s).

Whichever of the methods you're trying to do, the numbering of the parent list will automatically maintain its sequence.

[lacastle]

do the explanations in this topic help?
http://forums.madcapsoftware.com/viewto ... &sk=t&sd=a

[Cheryl B]

Thanks everybody. I have used some of these suggestions and the whole bullet/number thing is starting to fall into place. However, I don't understand Complex Selectors. When do Complex Selectors really solve formatting problems? Is there any tutorial online to help me get my head around that topic?

thanks.

[crdmerge]

Here is the unnumbered list selector and two complex selectors that work with it:

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

[Outer unnumbered list with an inner unnumbered list]
ul ul
{
list-style-type: disc;
margin-top: 0px;
padding-top: 0px;
padding-left: 8px;
margin-left: 8px;
}

[Outer unnumbered list with an inner numbered list]
ul ol
{
list-style-type: decimal;
margin-top: 0px;
padding-top: 0px;
padding-left: 10px;
margin-left: 10px;
}

No "list styles" are necessary (p.FirstUnnumberedListItem, p.LastNumberedListItem, etc.); just select the entire (outer) list and click the appropriate list toolbar button. After setting the entire list, simply select the 2nd-level list items and click the Indent button. If the 2nd-level list needs to be numbered, for example, select it and click the arrow on the List button and select Numbered List. We also have separate td ul, td ul ul, and td ul ol selectors for setting less indent in tables, and, of course, a whole set of ol, ol ol, ol ul selectors for the numbered lists. Although we limit our lists to two levels, you could certainly add levels beyond that, if you wish.

This system simply takes advantage of the inherent formatting protocols between HTML and CSS; if ul is followed by ol, assign numbers with these margin/padding settings, this color, this background color, etc; if this structure is inside a table cell, use these settings instead; and so on. The writer does not have to separately assign styles (and re-assign them as the list gets modified). Then, of course, Flare makes it easy to add collateral content (no bullet, no number) with its "Make paragraph item" option in the List Actions list.

Hint: if you run into a situation like in your initial posts, go with the nuclear option: unbind all list assignments until everything is back to standard paragraphs. Starting from scratch, then, begin with the outer list assignment and then any inner list assignments.


Good luck,
Leon

[LTinker68]

When do Complex Selectors really solve formatting problems?

Another common one is a paragraph inside a table. For example, say you have your base paragraph tag set to have a bottom margin of 6px or 6pt to give some separation from any following elements, like another paragraph. If you use a paragraph tag in a table cell, it will still have that bottom margin, but you don't want that bottom margin inside a table because the table cell's border does enough to separate the content. So you have two options. Option 1, you create a new paragraph class with a bottom margin of 0 and apply that paragraph class to each paragraph in each table cell in each table in the project. Or, Option 2, you create a complex selector that essentially says that a paragraph inside a table cell shouldn't have a bottom margin but everywhere else it would have a bottom margin. So the complex selector does automatically what you'd otherwise have to do manually. In the stylesheet file, the styles would appear something similar to what's shown below (other attributes removed for clarity):

Code: Select all

p
{
   margin-bottom:6px;
}

td p
{
   margin-bottom:0;
}

A tag then space then another tag is the format for this type of complex selector (there are other complex selector formats), and this is probably the format you'd use most often. So the first block above says that paragraphs should have a bottom margin of 6px. The second block is the complex selector and says that paragraphs should have a bottom margin of 0 when the paragraph is contained inside a td tag. If that paragraph is inside a list inside a table, then this complex selector (this format rather) wouldn't work -- it's only for when the paragraph tag is the direct child of the td tag.

Unfortunately, you (still) can't create complex selectors via the Stylesheet Editor. You need to open the stylesheet file in the Internal Text Editor and either type the whole complex selector or the frame of the complex selector (e.g., td p { }). Once you create that frame, you can edit that complex selector's attributes in the Stylesheet Editor just as you would any other style.

Hope that helps. If you Google css and "complex selectors" then you'll find lots of sites (including http://www.w3.org) that explain complex selectors.

[Cheryl B]

Ah. Now I see. Thank you, everone!