complex selectors: ol ul and ul ol styles

[nickatwork]

Hi all,
I'm setting up some complex selectors for the first time. I havent really had a need to before, but now its come up I want to create a standard set.
So far, I have 4 complex selectors. (ol ol) (ul ul) (ul ol) (ol ul)
The ol ol and ul ul sets work as expected, I highlight a list item, hit tab and its done.

But how do I select the ol ul or ul ol. Where can I tell Flare I want a bullet within my numbered list item, or vice versa. So far all I can get with the ol ol and ul ul selectors is an alpha list within a numbered list, or a disc bullet within a set of square bullets...

Am I missing something simple?
Do I need to create the selectors for the various list styles that I have? e.g. ul_ManualBullet ol etc etc? Otherwise how does flare know which one it should be using based in the list style I use it in....


Thanks,
Nick

[NorthEast]

I tend to change the format of the indented list by selecting all the items in that list and clicking Bullet List /Numbered List from the toolbar.

But you can also do this by right-clicking the list tag (i.e. the ol/ul block) and selecting from the Type menu.


Either way, just make sure you only select the plain Bullet List / Numbered List options. If you select any of the other circle/square/roman/alpha options, this inserts an inline style that will override what you've set up in your complex selectors.

[crdmerge]

You'll probably need to extend the css styling to the list item, such as:

ol li {list-style: upper-roman;}
ol ol li {list-style: upper-alpha;}
ol ol ol li {list-style: decimal;}
ol ol ol ol li {list-style: lower-alpha;}

Generally, you would assign indent, vertical spacing, etc. to the ol and ul sections of the css, but assign font and style issues to the li item. If all your selectors are assigned in this manner, there's no need for separate styles such as ManualBullet, etc. Just select Indent Item for the sublists, and let the CSS and HTML protocols take over.

BTW, these selector structures are called descendant (or contextual) selectors, in which a selector anywhere underneath the initial selector gets the designated style, even if separated by other tags.

Another type of selector is the direct child selector (ol > ol > li, or ol + ol + li), in which the child must directly follow the initial selector (nothing in between, such as div or p). However, this type would not be helpful if your lists consistently contain tables, images, etc. between list items.

In addition, you can add classes to your combinations, as well, such as:

• ol ol.special li {list-style: upper-alpha;}

in which you would assign different indents for the ol.special selector, for example.

See the w3schools http://www.w3schools.com/css/default.asp site for more help.


Good luck,
Leon

[nickatwork]

Thanks for all the info, really cleared things up a bit.

I'm wondering if theres alot of point at this stage in setting these up though...in my case, almost all of my lists are broken at some point by an image or table like you mention. The main thing that I wanted to use complex selectors for was the use to TAB in a list to indent it. 'sub-lists' only occurs a few times in my project, and I thought it would be the best solution.
Nick.

[LTinker68]

...in my case, almost all of my lists are broken at some point by an image or table like you mention. The main thing that I wanted to use complex selectors for was the use to TAB in a list to indent it.

If you mean you wanted the image or table to be indented in the list, then there is an easier method to use. Create your list, or at least create the line items up to and one past where you want the image or table to go. For example, if you want an image of line item 3, then create line items 1 through 4 (it makes it a bit easier to create line item 4 at this point than to come back to it later). Type whatever text you want as the intro in line item 3, then at the end of that line, click the drop-down arrow next to the List Actions icon and select "Make Paragraph Item(s)" from the list that appears. When you click that option, the <li> tag will change to an <li> tag with a child <p> tag. When you press Enter, you'll get a second <p> tag inside that <li> tag, and the left edge of the <p> tag's contents automatically line up with the text in the list item, so there's no need to use a complex selector -- it's behaving the way you want automatically. Insert your image, caption, what have you. When you're done, just put your cursor in the line item 4 that you already created. If you forget to create line item 4, you can get back to a point of being able to do so by clicking the drop-down arrow next to the List Actions icon, and this time select "Make Simple Paragraph" or something like that.

[nickatwork]

Thanks for that Lisa,
But for images in a list I just use breaks. shift+enter. Nice n easy and things line up. What I meant about a 'sub-list' was for example a a bulleted list, say square, and within that there may need to be a sub list with circle bullets that is indented. I've only been able to achieve that using another list style, which isnt ideal I dont think, and a bit more time consuming that using the TAB key.

But I wonder, if I already have 3 different nubmered list styles, and 2 different bullet styles, when my cursor is in one of those 5 lists and I hit TAb, how will it know which style of complex selector to use....

I dont know, maybe I can get away with using a different style for now....but I'd like to set things up right.

[NorthEast]

But I wonder, if I already have 3 different nubmered list styles, and 2 different bullet styles, when my cursor is in one of those 5 lists and I hit TAb, how will it know which style of complex selector to use....

If the style of the list depends on the level of the indent, you can do this entirely using complex selectors; e.g. if a first-level numbered list is always 1,2,3, and an indented second-level list is always a,b,c.
If you have different styles of list used at the same level, then you will need to set up some extra list classes and apply these manually where they are required.

