DCElliott
12-15-2002, 05:57 AM
One of the problems with really liquid layouts is that, while the content area is optimized with scrolling features, you really don't want the other parts (<div>s) of the template to scroll which can create problems, especially with graphics.
So what happens when the user makes the window so small that your large banner title text no longer fits? Or pops the window full-size on a hirez monitor. The "big" title suddenly looks too small.
The solution - liquid graphics:
You can specify graphic sizes in %ages rather than pixels. If I have a banner div whose size is specified in %ages of the window viewport size, I can then make a graphic that is a % of that %. You following me? For example, using my Ghanja2 template, the banner division CSS is:#banner {display:block; height:13%; width:auto;
padding-left:24%; margin:0; overflow:hidden;z-index:10;} The useable space is about 75% wide and 13% high. Any image put in this space, though can be specified to be 100% of that height and width (in practice, I use 99% because of rounding errors., etc, that can make the size >100% which triggers scrollbars. Don't want scrollbars.)
So I make a banner graphic that is optimized for the full-screen display - that gives me the working dimensions. I made, for this example, a title that is a monochrome gif - black letters on atransparent background. Despite being 1024x100 in size, the gif is only about 1800 bytes. I chose a blocky font that doesn't degrade much when being resized.
If you want to play with the code:
Put the following code as the banner div of Ghanja2.html, replacing the code that was there, and download the attached zipped gif to the same directory. (Ghanja2.zip can be found here (http://developers.evrsoft.com/forum/showthread.php?s=&threadid=767&pagenumber=1) )
<div id="banner">
<img src="tools.gif" width="98%" height="98%" alt="Banner title" border="0">
</div>
When you have it up in your browser window, resize the window every which way and see how the banner adapts to the dimensions, while remaining clear and readable.
So, there you have it, liquid layout with liquid graphics.
So what happens when the user makes the window so small that your large banner title text no longer fits? Or pops the window full-size on a hirez monitor. The "big" title suddenly looks too small.
The solution - liquid graphics:
You can specify graphic sizes in %ages rather than pixels. If I have a banner div whose size is specified in %ages of the window viewport size, I can then make a graphic that is a % of that %. You following me? For example, using my Ghanja2 template, the banner division CSS is:#banner {display:block; height:13%; width:auto;
padding-left:24%; margin:0; overflow:hidden;z-index:10;} The useable space is about 75% wide and 13% high. Any image put in this space, though can be specified to be 100% of that height and width (in practice, I use 99% because of rounding errors., etc, that can make the size >100% which triggers scrollbars. Don't want scrollbars.)
So I make a banner graphic that is optimized for the full-screen display - that gives me the working dimensions. I made, for this example, a title that is a monochrome gif - black letters on atransparent background. Despite being 1024x100 in size, the gif is only about 1800 bytes. I chose a blocky font that doesn't degrade much when being resized.
If you want to play with the code:
Put the following code as the banner div of Ghanja2.html, replacing the code that was there, and download the attached zipped gif to the same directory. (Ghanja2.zip can be found here (http://developers.evrsoft.com/forum/showthread.php?s=&threadid=767&pagenumber=1) )
<div id="banner">
<img src="tools.gif" width="98%" height="98%" alt="Banner title" border="0">
</div>
When you have it up in your browser window, resize the window every which way and see how the banner adapts to the dimensions, while remaining clear and readable.
So, there you have it, liquid layout with liquid graphics.