[Web4lib] basic explanations of css layout

[Clinton Lowery]

Ray,

The difference between pixels and percentage equate to a fixed vs a liquid layout.

A window screen has a predetermined amount of pixels available to it in the display area of a browser. For example, a 1028x768 display for a Firefox browser usually nets you 1000-1010 pixels to play with for a fixed layout.

A percentage otoh, is the percentage of the viewable browser window, not the display of the monitor.  For example, a 50% for a width value will display the contained information inside an area comprising 50% of the browser window, regardless of display size (1024x768, 800x600, whatever) as well as the display size of the window (e.g. if you resize your browser window, your 50% width will move with the size of the window as it is resized).

Percentages are encouraged for liquid layouts as even if the majority of your users have 1024x768 displays, there may be many who use 800x600 for whatever reason.  The % width will allow the screen to resize itself for your users, instead of predetermining it for them.

On the other hand, fixed widths are also encouraged for some designers as you want the page to look how you want it to look, regardless of window size.  Many will design for a 800x600 screen that will be centered on a 1024x768 background.

Hope this helps.

Clinton Lowery, MLIS
Jacksonville Public Library (Florida)

"Raumin \"Ray\" Dehghan" <infoscience1 at gmail.com> wrote: Colleagues,

does anybody have any recommendations of books and/or websites that explain css
layout in very simple, straightforward language?

For example, i'm trying to understand why pixels seem to be easier to work
with than percentages, etc.

Thanks very much.

-Raumin "Ray" Dehghan
West Chicago Public Library
West Chicago, Illinois
_______________________________________________
Web4lib mailing list
Web4lib at webjunction.org
http://lists.webjunction.org/web4lib/


       
---------------------------------
Don't let your dream ride pass you by.    Make it a reality with Yahoo! Autos.