List continue option

[Christina]

I have a numbered list, 1, 2, 3, 4, 5, and so on. Sometimes I need to add a paragraph or an image after the basic text of step one. Like this:

2. Deselect the XYZ checkbox.

The ABC window displays.

<image of ABC window>


Now, in Windows, if I have a numbered item such as I do here, with step 2, and I have a "result" sentence and an "image" all I have to do is apply the List Continue tag to the "result" and the "image" lines, and the two things, both the result and the image, will line up properly, be the appropriate distance apart, and look very nice and be very readable.

However, in all my searched, I cannot find something that easy in Flare. There is the right click option to select "Make Paragraph Items" but the spancing is wonky, it adds a "p" tag to the list item, which puts the number on a higher row than the text, and also, it's just a whole lot of work. Isn't there a simpler method? Shoudn't this be build in somehow to Flare, since technical writing often involves "results" and "examples" and "Images" that go inside of a list item.

I've poked around and have noticed that I can right click on the P tag and "Unbind" something, which puts the number on the same line as the text but holy cow, that's like so many different steps to get a very common effect.

What am I overlooking here? Is there something different I should be doing to add images and examples and results within a numbered list item?

[Nita Beck]

The "Make paragraph item(s)" IS the simple method you are seeking. With that method, you can then put anything else within an enclosing li. That's how many of us put notes and warnings, results, screenshots, and even tables under a numbered step. It's all perfectly valid HTML.

I suspect that the spacing issues you're seeing has to do with the margin, padding, line-height, and similar attributes in your stylesheet for your p styles, ol & ul styles, and maybe even your li styles. That's where you need to tweak things. Then once you've got it looking good, all future similar structures should look good.

Oh, and I would make sure that there's no inline formatting within your list items. That too could throw off the spacing.

This Flare Help topic explains more: http://webhelp.madcapsoftware.com/flare ... _Items.htm

[Christina]

I'm attempting to create a topic from scratch. While I'm doing that, I have a question.

Do I "Make Paragraph Item" from a numbered list item? That is, turn a numbered list item into a continuing paragraph.

Or, do I put numbers on the lines that shoudl be numbered list items, leaving the ones that will become "paragraph" items that continue from the numbered list item?

In short, what is the sequence of steps to make this work?

At the moment, when I "Make Paragraph Item" my text turns into a numbered item where the number is on one line and the text is on the other. It looks like the image I've attached to my reply.

[Christina]

So I tried this. I make a collection of numbered list items.
I select the result for a numbered step, select the <i> to the left of it.
Right click and select Make Paragaph.

What should happen is that the numbered list item turns into an un-numbered paragraph item evenly spaced below the preceding step.

But when I do it, all that happens is that my list item, instead of turning into a paragraph item, it turns into a numbered item where the number is on one row and the text is on another. I've taken a little movie of it, which the system won't allow me to upload, alas.

[Christina]

So Nita kindly went over the procedure for how to make a list item with a result/example/screen capture following, tucked within the numbered list item.

First, make your list items; all items should be a numbered list item.

Then, put your cursor in front of the item that you would like to be a result within the previous numbered list item.

Press the Backspace key. This puts the item together with the preceeding numbered list item. It tucks it up close.

Press Ctrl-SemiColon.

Press Enter.

The item moves to the next line, unnumbered, but connected with the previous numbered list item. I've attached an image.

Currently, the number and the text are on different lines, but only in the Editor. When I view a preview, the number and the text line up appropriately. There may be something in my style sheet that is doing this, but I will have to worry about that later.

[Nita Beck]

I pointed out to Christina that she needed to think of her list's structure (the <ol> or <ul> blocks, the <li> blocks, and the <p> blocks within <li> blocks) separately from how the bits in the list are formatted, which is controlled by her stylesheet. I suspect that the misalignment of the step numbers is coming from her stylesheet. Also, since the numbers do align in her output, she can get away with ignoring the misalignment while editing.

Maybe someone here has an immediate idea where she should look in her CSS to address the misalignment issue. We peeked under the hood of her stylesheet (that is, we opened it in the Internal Text Editor), but nothing jumped out.

[Paulie]

Hi Nita/Christina,

I'd suggest adding the following to the style sheet:

Code: Select all

li p:first-child {
margin-top: 0;
padding-top:0;
display: inline;
}

This should adjust the first paragraph tag inside the list tag, but leave all other paragraph tags unaffected.

Note: The only way that I was able to reproduce the initial problem was by adding a non-breaking space between the <li> tag and the first <p> tag.

Code: Select all

