Softpress

CSS Layout in Freeway (Pro only)

Note, if you want to create layouts that hold together when the text is increased in size then take a look at our Relative Page Layout KnowledgeBase article.

Freeway has supported full CSS layout since Freeway 4. You can draw absolute positioned layer items, fixed position layer items and relative positioned in-flow items. All these items are output as div elements with different CSS values to change the way they react to other CSS Layout items.

Absolute items

To draw an absolute layer item, select CSS Layout in the toolbar, then select the HTML option in the toolbar and draw an item. Note the Layer option will be checked and Absolute will be selected in the dropdown in the Inspector palette.

Absolute layer items are great because you can stack them on top of other items without them affecting anything else. They will always remain in the same position in the page because they are absolutely positioned. They can be positioned from the top or bottom and left or right of the page.

Fixed in Window items

A Fixed in Window item is created exactly the same way as an Absolute item, just select Fixed in Window from the Inspector palette, with the item selected.

Fixed in Window items will always remain in the same position in the browser window, regardless of the scroll position. The only exception to
this rule is when the page is being viewed in Internet Explorer 6 and below. Other items on the page are not affected by Fixed in Window items

In-flow items

To draw an in-flow item, double click the page, or any HTML item (to act as a container) and select Insert HTML Item from the Insert menu.

In-flow items can move position in the page if other in-flow items increase in size. If a visitor increases the size of the text in the page, or some content gets dynamically added to an in-flow item other in-flow items will get pushed down the page so they can still be seen. The only drawback to this is that the items can't be manually positioned in Freeway, they must be inserted into container items and positioned using margins. Freeway 5.5 has a new feature call Relative Page Layout (RPL) that addresses this problem by automating the process. To use this Action, make sure your pages are laid out using a grid structure. See the RPL KnowledgeBase article for more information.

For more information on CSS flow layout in Freeway take a look at page 11 and onwards in the Freeway Reference Guide.

Inline CSS layout (box model layout)

Freeway allows you to build pages in a specialist layout method called Inline CSS Layout (often called "box model" layout), but you need to be aware that this is far more complex (and many find it far more unintuitive) than the standard Freeway layout and it has a very steep learning curve. Note also that Master pages do not currently work with box model layouts, and we can only offer limited support for sites which have been built in box model.

If you want to learn more about box model layout, contact Support to ask for a very basic PDF tutorial and a sample file - but please be aware that this is the only resource we have for box model and, because it is a specialist layout method, you will need to make your own enquiries to go beyond the basic steps mentioned in the tutorial.


Related Articles

Attachments

No attachments were found.

Article Details

Last Updated
11th of February, 2009

Would you like to...

Print this page  Print this page

Email this page  Email this page

Post a comment  Post a comment

 Subscribe me

Subscribe me  Add to favorites

Remove Highlighting Remove Highlighting

Edit this Article

Quick Edit

Export to PDF


User Opinions

40% thumbs up 60% thumbs down (10 votes)

How would you rate this answer?




Thank you for rating this answer.

Continue