Frames - part 3
When using "specific size reference" it is very unlikely that all your sizes will add up to the exact same size as the viewer's browser window because people use the Internet on a variety of monitor sizes. In this case the browser will also adjust your settings to fit the window but it is also unpredictable. For this reason it is advisable to use a combination of methods for referencing size, as I will discuss in a few minutes.
Before that however there is one more way to specify the size of the frames. It is the way you have been using up to now, without even knowing it probably, "Relative size reference". When you wrote <frameset rows="*,*"> you are telling the browser to create two frames, in rows, of equal size. However if you write <frameset rows="*,2*"> you would be telling the browser to create tow frames in rows with the second frame being twice the size of the first. Or if you wrote <frameset cols="2*,*,3*">, then the first column would be twice as wide as the middle column and the third column would be three times the size of the middle column. The final idea for you to grasp is the idea of combining the three methods to get the desired results. For example if you write <frameset rows="150,*,30%"> then you will create three frames, in rows, the first of which is 150 pixels high, the last frame is 30% the height of the browser window, and the middle frame fills the remaining space.
Absolute values are taken into account first, percentages are then based on the whole window, proportional values are then measured from the remaining space.
The above sentence is key to understanding how to program frames exactly the way you want them. It applies to all framesets, regardless of size or complexity. The best way to understand it is through examples.
<frameset rows="60,50%,3*,10,*"> :: Although this is not a very likely frame set up it is a perfect example for teaching. The frameset contains 5 frames, in rows.
Absolute values are taken into account first => Row 1 is 60 pixels high & Row 4 is 10 pixels high.
Percentages are then based on the whole window => Row 2 is 50% the height of the browser window
Proportional values are then measured from the remaining space => Row 3 is three times the height of Row 5 and their combined size fills the rest
Latest Articles