SiteSpinner Tutorials banner
Virtual Mechanics Logo
SiteSpinner
®
Tutorials
Dynamic Sizing and Centering Pages

This tutorial is devoted to dynamically sizing and horizontally centering your pages. The topics we cover here are:

Compare two styles
One-button page centering (almost)
Dynamic page sizing
Relative positioning
Relative sizing
Vertical positioning and sizing
Suggestions for dynamic sizing
Use one or the other on a page -- not both
Recommendation: dynamic vs horizontal page centering


Compare two styles

There are two versions of this page.  The content is the same in each:
In preview, flick between the two links above. Change the size of your browser window and see how the content adjusts to suit the browser window.


SiteSpinner logo

Page Editor Button
One-button page centering (almost)

To center a page, open the Page Editor > Special Effects tab and check the Center Page Horizontally box. To center all your pages, click the All Pages button. Then preview and change the size of your browser window to see how the page always stays in the center.

For this to be most effective, center your objects on your workpage. If your design width is, say, 800 pixels, keep your workpage symmetrical about the 400 pixel axis. And of course, don't put anything outside the 800 pixel boundaries.


Dynamic page sizing
Dynamic sizing creates pages that expand or shrink to fit the browser window. SiteSpinner gives you the ability to position and scale objects to achieve that end. It is all done from the Relative Sizing and Positioning  buttons on the bottom tool-bar.


Relative positioning

What is the meaning of relative positioning -- relative to what?

You have a design width for your pages, typically 800 pixels. "Relative" is relative to that width. If you have an object on your workpage starting at say 80 pixels from the left, it starts at 10% of the way across the page. (80 pixels/800 gives 1/10 or 10%.)

The idea of relative horizontal positioning is that the object always starts
at 10% of the page width, regardless of the browser size.

This is assuming the objects are relative to the left hand edge. You can also set object positions relative to the right hand edge. Control whether the alignment is left, right or center with the Arrange toolbar.



Center Pages checkbox
All Pages button
Relative positioning and sizing buttons
Alignment buttons
Relative sizing
In much the same way as for relative positioning, you can express the width of an object in terms of the page design width. An object may take half your design width. With relative horizontal sizing on, the object, when published, will take up half the width of the browser window, whatever that happens to be.


Vertical positioning and sizing
You can also position and size items vertically, relative to the design height of the page, say 600 pixels. There aren't many practical uses for this, but it's there if you need it!


Suggestions for dynamic sizing

Because objects are free to move around the page or change their size, they can collide with objects that are not free to move -- then you can have a big mess. Here are a few tips:

Use one or the other on a page -- not both

Dynamic sizing tends to get confused (and confusing!) if you also have horizontal page centering on.

Suppose your design width is 800 pixels. You position an object at 10% of the width with relative horizontal positioning -- this places it at 80 pixels.

In preview, you expand the screen to 1024 wide. The object places at 10% of the new width or 102 pixels.

But if you have also centered the page -- this shifts the 800 wide page 112 pixels to the right in order to center it in the 1024 screen. But you have also said via relative positioning you want the object at 102 pixels -- this would place it outside the new left-hand margin.

This is confusing enough for humans, let alone the poor computers! 

If you use dynamic sizing, keep horizontal page centering off. Similarly, if you use horizontal page centering, don't use dynamic sizing at the same time.


Recommendation: dynamic vs horizontal page centering

In making a dynamically sized page in the same style as the other tutorial pages, we had to make serious compromises in the vertical spacing between objects. And it shows!

For the most part, you can ignore dynamic sizing. It has its place for certain sorts of pages.  We used it for a purpose in the Import Object tutorial -- Basic i-frame example -- to display the VM home page full width.

However, for most purposes,  horizontal page centering is very effective and much easier to do -- that should be your first choice.




Center Page Checkbox
See also:
Workpage tutorial
Manipulation tutorial