<ol>
<li> <p>Paragraph:</p>
<p>Paragraph</p>
</li>
</ol>

The display: inline; setting is attempting to overcome this issue. If non-breaking spaces are causing this issue then a simple solution would be to delete the non-breaking space, or to unbind the first paragraph.

[SteveS]

I pointed out to Christina that she needed to think of her list's structure (the <ol> or <ul> blocks, the <li> blocks, and the <p> blocks within <li> blocks) separately from how the bits in the list are formatted, which is controlled by her stylesheet. I suspect that the misalignment of the step numbers is coming from her stylesheet. Also, since the numbers do align in her output, she can get away with ignoring the misalignment while editing.

Maybe someone here has an immediate idea where she should look in her CSS to address the misalignment issue. We peeked under the hood of her stylesheet (that is, we opened it in the Internal Text Editor), but nothing jumped out.

Shouldn't the paragraph tags be outside of the list items?

Code: Select all

<ol>
<li>
</li>
<p>
</p>
<li>
</li>
</ol>

[Nita Beck]

Shouldn't the paragraph tags be outside of the list items?

No. Say she wanted step 1 to have an instruction followed by paragraph containing an image, followed by another paragraph of explanation, after which would come step 2. The code would be:

Code: Select all

<ol>
   <li>
      <p>
      </p>
      <p>
         <img />
      </p>
      <p>
      </p>
   </li>
   <li>
   </li>
</ol>

[SteveS]

Shouldn't the paragraph tags be outside of the list items?

No. Say she wanted step 1 to have an instruction followed by paragraph containing an image, followed by another paragraph of explanation, after which would come step 2. The code would be:

Code: Select all

<ol>
   <li>
      <p>
      </p>
      <p>
         <img />
      </p>
      <p>
      </p>
   </li>
   <li>
   </li>
</ol>

Yes, but doing it this way is placing the paragraph or image 'lower' in the stack and indented. Using the method I suggest places it at the same level as the list item, so it lines up. Just a suggestion...

[SteveS]

In fact, looking at the original post closes I have to ask why the list items are in paragraph tags?

Each of the list items can sit within <li> tags, closed by </li> without adding paragraphs.

broken numbering.png

This way the content for each numbered list item is aligned (because it's in the same tags) and the unnumbered text lines up with the numbered text (rather than the number).

Fine tuning can be achieved by creating a style for the paragraphs used for extra content (like the one used for the URL).

[ChoccieMuffin]

I was under the impression that a <p> directly inside an <ol> or <ul> is "illegal". So I use the method that Nita suggests.

In my stylesheet I have these (online output):

Code: Select all

	p
	{
		font-size: 100%;
		font-family: Arial;
		line-height: 1.5;
		color: #555555;
		margin-top: 0%;
		margin-left: 1%;
		margin-right: 1%;
		margin-bottom: 2%;
	}

	li
		{
		font-size: 100%;
		list-style: outside;
		color: #555555;
		line-height: 1.5;
		margin-top: 0%;
		margin-right: 1%;
		margin-bottom: 2%;
		margin-left: 2.5%;
		page-break-inside: avoid;


	li p
	{
		font-size: 100%;
		line-height: 1.5;
		margin-top: 0%;
		margin-left: 0;
		margin-right: 1%;
		margin-bottom: 1%;
	}

That solves numbery, heighty, layouty issues for me, according to my stylesheet. (The li p bit overrides the p bit for all p inside a li.)

Take a look at www.w3schools.com and search for complex selectors to give you a bit more info.

[MattyQ]

I was under the impression that a <p> directly inside an <ol> or <ul> is "illegal".

You're correct, Choccie. The method that Steve proposes, including a <p> directly inside an <ol>, is not valid HTML5. Here's the w3 spec for the element, which lists permitted content: http://www.w3.org/TR/html5/single-page. ... ol-element

Christina, if you want to post your stylesheet, I'm sure we can resolve that issue. Some immediate guesses would be checking your <li> and <p> style definitions (I imagine there may be an entry related to padding or margin that is offsetting those paragraphs).

[ChoccieMuffin]

Being a bit more specific, here's the link:

http://www.w3schools.com/cssref/css_selectors.asp

[SteveS]

I'll cop that, my old school hack is not going to work

I've played a bit more with variations...

broken numbering.png

I agree with Paulie, the way I got the list number to be misaligned with the list content was to have a non-breaking space between the <li> tag and the <p> tag. Although the original post screenshot doesn't look the same as my example, if the OP tried to adjust the spacing on one of the 'boxes' (padding, margin, etc) it could disguise the effect.