Extending a style across multiple paragraphs

[Calybos]

Hi, folks. We’ve got a neat little Note style in our stylesheet that sets off the text in a shaded border box with an icon (see below).



Works great, but we need to extend that style to cover multiple lines, such as a bulleted list, and have them all stay bounded by the same box with a single icon. Any suggestions on how to do that?

Caveat: Code is a black box to me; as soon as you say “use a div,” I’m lost. Here’s the original details from the stylesheet:

p.Note
{
background-repeat: no-repeat;
border: solid 1px #404040;
border-radius: 6px;
padding-bottom: 10px;
padding-right: 10px;
padding-top: 10px;
color: #424342;
background-color: #c7e6f9;
padding-left: 50px;
mc-auto-number-format: '{b}{color #424342}Note: {/color}{/b}';
background-image: url('../Images/_standard/NoteIcon.png');
}

[kwag_myers]

Make a copy of the p.Note style and change it to div.Note. I haven't figured out how to add div's in the XML Editor yet, so I always do it in the Text Editor:

Code: Select all

        <div class="Note">
            <p>paragraph 1</p>
            <p>paragraph 2</p>
            <p>paragraph 3</p>
            <p>paragraph 4</p>
            <p>paragraph 5</p>
            <p>paragraph 6</p>
        </div>

Results in:

DivNote.png

[Calybos]

Okaaaayyy... and what would a "div" style look like in the stylesheet code? Will we be able to select it from the Available Styles list on the Styles window?

Black box.

[emsachs]

you would change it to:

div.Note
{
background-repeat: no-repeat;
border: solid 1px #404040;
border-radius: 6px;
padding-bottom: 10px;
padding-right: 10px;
padding-top: 10px;
color: #424342;
background-color: #c7e6f9;
padding-left: 50px;
mc-auto-number-format: '{b}{color #424342}Note: {/color}{/b}';
background-image: url('../Images/_standard/NoteIcon.png');
}

everything the same, except change p to div.

divs are applied a little differently from other styles. To apply a div in the XML editor, highlight the paragraphs you want in the div, press Tab, and a little dialog box pops up that lets you choose your div.

A div is a kind of container. I guess my internal image of it is as a big single celled table, that lets you set the kinds of properties you could set in a Body, where everything inside gets its properties from the div.

Here's the first hit on google from someplace called www.tizag.com
The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.

[kwag_myers]

I don't know what happened to the last few posts on this thread, but I found that you can use soft returns (Shift+Enter) within the p.Note style tags to accomplish what you are after.

[kkelleher]

I don't know what happened to the last few posts on this thread

The forums suffered some kind of melt-down yesterday evening. Looks like they lost everything going back to Tuesday evening.

Thanks,

Kristen

[doc_guy]

Yeah. The <div> is a container element. So you apply the note style to the div, and then you have a bunch of paragraphs or lists (or even images or a table) inside the div.

In your stylesheet you need to create a div with a class of 'note' or whatever, and copy the styles from your p.note style into your div.note style.

Now, write several paragraphs of text. include a bulleted list for good measure. Now select all that content. While it is selected, press the Tab key on your keyboard. You should see the "group" popup which will allow you to select a way to group the selected content. Click on your div.note style, and you should see the results you need.

On a side, but related, note, DIVs are also ideal for indenting content.

In your stylesheet create a div with a class of 'indent'. On that div, set a style for padding-left: 20px; or something similar (the number doesn't matter, so you'll probably adjust this to match whatever size you want).

Now when you need to indent any content in Flare, select it, and press the TAB key and from the 'group' popup, select div.indent. You can do it multiple times if you need to indent several layers.

Far too often people create P.Note and P.NoteIndent and P.NoteIndentMore and P.Important and P.ImportantIndent and table.indent and image.indent -- all to provide indenting in their topics. Don't do that! Just nest your content in div.indent and you only have to create P.Note and P.Important. If you need to indent a p.note or a p.important, then you select it, press TAB and add the div.indent as a parent. SO much easier!

When you are trying to style content for online output (in Flare or elsewhere) DIVS are your friend!

[ChoccieMuffin]

I think there was a bit of a hiccup with the forums on Friday, as I had posted a note that has now disappeared.

Be careful using DIVs if your output is Word, as Word doesn't support DIVs (this was confirmed by a more experienced user whose post has also disappeared!)

[Calybos]

OK, now how do you end a div once you're in it? Selecting a p. style from the Available Styles list isn't doing it.

[Nita Beck]

OK, now how do you end a div once you're in it? Selecting a p. style from the Available Styles list isn't doing it.

With the cursor in that last paragraph that you want to move out of the div, press Shift+Tab.
or
Right-click that last paragraph block and select Move Left.

[doc_guy]

Or you can use your down curser to move down until you are out of the div, and then keep typing.