[thelist] Liquid design in reverse??

VOLKAN ÖZÇELİK volkan.ozcelik at gmail.com
Sun Nov 5 04:08:08 CST 2006

I do a resolution dependent re-styling on my site ( http://tinyurl.com/9zcdu)

Here is basically what I do.

1. create a liquid layout to the best extent I can (using floats)
2. get viewport's width on page load and on resize.
3. use a switch case to append different classes to the elements depending
on the page width.

The solution obviously requires some JavaScript. But it transforms
gracefully if JS is turned off anyway.

I've explained the issue (and more) in my design concept page (
http://tinyurl.com/y852dj )

note that the page is currently in Turkish; but you may find the
illustrations and code snippets self-explanatory.

for the lazies out there:
Actually I have included a zip archive at the end of each step to make the
article easy to follow.
just scan through the page for words "bu zip arşivini" and download each
link one by one.

(p.s. I plan to make an English translation; but I have other issues at

Volkan Ozcelik
+>Yep! I'm blogging! : http://www.volkanozcelik.com/cre8/blog/
+> Going solo in Turkish: http://www.volkanozcelik.com/donkisot/
+> My projects/studies/trials/errors : http://www.sarmal.com/
+> Sardalya JavaScript Library: http://www.sarmal.com/sardalya/

More information about the thelist mailing list