Embedding <p> inside <div>

[navoff]

To handle doing Notes with a hanging indent, I created two styles, a div style:

div.note
{
padding-left: 0.50in;
}

And a paragraph style:

p.note
{
text-indent: -0.50in;
}

That way I could have multiple paragraphs in the div and only the first one would put the word "Note:" outside the indented text:

note_sample.png

This has been working fine and giving me the output I want. As I've been in the process of converting and cleaning up a project that had been in Robohelp (but using Word as it's editor), it's meant I've been doing a lot of the editing in a text editor so I can clean out all the empty span tags and convert the existing mess into a newly established standard. The problem I haven't figured out is how, if doing new content, to create a div and embed a paragraph in it (like you can do with a list item to make one a paragraph item). In the editor I can get either one or the other but not both. I have to open the file in a text editor if I want to put a paragraph inside a div tag. It seems like there should be a better way and maybe I'm just not aware how to do it.

Any suggestions?

[LTinker68]

Put the cursor in a new paragraph block. Click the indent button icon in the toolbar. It'll bring up a list of indent block types you can use. The div.note should appear there. Click on that to replace the paragraph you were in for the div block set to the note class. The cursor is now in the div block in the topic. Press the Enter key to create a new paragraph inside that div, and assign it the appropriate class. I believe it'll continue adding content to that div until you exit out of the div.

I don't have Flare open at the moment, but I'm pretty sure that's how it works.

[NorthEast]

A much quicker way is to press Tab (or select Format > Group), then select your div class.

To group together a few paragraphs or any other content, highlight them and press Tab.

[milewski]

You can make it so any <p> tag within the div.note is formatted with the indent.

Code: Select all

div.note p
{
	text-indent: -0.50in;
}

There would then be no need to set a class on the <p> tag, it will automatically be formated with the indent.

[navoff]

You can make it so any <p> tag within the div.note is formatted with the indent.

Code: Select all

div.note p
{
	text-indent: -0.50in;
}

There would then be no need to set a class on the <p> tag, it will automatically be formated with the indent.

The only problem is that I only want the first <p> tag to have the indent applied. It will have the word "Note:" hanging off to the left while the remaining paragraphs don't. Hence, the reason for setting up a separate class for the paragraph.

[LTinker68]

Then try...

Code: Select all

div.note + p
{
     text-indent: -0.50in;
}

That sets the style of the <p> tag that immediately follows the div.note tag. However, just a warning -- Flare may not like that declaration in the stylesheet. It doesn't like an asterisk being used (different type of complex selector) and replaces it with other code that I keep having to change back. I haven't used this complex selector in Flare, though, so you might want to keep an eye on it to see if Flare converts it to something other than the + character.

[Andrew]

The + symbol doesn't make Flare unhappy. Been using it in my tables to keep paragraph spacing sane.

[NorthEast]

Then try...

Code: Select all

div.note + p
{
     text-indent: -0.50in;
}

That sets the style of the <p> tag that immediately follows the div.note tag. However, just a warning -- Flare may not like that declaration in the stylesheet. It doesn't like an asterisk being used (different type of complex selector) and replaces it with other code that I keep having to change back. I haven't used this complex selector in Flare, though, so you might want to keep an eye on it to see if Flare converts it to something other than the + character.

The + character means it will apply to the next tag after the div tag, i.e. the next tag after the div's closing tag, so it will not apply to any content inside the div tag - which is what you want here.

I've got some suggestions, but I'm not really sure how your div and paragraph styles are supposed to work. Why does the first p tag need a different indent, is the second paragraph inside the div not lined-up with the first paragraph? Also, is the "Note:" text typed in (if so, using what tag?), or is it inserted using an autonumber format?

Anyway, to apply formatting to p tags inside the div, there are a few options you can use:
(a) a descendent selector (suggested by milewski), div.note p {... - this will apply the formatting to all p tags anywhere inside your div.
(b) a child selector, div.note > p {... - this will apply the formatting to p tags directly inside your div, e.g. it would apply to p tags at the first level inside the div, but not to paragraphs that are inside another tag (such as a list).
(c) a first-child selector, div.note > p:first-child {... - like above, but this will apply the formatting to the p tag only if it is the first tag inside the div.

The good news is that (c) will do exactly what you want. The bad news is that (i) it only works in IE7 (not IE6), and (ii) if your "Note" text is inserted using an autonumber (for the div), the first-child tag inside your div will always be a span tag, so the rule will never apply to your paragraph.

I'm not sure how you want it to look though.
If you just want the Note text off to the left, and all your paragraphs in the div aligned, then I'd suggest something like:

Code: Select all

div.note
{
	mc-auto-number-format: 'Note: ';
	mc-auto-number-class: noteformat;
	padding-left: 50px;
}

span.noteformat
{
	float:left;
	margin-left: -50px;
	font-weight: bold;
}

(The Note text will not be aligned in Flare's editor, but it looks fine in the output.)

[navoff]

I've got some suggestions, but I'm not really sure how your div and paragraph styles are supposed to work. Why does the first p tag need a different indent, is the second paragraph inside the div not lined-up with the first paragraph? Also, is the "Note:" text typed in (if so, using what tag?), or is it inserted using an autonumber format?

I'm trying to set off notes by having the text indented but the word "Note:" set off outside the indented area. In some cases, the notes may have multiple paragraphs but only the first one should have the word "Note:" hanging off to the left. For example:

note_sample2.png

The text looks like this:

<p>nunc. Nulla at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis quis tortor ut magna blandit imperdiet. Fusce ut sem eget metus sollicitudin mollis. Nam sit amet sapien. In hac habitasse platea dictumst.</p>
<div class="note">
<p class="note"><strong>Note:</strong> Integer nisi dui, fermentum et, varius ac, aliquet a, augue. Fusce scelerisque blandit purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vestibulum pulvinar mauris.</p>
<p>Quisque id magna ut felis consequat luctus. Suspendisse dictum. Suspendisse nunc. Suspendisse non sapien sed ante molestie ullamcorper. Vivamus nibh pede, viverra ac, vulputate a, facilisis quis, erat. Duis at odio in sapien semper tincidunt. Curabitur porta.</p>
</div>
<p>Maecenas sit amet neque. Cras a purus. Donec fermentum commodo justo. Fusce ac ligula. Quisque viverra commodo nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent eu lorem.</p>

Using Lisa's suggestion, I found I was able to get the <div>/<p> thing working. So, thanks for all the suggestions but as this solution works for me and provides the most flexibility with the least amount of thought or effort, I think I'll stick with this for now.