The example below shows how to set up your lists using complex selectors, where the list style depends on the indented level of the list. (This is based on the CSS that I use.)

Say you wanted your first-level bullets to be square, second-level to be circles, and third-level to be discs.

Code: Select all

ul
{
	list-style-type: square;
}

ul ul,
ol ul
{
	list-style-type: circle;
}

ul ul ul,
ol ul ul,
ol ol ul,
ul ol ul
{
	list-style-type: disc;
}

Then for your numbered lists, you might want first level lists using 1,2,3 (decimal); second level lists using a,b,c (lower-alpha); and third-level lists using i,ii,iii (lower-roman).

Code: Select all

ol
{
	list-style-type: decimal;
}

ol ol,
ul ol
{
	list-style-type: lower-alpha;
}

ol ol ol,
ul ol ol,
ul ul ol,
ol ul ol
{
	list-style-type: lower-roman;
}

[ChoccieMuffin]

Hi all, long time no "speak".

I have my complex selectors all nicely set up in my stylesheet, I have defined "ul p" and "ul ul", but I don't know what keys or buttons in Flare I have to press to use them!

I want to have a list with several bullets each followed by a non-bulleted paragraph, but short of getting in and playing with the code (which I can do), or creating a template topic that containswhat I want and then copying and pasting (tedious) how on earth do I USE my complex selectors?

Same with inserting a sub-list, how do I do that - WHAT BUTTONS DO I PRESS?

[NorthEast]

Hi all, long time no "speak".

I have my complex selectors all nicely set up in my stylesheet, I have defined "ul p" and "ul ul", but I don't know what keys or buttons in Flare I have to press to use them!

I want to have a list with several bullets each followed by a non-bulleted paragraph, but short of getting in and playing with the code (which I can do), or creating a template topic that containswhat I want and then copying and pasting (tedious) how on earth do I USE my complex selectors?

Same with inserting a sub-list, how do I do that - WHAT BUTTONS DO I PRESS?

Just use the toolbar icons; create your lists using the Bullet List /Numbered List icons, and create sub-lists using the left/right indent icons.

To have additional paragraphs in a list item, right-click the li tag and select Make Paragraph item. Then you can have as many paragraphs as you like in that line.

[ChoccieMuffin]

I want to have a paragraph item INSTEAD OF a list item, rather than INSIDE a list item, to agree wtih my stylesheet.

