Page Layout with CSS

Learning Web Design: Chapter 16

Lesson Overview The three types of page layouts will

be presented: fixed, liquid and elastic Two and three column layouts

templates with floats will be discussed Two and three column layouts using

absolute positioning will be covered Finally, we will present a technique for

centering a fixed-width page

Page Layout Strategies While these things are uncertain…

The precise size of the user’s window The size of text set by the user

There are three general approaches to page layouts that are used : Fixed Liquid Elastic

Fixed Liquid Elastic

Liquid Page Design Liquid layouts are the

default behavior of the normal flow If you do nothing else, the page will adjust

to the size of the user’s window The page area or columns within a

page get wider and narrower to fill space in browser window

Width of content is not controlled Do not use <br /> to force new lines

Creating a Liquid Design

To specify a liquid layout, widths of columns or page are given in percentages There is 100% of the window

available You can also specify no width and the

default will be auto so the element will be the total width possible

Liquid Layout Pros and Cons

Pros: You don’t have to

design for the monitor resolution

Can avoid empty space because text fills the window

Liquid pages keep with the spirit of the Internet

Cons: On large monitors,

line lengths can become difficult to read

Liquid layouts are less predictable

Elements may be too spread out or too cramped at extreme browser dimensions

Optimal Line Length??? The line length is measured in the

number of words or characters in a line of text

The “rule of thumb” is that the optimal line length is 10 to 12 words or between 60 and 75 characters

When a line grows too long, it becomes difficult to read

Line length is at the heart of most debate over which layout type is the best

Example Liquid Layout Each of the three

columns is given a percentage of the window’s width

Left column width=“20%”

Center column width=“50%”

Right columnwidth=“25%

Remaining % given to margins

http://www.w3.org

2 Column Hybrid Liquid Layout

The left column is a fixed width

The right column width is set to auto

As the window resizes, the right column adjusts to fill the remaining space

http://www.csszengarden.com/?cssfile=102/102.css

3 Column Hybrid Liquid Layout

Both the left and right columns are a fixed width

The center column width is set to auto

As the window resizes, the center column adjusts to fill the remaining space

http://www.csszengarden.com/?cssfile=097/097.css

Fixed-Width Layouts

Fixed-width layouts keep a specified pixel width as given by the designer

The width will stay fixed no matter what size the containing element or window takes

Graphic designers used to creating content for print media prefer fixed-width layouts because they can exactly control the look of the finished page

Creating a Fixed-Width Design

Need to pick a page width based on acommon monitor resolution More sites are using the 950 - 1000 pixel width for

1024 screens The entire page content is placed in a wrapper

<div> usually named container or wrapper This container is given a pixel width

corresponding to the fixed-width of the page Margins and padding are also given in pixels

Fixed-Width Pros and Cons

Pros Line width is controlled

for a more readable content area

Fixed width layouts are sometimes easier to style depending on the effect you are after

Some visual designs can only be achieved in a reasonable manner with a fixed width layout.

Cons People with low resolution

monitors may end up with a horizontal scroll bar

A small width site can look too narrow on large screen displays

The narrow width can limit the number of columns

Line lengths may appear too short at very large text sizes

Example Fixed Width Layout

This fixed-width site is left justified (default)

A container <div> is used to provide the fixed-width in pixels

The container wraps both the left and right columns

http://www.csszengarden.com/?cssfile=/212/212.css&page=0

Elastic Layout

With an elastic layout, the main wrapper and other elements are measured using em as the unit of measure

Ems are relative proportionally to the text or font size

As the text size is increased, the sections measured in ems will increase in size as well

Elastic designs can make a site more usable and accessible

Creating an Elastic Layout The key to an elastic layout is the em

unit of measure which is based on the text size.

Using em allows text to be resized with the zoom feature in all modern browsers

Widths of other elements on the page including columns also given in em measurement will also resize as well

