views:

78

answers:

2

If I mark all my divs in percent, they fill up all the space nicely. I am facing 2 problems:

a) Image sizes: How do I define image sizes so that they do not become larger or smaller than wanted as the window resizes

b) Font sizes: How do I make the font size increase or decrease based on resolution - should this be done at all? (The problem I face is that the text becomes illegible at very high resolutions)

Please point me to a good reference on how to make liquid layouts.

+2  A: 

Regarding point b) it is, IMHO, good practice to use relative font sizes, rather than absolute ones, so that the fonts are sized compared to the browsers base settings (I'm guessing, from your problem, that you are using point or px sizes, yes?). You have the heading tags, of course, but you also have the font-size CSS attribute and the ability to size fonts in % or ems. You have hit one good reason to use relative sizes - on high res monitors this can make absolute-sized fonts unreadable (I have seen, in the old days when 14" 800x600 monitors were standard, a website that rendered to about the size of a matchbox on a high-res 21" monitor). There also the issue of "politeness" and accessibility - the user may have set their browser base-font size larger or smaller because of personal preference and/or accessibility issues, and to override this to an arbitrary size doesn't seem, to me, to be a good idea.

have a read on the font-size section of this page: http://www.w3schools.com/css/css_font.asp

If you need some actual examples then please post a bit of your code and CSS.

Mad Halfling