Introducing CSS Layout C HAPTER 11

T YPES OF W EB P AGE L AYOUTS  Fixed width  Most control over how your design looks  Can inconvenience some of your visitors Small monitors cause much scrolling Large monitors end up with wasted space  Liquid  Grow or shrink to fit the browser window  Elastic  Combination of the advantages of both designs

F IXED W IDTH  Regardless of the browser window, the content’s width remains the same  Sometimes the design can cling to the left edge or the window or (more common) center in the middle  Usually below 1,000 px wide  Causes the use of scroll bars  Most common width is 960  Most websites are fixed width  Example: NY TimesNY Times

L IQUID  Page gets wider or narrower as your visitor resizes the window  Makes the best use of the browser real estate  More challenging to make the design look good at the various sizes  On a very large monitor, the design looks ridiculously wide and difficult to read  Example: Google MapsGoogle Maps

E LASTIC  A fixed-width design with a twist—type size flexibility  You define the width using em values  An em changes size when the browser’s font size changes  Design’s width ultimately based on the browser’s base font size  It is almost like “zooming in”  Falling out of favor because the newer browser versions replaced the “increase text size” command with a “page zoom” command.  Thus, Ctrl + enlarges everything on the page

DIV TAG  Layout involves putting chunks of content into different regions of the page  DIV tag is the most common element used to do this  Has not inherent formatting properties  It represents a logical grouping of elements or divisions on a page  i.e., logo, banner, navigation bar, other DIV tags,  Use Class or ID names to identify your DIV tags

D ELICATE B ALANCING A CT  Don’t go crazy with DIVs  A common trap is to believe you must wrap everything on a web page in a tag.  Nav bar an unordered list, no, the tag is best as long as it contains the main navigation bar links, just add an ID to the tag  Want to use a pullquote: use the HTML tag. Positioned and floated, it works better than a tag.

T ECHNIQUES FOR CSS L AYOUT