![]() ![]() |
3.5:H203004 Use relative sizing and positioning (% values) rather than absolute (pixels).Improper designThe width of table below was set with the absolute value of 300 pixels. The first column width was set with the absolute value of 225 pixels, and the second column height was set with the absolute value or 20pixels. Thus causing the user not able to adjust the size accordingly. Improper design: <TABLE width="300" border="0" cellpadding="1" cellspacing="1" bgcolor="#FF6600"> <TR> <TH bgcolor="#FFFFCC">absolute value setup</TH> </TR> <TR> <TD width="225px" bgcolor="#FFFFCC">information 123</TD> </TR> <TR> <T height="20px" bgcolor="#FFFFCC">information 456</TD> </TR> </TABLE> End of example The frame set below used absolute value to set width of the column, thus preventing users to adjust the size accordingly. Improper design: <FRAMESET cols="50,40" framespacing="1"> <FRAME name="contents" title="content" src="frame1.htm" scrolling="auto" target="main"> <FRAME name="menu" title="selection" target="_blank" scrolling="auto" noresize src="menu.htm"> </FRAMESET> <NOFRAMES> <P>[<A href="contents.htm">content</A>]</P> <P>[<A href="menu.htm">selection</A>] </P> </NOFRAMES> End of example The frame set below used absolute values to set height of the row, thus preventing users to adjust the size accordingly. Improper design: <FRAMESET rows="50,40" framespacing="1"> <FRAME name="contents" title="content" src="frame1.htm" scrolling="auto" target="main"> <FRAME name="menu" title="selection" target="_blank" scrolling="auto" noresize src="menu.htm"> </FRAMESET> <NOFRAMES> <P>[<A href="contents.htm">contents</A>]</P> <P>[<A href="menu.htm">selection</A>] </P> </NOFRAMES> End of example Proper demonstrationThe table width is 80%, and the first column width is 20%, and the second column height is 80%. This kind of relative size design allows the table size to be adjusted according to the size of the window. Proper example: <TABLE width="80%" border="0" cellpadding="1" cellspacing="1" bgcolor="#FF6600"> <TR> <TH bgcolor="#FFFFCC">relative value setup</TH> </TR> <TR> <TD width="20%" bgcolor="#FFFFCC">information 123</TD> </TR> <TR> <TD height="80%" bgcolor="#FFFFCC">information 456</TD> </TR> </TABLE> End of example The width of the frame was 50%, this is a relative size design so that if the size of the window changed, and so will the frame. All column are set with percentage, and one of the pageˇ¦s width can be set as ˇ§*ˇ¨ for the indication of filled up. Proper example: <FRAMESET cols="50%,*" framespacing="1"> <FRAME name="contents" title="content" src="frame1.htm" scrolling="auto" target="main"> <FRAME name="menu" title="selection" target="_blank" scrolling="auto" noresize src="menu.htm"> </FRAMESET> <NOFRAMES> <P>[<A href="contents.htm">content</A>]</P> <P>[<A href="menu.htm">selection</A>] </P> </NOFRAMES> End of example The frame height below was set to 50%, this is a relative size design so that if the size of the window changed, and so will the frame. All height of the column are set with percentage, and one of the pageˇ¦s height can be set as ˇ§*ˇ¨ for the indication of filled up. Proper example: <FRAMESET rows="50%,*" framespacing="1"> <FRAME name="contents" title="content" src="frame1.htm" scrolling="auto" target="main"> <FRAME name="menu" title="selection" target="_blank" scrolling="auto" noresize src="menu.htm"> </FRAMESET> <NOFRAMES> <P>[<A href="contents.htm">content</A>]</P> <P>[<A href="menu.htm">selection</A>] </P> </NOFRAMES> End of example |
![]() |