I’ve got a problem getting 3 html text boxes to sit well, one below another.
It’s laid out fine in Freeway Pro 5.5, but when previewed (Preview button or Browser button), the lower text boxes ride up into the space of the ones above. The text is not copied from another site, it’s typed into the html boxes directly in Freeway, so therefore contains no spurious formatting.
In Preferences, I do have the option for CSS boxes to automatically resize set to NO.
If I create the same layout with the CSS button or the Layers option in the Inspector deselected, then everything looks exactly as it does in Freeway and as I would expect it to.
Hopefully the 2 attached images will show this - 1 is the Freeway layout, the other is as it appears in a preview (Chrome browser).
Could someone please let me know where I’m going wrong?
https://picasaweb.google.com/oldbaldrick/FreewayText?authuser=0&authkey=Gv1sRgCI_T8LGvpYqxTA&feat=directlink
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Brian,
In my experience, small type fluctuations are inevitable. Different
browsers, different systems, even different machines can all quite
naturally experience small type fluctuations. This happens in print design
also, but is more noticeable in web design, I think because of the many
viewing options.
What you can do is think more fluidly - instead of three boxes, why not
one? Use styles to set the spacing (in FWP it’s called Space Before and
Space After in the paragraph settings). This way, the whole column responds
to inevitable minor differences in font size and spacing.
On Friday, March 7, 2014, Brian Turner email@hidden wrote:
I’ve got a problem getting 3 html text boxes to sit well, one below
another.
It’s laid out fine in Freeway Pro 5.5, but when previewed (Preview button
or Browser button), the lower text boxes ride up into the space of the ones
above. The text is not copied from another site, it’s typed into the html
boxes directly in Freeway, so therefore contains no spurious formatting.
In Preferences, I do have the option for CSS boxes to automatically
resize set to NO.
If I create the same layout with the CSS button or the Layers option in
the Inspector deselected, then everything looks exactly as it does in
Freeway and as I would expect it to.
Hopefully the 2 attached images will show this - 1 is the Freeway layout,
the other is as it appears in a preview (Chrome browser).
Could someone please let me know where I’m going wrong?
FreewayText | oldbaldrick
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
–
–
Ernie Simpson
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for the quick reply Ernie.
I set it up in 3 text boxes as the small centre one should have a coloured background - guess I should have done this before posting.
It’s a nuisance that the preview is so different from the final output, it really screws up the layout and means everything needs to be previewed and adjusted several times before being finally locked in place in the layout.
I’ve been using Serif’s WebPlus on Windows for years and things didn’t change so much between layout and final output as they do in Freeway. Guess I’ll just need to get used to it.
Cheers,
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Brian Turner wrote:
Thanks for the quick reply Ernie.
I set it up in 3 text boxes as the small centre one should have a
coloured background - guess I should have done this before posting.
There are a couple of ways to get that effect - the first again is styles.
You can set the background color of a type style and apply that to the
center item. Boom. When you do, you’ll see that the background color stops
at the edge of the type - which can look not as good. The fix for that is
to add something called padding to the type. Freeway Pro has no direct
controls for this (arrgh!) but you can apply it manually through the FWP
Extended option. Simply edit your text style for that item (menu Edit >
Styles, select your style then click the Extended button in the style
editor pane on the right). Create a new property and name it “padding”
(without quotes of course). The in the Value field enter something like
“9px 12px”, again without quotes, and do put a space between the two
measurements. The first number is the amount of vertical padding for your
type style, the second is horizontal. There are half-a-dozen ways to write
this value, but this is very straight-forward and should work well for you.
Now go back to your document and Preview, and the type’s background color
will now extend further out and look much better.
The second way is also pretty easy, if not as unintuitive… remove your text
from the middle space and leave your cursor where it would go. With the CSS
Layout active, go to menu Insert > HTML Item… this will insert a box right
there in the flow of text! Carefully enter the box with your cursor and
type (or paste) your text. Now, click the pasteboard to exit the inline
box, then select it again. In the Inspector, set the width to flexible
(click the width, min-width, max-width icons so there is no width). This
will make the inline box flow as wide as the container box it’s inside of.
Do the same for the height icons so the box is snug on the type vertically.
Now you can use FWP’s regular tools to color the inline box and add padding
to it.
The neat thing with inline boxes is that it will shift along with the rest
of your type, so it solves your other problems as well. In fact, both these
methods will be flexible in your layout.
I hope you try these methods as I think they will help you more than
anything else.
Best of luck,
–
–
Ernie Simpson
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options