How to expand my website to fit any size screen.
In SiteSpinner and SiteSpinner Pro.
SiteSpinner by Virtual Mechanics - test pages.
"This site is a place were I can test and demo examples of solutions needed for questions on the 'Virtual Mechanics Forum' and for projects I have in the works, using SiteSpinner web site building software"
Virtual Mechanics Forum User: Tonga (Working Mechanic)
Tests / Solutions
&
Demos
In a discussion on the Virtual Mechanics Forum a user had a problem where they couldn't figure out how set there site to expand when viewed in larger screens, the developer explained that they had created the website on the 15 inch laptop, but when they viewed the site published on a 19 inch screen the site looked small and didn't expand to fill the screen, and as they described "looked funny".
Now There are a couple of ways to do this in SiteSpinner and SiteSpinner Pro. The example I am doing this in is SiteSpinner but it should be similar in Pro, now if your not using either of these tools this article still might point you in the right direction with your software. I whipped up a test page, now in no way is it perfect but it does make a hell of difference when you want your site to expand into larger screens. To test the page click on the expand button in your browser and click and drag you browser window in and out to change the size of your browser area, everything should expand and shrink to fit. Test page click here.
You have to use relative vertical and horizontal positioning on your objects, plus relative (or dynamic), vertical and horizontal sizing for some objects as well, also align positioning. There is two way's to do this shown below:
The First: You can set your whole project to reflect one or all of the following settings:
- relative positioning
- relative sizing
- align positioning
The only thing with doing this is you don't set each individual object to your desired settings, all the objects are set the same and some objects react differently to others. For example, if you had all three of these settings applied to a text object the object would probably expand as necessary but if you had the same settings on an 'Ellipse' the object could possibly shrink quite small. If you know what your doing plus are using quite similar objects and you no how to space and size them accordingly this method can be quite effective and save you a lot of time, but if your looking for more control and more basic way I would use the second method.
Any way here's how to set the whole project to these settings. At the top of your SS work window click 'options', then in the drop down menu click 'project options' and the 'project target options' box will appear, now click more then the box will expand to show more options, in the 'default positioning' section choose the settings you want then press the 'apply to all objects button', and your done.
Second option: Change the settings manually on each object individually, I personally control these settings from the 'align bar' at the bottom of the work screen in SiteSpinner e.g.. below:
Now I'm not going to go into every aspect and meaning of each button, but I will give you a visual look of the settings I applied to create my test page. So if you play around with the settings shown below and type in 'align bar' in the help section at the top of your work window, you should be able to get
up to speed with familiarizing yourself with the buttons.
So click here to bring up my example page in a different window then you can see which settings below correspond to the objects on the example page. I hope this helps, enjoy.
Tip: If your object is in the position you want in your project, try locking the object before you add the settings to it, this will stop the object from moving across the page when you add your position settings.
You can always unlock the object after you apply the settings, if need be.
Screen shot 1: The settings for the aqua box that takes up most of the back ground.
Screen shot 2: Object 1 settings.
Screen shot 3: Object 2 settings
Screen shot 4: Bottom green box's settings (these are not grouped).
Screen shot 5: Top black bar settings.
Screen shot 6: Text in the center of the page settings.
Screen shot 7: Top left navigation link text, object settings.
