Forum Moderators: open
Heh! I know the feeling. I've overcome the "mechanical" problems of going liquid, but designing for it is another matter. Since the content can be reformatted later by replacing the css, I've opted for a semi-liquid stance. I'm currently holding the 3 column design to 760w and working everything from top/left. Later, as I can shake the print mentalility (or as screen widths increase), I'll revisit the composition.
One problem is images. We've discussed the need to scale them before. I'm giving serious consideration re implementing Travera's resizing script now, but that really starts the endless possibilities nightmare. [dhtmlnirvana.com]
Liquid can be a problem, but easily over come. Avoid the CSS versus Table layout argument, the easiest way is with tables. I'll sticky mail you some URL's as examples and you can look at the code. You can also check the examples on the thread CSS versus Table Layout: [cenlyt.com...] and [cenlyt.com...] . But basically, using a two column layout, this works:
<table>
<tr>
<td width="FixedIsGoodHere></td>
<td width="%"></td>
</tr>
</table>
Resizing images can get tricky. What I generally do is leave them alone or, in the case of a header image as in the table layout example above, I cut it into pieces and fill the gaps with a background image. That way I'm not dependent on scripts.
>Resizing images can get tricky
Definitely. And in headers and such, I'd stay away from it. But here's the scenario. In the main content column, I've always used either 320w or 220w. If I later choose to blow out the right wall to dynamically fill the window (note: NOT resolution, the scripts are measuring the available window), that 220w is going to be about the size of a postage stamp on a 19" flat panel monitor. I'm thinking I could wrap my "standard" sizes in a div with id="220" class="img1" or id="320" class="img2". The js script is remote and the <head> is injected via ssi, so the only overhead is the div around the images. I can choose to activate/deactivate later, but only if the groundwork is there in the host page.
I almost forgot about a trick I once used which worked really well.
Make several sizes of the same image: sizes appropriate to the various screen widths you're concerned about. Then try this script:
screen_width = screen.width;
if (screen_width > 1000) {
document.write<img border='0' src='480px_filler.jpg' width='480' height='160' alt=''>");
}
else if (screen_width > 800 ) {
document.write<img border='0' src='352px_filler.jpg' width='352' height='160' alt=''>");
}
else if (screen_width > 600 ) {
document.write<img border='0' src='224px_filler.jpg' width='224' height='160' alt=''>");
}
I fed the script externally and had <script type="text/javascript" src=""></script> where I wanted the image. BUT I also include a <noscript> tag with the image from the > 600 wide screen in case javascript was disabled.
Oh, and the order of the screen widths I the script is crucial. You must go wider to smaller.
