Building a Resizable Page with a Text Box

When you build a page with the resizing option you are limiting yourself to working with a text editor.  This means that your elements will move around on the page as the browser window size changes and the point at which the elements “wrap” changes. This is just like changing your margin size in a word processor, and you have to make the same adjustments in your layout.  Following are the basic steps to set up a page this way:

1) Create a page
2) Assign the ZeroMargins masterborder
3) Draw a text box on the page
4) On the text box properties select the Size to Layout checkbox
5) Also select the Content Wrap to Browser Width checkbox
6) Place all your content in the text box
7) Preview or Publish your page

As you can see if you resize this page, the elements within it now change to accommodate the width of the browser.

You may notice that the background behind the navbar and the background of the title bar also expand to accommodate the browser width. How did I do this? I used tables set to the Relative Width option. This is a feature available in NetObjects Fusion 4.0 which allows you to set any table element to take up the relative amount of space in the browser that they occupy within the NetObjects Fusion layout.

In this case, what I did was I drew out two single celled tables.  I made sure to draw these tables all the way to the edge of the text area I am using to hold the content. This causes the tables to take up nearly the whole percentage (or in the case of the top table it is the whole percentage) of the page.  I then colored the backgrounds black and gold respecitvely. In the top table I embedded the navbar and selected the Center option from the Align palette. In the lower table I just typed in the text I wanted to appear and selected Center justification from the Format Tab.

The image on the left is embedded directly before the table holding the title and has the Left Wrap alignment option selected so that the text flows around it as the browser window changes size.

Now one thing that I could have done is also put this text into a table set to use relative width. This would have allowed me to inset the text from the graphic on the left.  What I cannot do with this design is offset the top of the table holding the title text, from the top of the line graphic as I have done all all the other pages in this websize. The reason is because they are both in the same line of the text object.  They start at the same location.  There is no pixel control when embedding elements within a text box.

Let’s go on now and look at a more complicated table structure which resizes to the browser.