American Audio DCD-PRO240 User Manual download pdf (Page 66)

Freeway Reference: Working with Items

If you look at the Width and Height fields, you will see that they are now both set to 260 pixels. Why have these values been changed

by applying padding? The answer lies in the way that CSS calculates the size of a box: padding is added to a box’s dimensions, so that

a 300x300 box with 20 pixels padding will be 340x340 pixels when it is viewed in a browser. Freeway compensates for this by reducing

the size of the item to account for the padding. Overall, your item remains the same size as you designed it to be.

Of course, it is entirely possible that you don’t want to perform a mental calculation every time you want to work out how large your

item will appear on screen when you publish your site. To make life easier, Freeway also includes a Screen Measurements section in

the Inspector palette. This will display the size and position of your item taking into account any padding that has been applied; for

the example above it displays as follows:

As you can see, the dimensions are the correct screen values for when the item is viewed in a browser. Just for completeness, the

equations are:

Screen Measurements Width

= Item Left Padding

+ Item Width

+ Item Right Padding

Screen Measurements Height

= Item Top Padding

+ Item Height

+ Item Bottom Padding

Padding and item positions

FW Pro only

Padding also affects the position of child items. Just as text is inset when you apply padding, child items (with the exception of layer

items) are inset when padding is applied to their parent. Layer items are not affected because CSS positions them relative to the bounds

of their parent, irrespective of padding.

In situations where a child’s position is affected by padding, the child’s position is calculated relative to the inside of the padding (i.e.

the inner border that is shown when you are entering text into an item with padding applied).

So, for example, if we draw a non-layer HTML item and then draw a child non-layer HTML item within it with the following position/

dimension settings (see screenshot below left) and then apply a 20 pixel padding to the parent item, the child item will change

position—unsurprisingly it moves 20 pixels right and 20 pixels down.

However, if we look at the Dimensions section in the Inspector palette (see screenshot below (right), the Left and Top values remain at

50 pixels. Once again, the Screen Measurements section saves any mental arithmetic by displaying the offset of the item as it will be seen

in a browser

Applying margins

Margins can only be applied to inflow items—they are meaningless anywhere else because absolutely positioned items have no

surrounding context to space themselves from.

Applying margins to a child item is straightforward—in many ways identical to applying padding. Select your child item, switch to the Item

General panel of the Inspector palette, and either enter a value into the Margin field, or select a value from the popup. Once applied, you

will see a dotted border outside the item giving visual feedback on the margins you have set:

1 2 ... 61 62 63 64 65 66 67 68 69 70 71 ... 249 250

No comments

American Audio DCD-PRO240 User Manual Page 66