How Wide is an Em??? It may be difficult to understand the width of an em This site provides an em measurement tool so you can

increase or decrease the em percentage and see how the ems adjust page width and element widths

http://www.themaninblue.com/experiment/emWidths/

Click to increase %Click to

decrease %

Elastic Layout Pros and Cons

Pros This is a very stable

layout method because everything resizes proportionately

The end result is all page textual content including columns size is proportional to the text

Accessibility can be increased using relative sized fonts

Cons Images don’t lend

themselves to rescaling

Unless limited, this layout method can be a usability disaster as it’ll get wider and wider and wider — without benefit

Example Elastic Layout All text and

elements with width properties use the em unit of measure

As the text grows so does the content area

Line breaks remain the same

http://www.csszengarden.com/?cssfile=http://green-beast.com/portfolio/zen/css/zen.css

Zoom Layouts for Low-Vision

Zoom layouts provide an accessible alternative to low-vision users

Use a single column Extremely large type

using ems for scalability

High-contrast text and background

Simplified navigation at the top of page

http://joeclark.org/access/webaccess/zoom/

Hand Held Layout Advice

Retain a single-column layout Don’t specify font, size, or color Consider hiding or at least moving all

your navigation to the bottom of the page

Don’t do anything special to images They are a known issue in browser software

and you should let these user agents handle images themselves

Zoom vs. Handheld Needs

Conventional Zoom Handheld

No single audience is assumed

Low-vision audience (no personal choice)

Handheld owner (personal choice)

Single - or multicolumn layout

Single – column layout Single – column layoutlayout

No limits on navigation Simple navigation preferred

Navigation eliminated, rewritten by proxy server, or deferred to page end

Any type color Light-on-dark preferredBrowser defaults (usually dark-on-light) preferred

Any type size Large neededBrowser defaults preferred

Which Layout is Best? As you have seen, each layout has its

advantages and drawbacks Most developers rely on their most

used favorites The “best” choice to lay out a page

should consider: the target audience needs the organization needs and the nature of the content

Page Layout Templates The most popular layouts are two and

three column layouts Our textbook provides templates

for the following layouts: Multicolumn layouts using floats Multicolumn layouts using absolute

positioning A centered, floated fixed-width layout

( we will use this in Project 7 & Project 8)

Tips for Using Textbook Code

The <head> markup has been omitted to save space Should include <link> tag for style sheet

Header and footer included in examples but either could be omitted

Background colors and borders can be used during design time to help verify where boxes are located

While templates are provide a framework, they can be modified as needed

Creating Layouts in CSS Use an external CSS file, all formatting for

the page layout should be placed in the .css file

This way, the Web page would just contain the content of the page, and no layout formatting or styling

The external style sheet is linked to the Web page.

This allows the designer to separate presentation from content

Centering Fixed-Width Layouts

Many designers choose to center a fixed-width layout on the page

The following style rules should be added to the container/wrapper id style rule position: relative; default if floating columns width: 950px; give the fixed-width margin-left: auto; auto adjust left margin margin-right: auto; auto adjust right margin

Two-Column Background Problem

When using two-columns in a layout, often one column is longer because it may have more content

If each column has its own background color, the user will see two columns with different heights

How can you make both a left and right column have the same height of background?

Solution:

Provide a background image for a container <div> that includes both columns The image is a horizontal slice that has two

different colored areas or patterns The image will be tiled in the Y direction

according to the longest column The total width of the background image

should be equal to the container fixed-width

Repeat in Y direction

Tiled Two-Column Background

Notice both left and right column backgrounds have the same height

Repeat in Y direction

CSS Layout Summary The three types of page layouts types were

presented: fixed, liquid and elastic Which ever you choose, you should use an

external style sheet to set layout style rules Two –column, fixed-width layout with floats

will be the layout we will use for Project 7 and Project 8

While a fixed-width container defaults to left justification, it can be centered if wanted