can't add space between lost items

I’ve looked for the answer to this across several threads and no luck, so hoping someone here can help.

I’m trying to add “space after” and/or “space before” in a Freeway bulleted list. I’ve used the extended section of the font style editor before, and in fact, in my current list, have added “margin-left” and “20px” and all works fine.

The problem is, if I add “margin-top” or “margin-bottom” which I understand are the equivalents of space before and space after, the value I add, say 30 px, is added only before the entire bulleted list and not added in between each bullet item. So each of the 6 bulleted paragraphs remain closely packed together with no space between. All I can do is add a soft return between each, which gives me no control.

Anyone have the answer to this?

Thanks.

Brian


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Leading.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks but I think leading is the space from line to line, ie the overall spacing between all the lines of a paragraph or block of text.

It’s “space after” that I’m wanting to apply to the list, that’s the extra space after a hard return, so that there’s a little extra space between each paragraph, or in this case, between each bullet item.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It sounds as though you’re targeting the wrong selector; the list container

    instead of the list item
  • . Leading will work on a li.

    Todd
    https://xiiro.com

    The problem is, if I add “margin-top” or “margin-bottom” which I understand are the equivalents of space before and space after, the value I add, say 30 px, is added only before the entire bulleted list and not added in between each bullet item.


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

I’ve seen a few posts with the “li” item mentioned, and I’m really unclear how to work with it. I’m a designer as opposed to a code saavy person, and although I’m reasonably proficient with Freeway, I can’t turn your email advice into action… can you tell me exactly how I would do what you’re describing?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s not necessarily about being code-savvy, it’s about understanding the structure of the things you put on a page so you (or anyone), as the designer, can pick-and-choose the parts you want to style. But if this is to make sense you first you need a crash course in list structure.

There are 3 types: ul (unordered), ol (ordered) and dl (definition). The first two have essentially the same structure.

At the most basic they look like this:

<ul> //Container element
    <li>Stuff here.</li> //List element
</ul>

and

<ol>
    <li>Stuff here.</li>
</ol>

And a definition list:

<dl>
    <dt>Title</dt>
    <dd>Stuff here.</dd>
</dl>

In each case every element or part can be targeted with CSS. For example, to style just the

  • of the parent
      :

    ul li {
        line-height: 1;
    }
    

    In the case of FW you would add ul li in the Tag field of the Styles Editor. But you will almost certainly want to narrow that down otherwise every

      on your site will pick up the styling.

      Adding classes to an element allows even greater styling options and some very complex and nice-looking results are possible. A list is a wonderful useful and flexible structure to work with.

      Todd
      https://xiiro.com

      I’ve seen a few posts with the “li” item mentioned, and I’m really unclear how to work with it. I’m a designer as opposed to a code saavy person, and although I’m reasonably proficient with Freeway, I can’t turn your email advice into action… can you tell me exactly how I would do what you’re describing?


      freewaytalk mailing list
      email@hidden
      Update your subscriptions at:
      http://freewaytalk.net/person/options

  • Thanks very much Todd…

    I looked at m html file and found the structure you refer to.

    But I am still missing something in the Freeway implementation.

    I went to my style for the list, added ul li to the tag field. I didn’t make a new style, it just renamed the existing one. Then I added “space after” of 20 px and the behaviour remained the same, the space after was applied to the whole list, and not in between each item.

    Am I to make a copy of the list style, then add ul li to the tag and then apply that style to the last line of each bullet item?

    Sorry to be slow on this. But I think you’re pushing me down the right track!


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

    Hi Brian, hope this helps.

    http://cssway.thebigerns.com/workbench/list-item-styling/


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

    That helps a lot! Very clear and easy to follow. Wish I’d found your site a long time ago!

    Thanks everyone for helping me clear this up!

    Brian


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options