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.
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.
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.
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?
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.
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?
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!