Controling lists and list style

[Isr]

Hi,

New to Flare. I'm struggeling with the formatting of the li style. Specifically, how does one set hanging indent? which property controls the space between the number and text? and which property controls the space between the number and the left margin?
I couldn't find any reference information that explains any of that and the properties names are confusing (to say the least...)

Appreciate the forum's help on this.

Thanks,

Ari.

[crdmerge2]

Spend a little time learning about the CSS List properties here: http://www.w3schools.com/css/default.asp

They have a "Try it yourself" feature, which provides an interactive self-training experience.


Good luck,
Leon

[jasonsmith]

Hi Isr

you can set a hanging indent on an li style by setting the text-indent parameter to a negative value.
The margin-left parameter is the distance between the left edge of the page and the start of the text.
The distance between the number and the left margin is controlled using the padding-left parameter. Setting a padding-left value of minus x shifts the number x pixels (or whatever) to the left of the text.
In the example below, the second line is indented 50 px more than the first line and there is 130 px space between the number and the text. Note that you will have to set these values in the advanced stylesheet view!
li
{
text-indent: -50px;
padding-left: -130px;
margin-left: 280px;
}

[sfoley]

Specifically, how does one set hanging indent?

Use a combination of the padding-left and text-indent CSS properties.

which property controls the space between the number and text?

None in particular, although you can increase (but not decrease) the default using the padding property. If you want to decrease the space, then you can (1) enclose the text in a separate element (like span) and use negative margins or relative positioning to move the text closer, or (2) specify your own bullet as a background image, set list-style-type to none, and play with margins, or (3) use list-style-position:inside and live with not being able to control the distance.

and which property controls the space between the number and the left margin?

Quite a few possibilities, and they can all be used in combination. There's margin, margin-left, padding, and padding-left, a combination of position and left or right, text-indent, or even text-align and float, and others. Note that the space can also be controlled by any of those properties on a parent element.

I couldn't find any reference information that explains any of that and the properties names are confusing (to say the least...)

Use Google. MadCap's help system is not a good reference for basic HTML and CSS information.

[cbdebris]

I have never had to use padding to create a hanging indent for <ul> and <ol> lists -- can't imagine why you'd need to; browsers parse that for you. If you mean margins that's something else entirely. I favor complex selectors -- beauty and power.

If you are using autonumbering you use the offset between the autonumber and the text to determine the "hang."

The CSS guide supplied in the Flare help system helps you to understand what each option does. To learn more you can read books or go to w3.org and read the CSS specifications for 2.2.

Good luck!

[Isr]

Thanks for the helpful info everyone!
Looks like I have a lot more reading to do if I want to really understand how it works.