qhrider wrote:
Ernie, is there a ways to adjust the spacing between the bullet and text
in your model?
Walter may have given you an idea about that already, but let me also give
an example…
##Indents and Left Spacing
The key to controlling list styling in Freeway Pro 6 is a basic
understanding of how HTML lists are put together, then using FWP to create
the necessary tags and styles for the output. Let’s review:
HTML list components for bulleted lists:
<ul> tag - the unordered list tag… identifies the scope of the list
<li> tags - list item tags… identifies the individual items that make
up the list
Okay, that’s fairly simple… an HTML list isn’t just visually identifiable,
but has special tags to tell browsers what kind of list it is, and which
items belong to that list. Let’s keep it simple by just discussing bulleted
(unordered) lists for the moment. To recap how I make lists in FWP, here is
that link - Lists, List Styles, in Freeway Pro 6
##Methods of Spacing
Padding and Margin are two very common CSS properties which add space
around HTML items. There’s no law about using one or the other, as long as
you understand the difference and that FWP doesn’t always tell you which is
being used.
Basically, margins are spaces around items while padding are spaces
added-to them…
So in the previous example - Lists, List Styles, in Freeway Pro 6 - I
covered how to set the left-spacing of the list using the padding property
of CSS. We could have used the margin property for that, but in my
experience margin and padding sometimes have unexpected results when
interacting with other page elements. Remember, this is about how I would
do these things… feel free to experiment and exploit the flexibility of
CSS.
##So What Exactly are We Spacing?
How do browsers seem to interpret margin and padding? Let’s take a look…
Breaking it down, padding-left CSS property on the entire List element (
) moves the whole list container to the right by increasing the
overall width of the element on its left side. The margin-left CSS property
applied to the List Items ( - ) adds space before both bullet and text,
while the padding-left CSS property widens the text space on its left-side
between the text and bullet. To separate the text from the bullets, we will
want to affect the padding-left CSS property of the list items for this
list.
##Okay, So How Can We Make Freeway Do This?
In the previous example ( Lists, List Styles, in Freeway Pro 6 ) we set up
our list with a special CSS style which we called “LISTsquare”. Whatever
the name you give your list style, we will want to use that name to help
Freeway find those items – which is different than affecting all lists
universally, but let’s just focus on this list for now.
We will do this in FWP by creating a special style to target just the list
items that belong to lists with this style. This is a little advanced, so
don’t try to apply this new style to anything and don’t freak out when
nothing changes in the FWP workspace. It may feel “wrong” but trust me, it
is absolutely right.
Open the Style Editor and create a New CSS style. Now, the tricky part is
in the naming of this new style… we are going to have to be very picky
about it. First, take the name of the list style - LISTsquare - and type
that into the TAG field. Then add a period (or “full-stop” as our
english-impaired cousins call it) to the beginning. Next, add a space and
lower-case LI (li) to the end. Finally, delete whatever automatic name FWP
puts in the Name field and make sure it stays empty. It should look like
this…
To set the padding-left property, open the Extended Style interface using
the button top-left. Create a new style declaration named “padding-left”
with a value of your choosing. Don’t forget to indicate the unit kind (px,
em, etc.)
And that’s it! Although FWP can’t show this custom code applied in the
workspace, it will show in the preview and on output to your browser.
##Bonus Tip
Many users ask how to adjust the space between list items… this is the same
style I use to achieve just that - by using the margin-bottom CSS property.
The margin-bottom is the same property used to separate blocks of
paragraphs… you can set it in the Extended interface if you like, but FWP
has a control for it in the regular Style Editor paragraph controls - under
the clumsy name of Space After. Don’t fret as FWP will use the correct
terminology when it outputs the page code.
–
Ernie Simpson
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options