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

Freeway Reference: Appendices

224

CSS-positioned layout

FW Pro only

This is very similar to the table-based layout workflow, but you work with the CSS Layout button on Freeway Pro’s tool

bar switched on. With the button switched on, every item you draw on the page will be used as a “layer” item and, if you

select an item, you will see the Layer option (or the CSS option for inflow items) checked in the General Settings tab of the

Inspector. Note that there is no CSS Layout button in Express.

With the CSS Layout button switched on, all items drawn on the page will

automatically be used as layer items. The items’ outlines will display in green

and the Layer option is switched on in the Inspector when the item is selected.

There are many advantages of using CSS-positioned layout over table-based layout—and the main ones are that you can place HTML

text items on top of other items so the HTML item has a transparent background; placing an item on top of an HTML item doesn’t

make the item behind “overflow” like table-based layout; and because each layer item is a separate object on the page (and not a cell of

a table or larger structure), this means that you can use many of the more complex Freeway Actions to set up fading transitions, sliding,

etc.

The one crucial difference between table-based layout and CSS-positioned layout is—as the name suggests—layer items are positioned

using CSS (using co-ordinates which are based from the top left corner of the page). In some ways this sounds like it is an advantage,

because the items will be located in exactly the positioned they have been placed on the page—but in reality it is a disadvantage because

if any HTML text content on the page grows in height when rendered in a browser, that can often mean that the text grows to a line

or two longer to point where it overlaps the item(s) below. Unlike table-based layout, which moves the rest of the content down the

page automatically when the content above it grows, CSS-positioned layout will mean that nothing moves down the page automatically

because the items are fixed in position.

This screenshot shows how two columns of three separate

HTML text items have been created in a Freeway ﬁle. The left

column (with green outlines) are CSS-positioned (layer) items,

and the right column (with blue outlines) are table-based

(non-layer) items.

This screenshot shows how the items shown in the previous

screenshot are rendered in a browser. Note that because the

left column of HTML text items are ﬁxed in position using

CSS (because they are CSS-positioned items) they will not

automatically move down the page if the browser renders the

text slightly larger, and this results in each item overlapping

the item below. Every browser renders HTML text slightly

different in size, although it varies from browser to browser

and font to font.

Because of this inherent behavior in CSS-positioned layout in Freeway, we have introduced Relative Page Layout (see below) which

makes CSS-positioned items behave like table-based items in terms of the items moving down the page when content above grows—so

this gives you the best of both worlds.

Again, like table-based layout, CSS-positioned layout does not let you draw items on your page which can be made to extend to the full

width of a browser window. The only way to make that work is to use a very limited workaround by embedding a graphic item in the

page’s background so it can be made to “tile” horizontally to always fill 100% width in the browser window as a header bar. There is no

reliable method of setting up 100% width mid-page or footer bars in CSS-positioned layout.

1 2 ... 219 220 221 222 223 224 225 226 227 228 229 ... 249 250

American Audio DCD-PRO240 User Manual Page 224

Comments to this Manuals

American Audio DCD-PRO240 User Manual Page 224

Comments to this Manuals

Related products and manuals for CD players American Audio DCD-PRO240