[web] Resolution Support

Started by
2 comments, last by Fuzztrek 19 years, 7 months ago
Hello, I've seen many sites use this cool trick and I'd like to integrate it in my site. GameDev does it, CNet does it, practically any professional site does it - it supports many resolutions. I have two monitors, and out of curiosity, I stretched GameDev across both of them to see what happens. Well, nothing gets messed up, the site doesn't become ugly; the contents sort of swap themselves according to the size of the screen to a position that makes sense. Is that a script? How is it done? CNet, on the other hand, stays the same size, but the whole site centers itself when you stretch the window. It gives a nice empty margin to look at, but the contents center themselves, and that's quite handy for multi-resolution support. Is that a script? I want it! ROAR!
.:<<-v0d[KA]->>:.
Advertisement
They intermix sizes as percentages & fixed values i believe.
Yep, as he said 'width=100%;' sort of thing for containers and avoiding fixed widths whenever possible.

Jay
The buzz word for this technique is "fluid" or "liquid layouts" - content that flows inside the structure of its container.

If you are using a table-base layout (as Gamedev does) you can simply use percentages along with fixed widths and heights to create a liquid layout.

Creating fluid layouts in CSS is a little more complicated but more correct. For examples and tutorials on how to create these types of layouts, see CSS Layout Techniques: for Fun and Profit @ glish.com and Little Boxes" @ thenoodleincident.com.

This topic is closed to new replies.

Advertisement