« | 1 | Page 2: Flow | 3 | 4 | »

Flow Control

Select the top box by clicking once on it, then go to Item>Actions>Div-a-Tron. Apply this action to the box, then take a look at the Actions palette to see the options included in the Action (see screenshot to the left). There are a number of things you can control with the Div-a-Tron, the most important one in our case being the option to set height to ‘Auto’. We are also given the power to control the z-index for a box and change the positioning type from Freeway’s default Absolute type. Ok, that’s briefly what you can do. What should you do, here?

First, check that the top drop-down list of nesting options is set to ‘none’. We will not be working with any if the top four checkboxes in this guide, so just ignore them for now. Second, click the arrow next to Positioning. Here you have a few options: Publish coordinates, override coordinates, positioning type and z-index control/customisation. One of the keys to controlling the flow of layered items is using another positioning type than Absolute, because Absolute postioning sticks the box ...in an absolute position. When text is resized in the browser, the Absolutely positioned box just grows in height, it doesn’t move from its designated x/y coordinates. So, another positioning type is required. Which position? Relative or Static will do nicely. Since the current box is the first in the document order, selecting Static as the position is relevant, but Relative is just as useful. Select one of these two positioning types for the box. Third, check the ‘Remove z-index’ checkbox.

Why remove z-index? Glad you asked. Because when we work with layered items, “divs”, Freeway will automatically assign a z-index (level denominator) to each and every layered item. We don’t want this, we want to tell Freeway when to assign a z-index – and when not to. Because the Div-a-Tron action allows us to nest divs within other divs we can give some layer items one z-index and other layer items another z-index. In other words, any number of items can have the same z-index. This is more useful than it may sound to the virgin ear.

The next step, now that you’ve chosen a positioning type and removed z-index on the top item, is to check the Display options. This is where you choose how a div should be displayed and how it behaves in relation to its parent or sibling divs. Some HTML items are by default displayed a particular way, headers are for example always block level items, by default. Using the Div-a-Tron’s Display options can in other words be useful if we want to modify the default display value. In the case of the top box, we don’t. The reason is that the top item stretches across the whole of the page and it will therefore leave no room for any items to snuggle up against its right edge and consequently there’s no reason for us to alter the display value. But you should know that you can. ;D

Height: ‘Auto’

The next two parts of the Div-a-Tron, Size and Margins And Padding, are the key factors in a standards-centric layout, basically because if we can’t get our boxes expand in height and push the content below them downwards as type is enlarged in a browser window, then all the other options are irrelevant. More or less. And the way we do this is by checking the ‘Height: Auto’ checkbox found among the Size options. The only time you don’t want to use height: auto is when you have an absolutely positioned item, in that case you will want to leave the size option in Div-a-Tron at the default state or use “Override dimensions” to set a specific dimension. More about that later, though. So, we’re done with the top box, we won’t change the default margin and padding settings. Time now to make some magic with the main content boxes; time to float stuff!

« | 1 | Page 2: Flow | 3 | 4 | »