Re: [css-d] css compatible for 600x400 and 1024x640 resolutions
Though I note that it is, somewhat ironically, itself a fixed-width column of text. :) Not just that, but EXTREMELY wide. Good example of 'do what we say, not as we do'. FYI, if it bothers anyone else, I built a scriptlet that will covert ALAP's CSS to a nice liquid-width layout: http://mnteractive.com/archive/fixing-the-fixed-width-design-again/ -Darrel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css compatible for 600x400 and 1024x640 resolutions
Does anyone know of good solutions that I could test and try to make the files compatible for both resolutions (600x400 and 1024x640) ? First of all, don't design for screen resolutions. It's mostly irrelevant. What matters are browser viewport sizes, and that can be anything and everything. However, what you are asking is how to make a site that flexes to fit. The common term is 'liquid layout' or 'fluid layout' with some variants such as 'jello layout'. If the site was designed initially for a specific width at 1024, it's doubtful that a bit of CSS will fix it so that it properly resizes. You'll likely have to rebuild the pages over again this time with the liquid layout in mind. For ideas, just google 'css liquid layout' and you should find plenty of examples. -Darrel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css compatible for 600x400 and 1024x640 resolutions
On 9/20/06, Mike [EMAIL PROTECTED] wrote: Does anyone know of good solutions that I could test and try to make the files compatible for both resolutions (600x400 and 1024x640) ? I'm assuming you mean 640x480 and 1024x768. But your goal should be to make pages that work at any (reasonable) resolution, not just a couple of popular ones. The difference is between static and fluid or elastic layout design. There's no one simple solution, but there are several techniques that are helpful. If you post a link to a page that's giving you trouble, we can offer some targeted suggestions. Meanwhile, this article is a good starting point: http://www.alistapart.com/articles/elastic/ -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css compatible for 600x400 and 1024x640 resolutions
Austin, Darrel wrote: Does anyone know of good solutions that I could test and try to make the files compatible for both resolutions (600x400 and 1024x640) ? First of all, don't design for screen resolutions. It's mostly irrelevant. What matters are browser viewport sizes, and that can be anything and everything. Agreed. I have been guilty of designing for specific resolutions for a while, and I am trying to break out of this. Liquid layouts with a decent max-width should work pretty well I think. The sizes you mention are rather non-standard - 1024x640? Typo? If you need a quick fix, I would suggest using a resolution-dependant layout switcher, google resolution dependant layout for some solutions. Essentially it's a little javascript that switches from one stylesheet to another based on the width of the browser window. The usual caveats about browser size not equal to viewport apply. Just out of curiousity, what device operates at 600x400? I'm assuming it's some kind of hand-held device? Regards, - Rahul. PS: Please do post new questions using a Create Message or whatever your mail client calls it. Otherwise for those of us using message threading, it becomes rather confusing; not to mention I have to manually cut and paste your email from the previous message, as I replied to Darrels response, IMHO, a more correct way than the other. I attach a small screenshot to illustrate what I mean. http://rahulgonsalves.com/dump/threading.gif - R. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css compatible for 600x400 and 1024x640 resolutions
it's typo. I meant 800x600. Thanks everyone for your advices, lots of work ahead apparently to fix this. That's just horrible. Rahul Gonsalves [EMAIL PROTECTED] wrote: Austin, Darrel wrote: Does anyone know of good solutions that I could test and try to make the files compatible for both resolutions (600x400 and 1024x640) ? First of all, don't design for screen resolutions. It's mostly irrelevant. What matters are browser viewport sizes, and that can be anything and everything. Agreed. I have been guilty of designing for specific resolutions for a while, and I am trying to break out of this. Liquid layouts with a decent max-width should work pretty well I think. The sizes you mention are rather non-standard - 1024x640? Typo? If you need a quick fix, I would suggest using a resolution-dependant layout switcher, google resolution dependant layout for some solutions. Essentially it's a little javascript that switches from one stylesheet to another based on the width of the browser window. The usual caveats about browser size not equal to viewport apply. Just out of curiousity, what device operates at 600x400? I'm assuming it's some kind of hand-held device? Regards, - Rahul. PS: Please do post new questions using a Create Message or whatever your mail client calls it. Otherwise for those of us using message threading, it becomes rather confusing; not to mention I have to manually cut and paste your email from the previous message, as I replied to Darrels response, IMHO, a more correct way than the other. I attach a small screenshot to illustrate what I mean. http://rahulgonsalves.com/dump/threading.gif - R. - Get your own web address for just $1.99/1st yr. We'll help. Yahoo! Small Business. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css compatible for 600x400 and 1024x640 resolutions
Mike wrote: I am having nightmares fixing CSS files and HTML pages which were initially designed for a 1024x640 screen resolution. I have been playing around with position:absolute, width:100% etc No luck so far. Does anyone know of good solutions that I could test and try to make the files compatible for both resolutions (600x400 and 1024x640) ? Thanks Pick your poison. Any of these layouts will satisfy your need. Either the 2, or 3col layout on this page: http://www.alistapart.com/articles/negativemargins/ Or these 2, and 3col layouts which use same principle: n.01-n.06 n.13-n.18 n.19-n.22 n.25-n.32 on this page http://blog.html.it/layoutgala/ Best, ~dL PS Avoid absolute positioning as though it was a dread disease-- stick to float based layouts...all will be well :-) . -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css compatible for 600x400 and 1024x640 resolutions
I'm assuming you mean 640x480 and 1024x768. But your goal should be to make pages that work at any (reasonable) resolution, not just a couple of popular ones. The difference is between static and fluid or elastic layout design. There's no one simple solution, but there are several techniques that are helpful. If you post a link to a page that's giving you trouble, we can offer some targeted suggestions. Meanwhile, this article is a good starting point: http://www.alistapart.com/articles/elastic/ It's kind of ironic that the above site requires a 1000 pixel-wide viewport :-) Sorry - just couldn't resist. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css compatible for 600x400 and 1024x640 resolutions
http://www.alistapart.com/articles/elastic/ It's kind of ironic that the above site requires a 1000 pixel-wide viewport :-) Sorry - just couldn't resist. Please do. The amount of comments you get as an author about problems of the site that publishes your stuff is simply staggering. One reason I stopped publishing anything at devarticles.com although they pay for articles. -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