Text in topic says this (once I've gone in and messed about with the code):

<ul>
<li>bullet</li>
<p>follow-on paragraph</p>
</ul>

Or have I done it completely wrong?

[LTinker68]

<ul>
<li>bullet</li>
<p>follow-on paragraph</p>
</ul>

Or have I done it completely wrong?

Yeah, that's invalid code. The paragraph tag has to be a child of the li tag, it can't be a sibling to the li tag. It should appear as:

Code: Select all

<ul>
    <li><p>bullet</p>
    <p>follow-on paragraph</p></li>
</ul>

...or as:

Code: Select all

<ul>
    <li>bullet</li>
</ul>
<p>follow-on paragraph</p>

The benefit of the first method is that the paragraph is part of the list item and will move with it if you need to move it, and the paragraph will automatically be indented to line up with the bullet that precedes it.

[ChoccieMuffin]

So what buttons do I have to press in order to get what you've just given as option 1?

Here's what I want to get:

Topic1.png

And here's the code.

Code: Select all

        <p>Ordinary text.</p>
        <ul>
            <li>Bullet</li>
            <li>
                <p>follow-on paragraph, text aligned with text from bullet BUT NO BULLET</p>
                <p>Another paragraph without a bullet (but where's the spacing between paragraphs gone?)</p>
                <ul>
                    <li>Sub-bullet</li>
                    <li>
                        <p>follow-on paragraph, text aligned with text from bullet BUT NO BULLET</p>
                    </li>
                </ul>
            </li>
            <li>Bullet</li>
        </ul>
        <p>Ordinary text. Why so much space before?</p>
        <p>More ordinary text.</p>

How do I get my follow-on paragraphs NOT to have a bullet on them? And how come I get nice neat spaces between paragraphs when they're ordinary <p> paragraphs, but not when they're inside a list?

[crdmerge]

The <li> tag before the follow-on paras (which by the way, is not closed further down) should be removed:

<li>
<p>follow-on paragraph, text aligned with text from bullet BUT NO BULLET</p>
<p>Another paragraph without a bullet (but where's the spacing between paragraphs gone?)</p>


Good luck,
Leon

[ChoccieMuffin]

Yes, that's what I would have thought, but I can't figure out a way to GET that using the Flare interface, rather than having to go and dig in the code. And if I DO do that, according to Lisa it's invalid code! (It IS closed further down, by the way.)

I am right royally confused now.

Lisa, WHY is it invalid code? It does what I want it to do, it works when I generate it...?

Is the solution somewhere around the complex selectors bit? Do I have to set bullet to NONE for "li p" complex selector?

[whunter]

If you want a paragraph to follow a list item (within/aligned with the list item), right-click the <li> block and select Make Paragraph Items. When you hit return on the end of the <li>, you now get a <p> that is aligned with the <li> instead of a new bullet.

This assumes you have Toggle show blocks enabled; you can also do it from the List Actions button in the toolbar.

So in your example you would right-click the <li> that says "Bullet" and select Make Paragraph Items. Then hit enter at the end of that text and you'll get a paragraph after it.

[LTinker68]

Lisa, WHY is it invalid code? It does what I want it to do, it works when I generate it...?

Yes, well, some browsers are more forgiving that others or provide modes of operation that are more forgiving than others. Unless you test each and every browser, version of browser, and mode of operation for each browser, you can't be sure that invalid code will appear correctly in all of them. I think you said you had to go into the back-end code to formulate it that way, which is one clue that it isn't valid. Not that Flare doesn't make some mistakes or not support something that should be possible, but it's at least a clue to do some research to see if what you want to do is actually valid.

So to get a paragraph inside a line item, do what whunter described -- click the List Action drop-down icon and select Make Paragraph Item(s), or right-click on the li block (if enabled) on the left side of the XML Editor and select the option there.

Is the solution somewhere around the complex selectors bit? Do I have to set bullet to NONE for "li p" complex selector?

No. A paragraph inside a list item, by default, will inherit all the styles you've defined for the base paragraph tag, with the exception of whatever you've specified for that complex selector. For example, my base paragraph tag has a bottom margin of 1.5 or 2 ems or something like that, but I don't want such a large gap after a paragraph if it's inside a list. So my "li p" complex selector has the bottom margin set to a lower value to control how the paragraph behaves when it's inside a list. So the paragraph would only have a bullet if A) your base paragraph has its display set to list-item, or B) your base paragraph tag has an auto-number format where you've inserted a bullet symbol (•) or graphic, or C) your "li p" complex selector is set to be a list-item or is set with the auto-number format.

[nickatwork]

This may be blasphemous (?) but if you need your list item to have a blank line then another 'paragraph' below it that lines up, similarly to what you have showed, you could just use breaks <\b> it just inserts a one line break, it will keep the same formatting as the list style, with no list bullet or number, and will also keep the list grouped together if you are using page breaks etc.....

or is this totally bad code practice..?

[NorthEast]

I want to have a paragraph item INSTEAD OF a list item, rather than INSIDE a list item, to agree wtih my stylesheet.

Text in topic says this (once I've gone in and messed about with the code):

<ul>
<li>bullet</li>
<p>follow-on paragraph</p>
</ul>

Or have I done it completely wrong?

Going back, you can have a p tag inside ol/ul tags (without it being inside an li tag).

To create a paragraph tag like this in the editor:
1. Right-click an li tag and select Make paragraph item(s).
2. Right-click the new p tag and select Move > Move Left.


I don't think why this is considered 'invalid' either; LTinker didn't give a reason why, so I'm not sure what the problem is supposed to be.
I've seen it used in places in our projects without any problems.

Mind, I would say that I usually include the paragraph inside the list item, as 99% of the time the paragraph is related to a list item (otherwise why is it in the list?). If the paragraph is separate, then it doesn't move with the list item if you re-order your list.

[LTinker68]

I don't think why this is considered 'invalid' either; LTinker didn't give a reason why, so I'm not sure what the problem is supposed to be.

I didn't find the exact "rule" on w3c.org (didn't spend much time searching), but there was a "bad example" that had a paragraph tag inside a list --> http://www.w3.org/MarkUp/1995-archive/Elements/P.html. Their example had the p tag between the ul and li tags, which is reversed of the original post which had the p between a closing li and a closing ul (or ol), but I'm guessing that's the same.

[Judith]

HTML Reference states that the permitted contents of ol and ul elements are "zero or mor li elements". So you should embed the p element in an li, as whunter recommends.

See http://www.w3.org/TR/html-markup/ul and http://www.w3.org/TR/html-markup/ol

[ChoccieMuffin]

Yes boss!

[LindaW]

I came across this post while trying to find out how to insert paragraphs into my numbered lists. So now I am able to insert a paragraph tag, by right-clicking on my .li tag in my topic. That works great! But, is there a way to get out of the paragraph mode and return to my numbering? I've only been able to accomplish this by first creating my numbered list, and then going back to insert my paragraphs between the numbered bullets. But if I want to edit my list, and for instance, add another numbered bullet between bullet number 3 and number 4, but I have a paragraph tag inserted, I can't do that without making a mess of my ordered list. Is there a way to end paragraph tags and continue numbering?

[whunter]

To go back to your numbering, click the Outdent button on the Text Format toolbar.

[LindaW]

That's great!! Thank you!

Everyday I learn something new from this Forum - I appreciate all the great information!