Softpress KnowledgeBase

KnowledgeBase Home > Site Planning and Design > Layout

Parent and Child Items - The Basics

There may be times when you need to use items embedded inside other items - for which we use the terms "parent" and "child" (or "children"), where the parent is the container item and the child is the item used inside the parent. This is sometimes called "nesting".

The most common reason for using parent and child items is when a colored item is used as a background - for instance if you want to have a different page color to the browser background color - but there are many other reasons as well.

Using a graphic item for a page background is not recommended as the graphic may break apart when HTML text is used (this is because browsers often render HTML text slightly larger and a graphic item used in this way will be "sliced" into smaller chunks around the HTML item) - as seen in the screenshot below.

Notice the white lines running horizontally through the yellow background item which is caused by the HTML text increasing in size slightly in a browser. Using an HTML item as a page background and then using the other items on the page as children will prevent this problem from happening.

Note: You can test to see if any breaking apart of graphic items may occur by previewing the page in Safari then typing Command-+ to enlarge the default browser type size (typing Command and minus/hyphen will reduce the default size again, and typing Command-zero will reset the default size again). Although this will accentuate the problem, it is a useful testing tool.

The best way to learn about parent and child items is to follow the steps below while working in Freeway. To do this you can either create a new Freeway file or work on a new page (you can always delete the page after).

In your new Freeway file or page, draw a large HTML item and give it a color of yellow. This item is going to be the parent item.
Click on the HTML tool in the toolbar and draw a new, small HTML on top of the parent item. Note that when you draw the item, the cursor changes to a "+" symbol and the outside border of the parent item displays with a thicker line.

With the new child item selected on the page, you will see that the border of the parent item is still displaying a thicker line. Now click and drag the child item to see that you can't move it outside of the parent - this is because the child item is embedded inside it rather than being on top of it. Notice also that when the child is selected you can see that the color is set to none in the Inspector, despite the fact that HTML items normally display a background of white by default. This is because HTML child items within an HTML item parent are transparent.
Graphic items can also be used as child items. Select the Graphic tool in the toolbar and draw a new item on top of the parent item. Just like before, the cursor changes to a "+" symbol and the parent's border displays a thicker line. Again, this item can be moved around anywhere within the parent, but you need to take care not to let this item overlap the first item you drew - if you do, the first item will "overflow" because it's an HTML item (overflowing will cause the content to disappear and a large cross will appear in the HTML item's container as shown below). It is worth noting that HTML items will overflow if any item (HTML or graphic) is overlapping or on top of it.

Click away onto a blank area of the page to deselect all the items and then click once to select the parent item. Note that it has a dotted line inside the normal selection line on the right and bottom edges - this gives you a visual reference that this item is a parent.
Finally, click on the header bar of the Site Panel to the left of the page area, so that "Site" toggles to "Page". The Site Panel will now display a list of all the items on the page you are working on (see the screenshot below). Notice that "item2" and "item3" are indented one level to the right underneath "item1" - this means that items 2 and 3 are child items of a parent item called "item1". Click on the header bar again to toggle it back to the default "Site" view.

OTHER POINTS ABOUT PARENT AND CHILD ITEMS

You can use graphic items as parents. However, you need to bear in mind that HTML items will display with a white background as an HTML item is not transparent when used as a child of a graphic parent item. Also, if any HTML text expands when previewed in a browser, it may break the background apart even though it is used as a parent (to show the same behavior as the first screenshot of this article).
If you click and drag on a parent item, the child items remain in position within the parent as it moves.
If you delete a parent item, you will also delete any child items within it.
You can embed child items within other child items. There is no official limit on the amount of levels of parent/child relationships, but bear in mind that the code required to produced more than, say, 10 levels may be quite complex, so it's good practice to use as few levels of embedding as possible.
If ever you find you've have made an item a child of another item by accident, you can sever the parent/child relationship in one of two ways. The first way is to select the child item, go to Edit>Cut, make sure nothing is selected on the page and go to Edit>Paste (you may need to move the item if it now overlaps any HTML items). The second way is to click on the header bar of the Site Panel (see the last of the steps above) then click and drag the item to the left by one level (so that it is no longer indented one level to the right of the parent item in the list).

No related articles were found.