Learning Web Design Third Edition- P34 pot

Elastic Layouts Elastic Layouts A third layout approach is growing in popularity because it marries resizable text with predictable line lengths.. As any layout approach, elastic layouts

Trang 1

Elastic Layouts

A third layout approach is growing in popularity because it marries resizable text with predictable line lengths Elastic (also called jello ) layouts expand or contract with the size of the text If the user makes the text larger, the box that contains it expands proportionally Likewise, if the user likes her text size very small, the containing box shrinks to fit The result is that line lengths (in terms of words or characters per line) stay the same regardless of the text size This is an advantage over liquid layouts where line lengths can get too long, and fixed layouts where very large text may result in awkwardly few charac-ters per line.

Figure 16-6 shows the Elastic Lawn design by Patrick Griffiths at CSS Zen Garden ( www.csszengarden.com/?cssfile=/063/063.css ), an often-referenced example of an elastic layout at work Notice that when the text size gets big-ger in each sample, so does the content area of the page However, instead of rewrapping in the larger layout space, the line breaks are the same.

Line length and line breaks stay the same

Figure 16-6 The Elastic Lawn design by Patrick Griffiths at CSS Zen Garden is a classic

example of elastic page layout.

As any layout approach, elastic layouts come with their own pros and cons:

Provide a consistent layout experience while allowing flexibility in text size

Tighter control over line lengths than liquid and fixed layouts

Images don’t lend themselves to rescaling along with the text and the rest of the layout

The width of the layout might exceed the width of the browser window at largest text sizes This can be prevented with proper planning and/or the

max-width property (unsupported in IE6 and earlier)

Elastic Layouts

Patrick Griffiths, the creator of

Elastic Lawn, has written some

good tutorials and demos of elastic

layouts, available here:

“Elastic Designs” article at A List

Apart ( alistapart.com/articles/

elastic)

Elastic layout demo at HTML Dog

(www.htmldog.com/articles/

elasticdesign/demo/)

t I P

Elastic Layouts

Patrick Griffiths, the creator of

Elastic Lawn, has written some

good tutorials and demos of elastic

layouts, available here:

“Elastic Designs” article at A List

Apart ( alistapart.com/articles/

elastic)

Elastic layout demo at HTML Dog

(www.htmldog.com/articles/

elasticdesign/demo/)

t I P

Note

AOL.com also uses an elastic layout (as

of this writing), demonstrating that this

approach is a viable option for large sites

with lots of detailed information on the

home page.

Note

AOL.com also uses an elastic layout (as

of this writing), demonstrating that this

approach is a viable option for large sites

with lots of detailed information on the

home page.

Trang 2

How to create elastic layouts

The key to elastic layouts is the em, a unit of measurement that is based on

size of the text For example, for an element with 12-pixel text, an em is 12

pixels In Chapter 12, Formatting Text , we learned that it is always preferable

to specify font size in ems because it allows the text to be resized with the

zoom feature in all modern browsers (remember that IE6 and earlier do not

zoom text sized in pixels) In elastic layouts, the dimensions of containing

elements are specified in ems as well That is how the widths can respond to

the text size.

For example, if the text size is set to 76% (equal to about 12 pixels on most

browsers), and the page is set to 40 em, the resulting page width would be

480 pixels (40 em x 12px/em) If the user resizes the text up to 24 pixels, the

page grows to 960 pixels Note that this is getting close to the available canvas

space in browsers on 1024-pixel wide monitors If the page were set much

more than 40 ems wide, there would be the risk of the right edge extending

beyond the browser window at extremely large text sizes.

Elastic layouts are created

by specifying widths in em units.

Elastic layouts are created

by specifying widths in em units.

Users who are totally blind may use screen readers to access

web content However, there are many visually impaired users

who have enough vision to view sites on computer monitors as

long as the type is large and the contrast is good

A new layout technique, called zoom layouts (Figure 16-7), has

emerged to address the special requirements of these

low-vision users The hallmarks of zoom layouts include:`

A single column layout

Extremely large type (set in ems for scalability)

High-contrast text and background (both light-on-dark and

dark-on-light versions are often supplied)

Simplified navigation that appears at the beginning of the

document

Some visual elements such as color and simple graphics to

create an experience consistent with that of the site’s normal

presentation

Zoom layouts are usually provided as an alternative to the site’s

normal design They're made accessible to those who need it

via a link at the top of the page

The champion of the zoom layout is accessibility expert,

Joe Clark For more information, these links to Mr Clark’s

publications are a good place to start



The Zoom Layout Page

joeclark.org/access/webaccess/zoom/

Zoom Layout presentation at @media 2005

joeclark.org/atmedia/atmedia-NOTES-2.html

“Big, Stark, and Chunky,” article at A List Apart

alistapart.com/articles/lowvision

Figure 16-7 A zoom layout designed by Doug Bowman at

stopdesign.com.

Zoom Layouts for Low-Vision Users

Trang 3

Page Layout Templates

Which one should I use?

As you can see, each layout approach has its own advantages and drawbacks Developers tend to have their favorites, and if you read through comments left on CSS-design-related web sites, you’ll find that there are some passion-ate opinions for and against each approach (see the sidebar, The Liquid vs Fixed Debate ).

I’m of the opinion that there is no “right” way to lay out all web pages I find that the best solution is usually a function of the nature of content and design

of the site I am working on You will probably find the same thing to be true But now you know the various options and can take them into consideration when it is time to lay out the page

Here it is the section you’ve been waiting for: how to create two- and three-column layouts using CSS and absolutely no tables The code examples in this section should give you a good head start toward formatting your pages, but they are not universal solutions Your content may dictate more compli-cated solutions You may also prefer one of the more robust templates listed

in the More Layout Templates and Tutorials sidebar.

This section provides templates and techniques for the following:

Multicolumn layouts using floats (two- and three-column) Multicolumn layouts using positioning (two- and three-column, with and without footer)

A centered fixed width page

Using the templates

The sample pages in this section aren’t pretty In fact, I’ve stripped them down

to their bare minimum to help make the structure and strategy as clear as possible Here are a few notes regarding the templates and how to use them.

Simplified markup

The DOCTYPE declaration, and other document structure markup (html, head, title, and body elements) have been omitted from the tem-plates to save space Be sure that your documents have the proper struc-tural markup.

Headers and footers

I’ve included a header and footer element on many of these examples, but either one or both could easily be omitted for a minimal two- or three-column layout.

•

The Liquid vs Fixed

Debate

The “liquid or fixed” question has

sparked impassioned debate among

professionals in the web design

community There has been an

undeniable trend toward fixed-width

layouts (presumably to control line

lengths), but there are still staunch

proponents of liquid designs as best

for a medium where the canvas

size is unknown Many designers

from both sides are switching to

elastic layouts as a solid compromise

solution

To get caught up with both sides of

the debate, start with these articles

and blog entries (they all have links

to additional points of view):

“On Fixed vs Liquid Design,” by

Doug Bowman (experimenting

with fixed width design at www.

stopdesign.com/log/2003/12/15/

fixedorliquid.html)

“More on fixed widths,” by Richard

Rutter (pro–liquid design article

at clagnut.com/blog/269/)

“Fixed Fashion,” by Jeremy Keith

(pro–liquid designpost at www.

adactio.com/journal/980)



The Liquid vs Fixed

Debate

The “liquid or fixed” question has

sparked impassioned debate among

professionals in the web design

community There has been an

undeniable trend toward fixed-width

layouts (presumably to control line

lengths), but there are still staunch

proponents of liquid designs as best

for a medium where the canvas

size is unknown Many designers

from both sides are switching to

elastic layouts as a solid compromise

solution

To get caught up with both sides of

the debate, start with these articles

and blog entries (they all have links

to additional points of view):

“On Fixed vs Liquid Design,” by

Doug Bowman (experimenting

with fixed width design at www.

stopdesign.com/log/2003/12/15/

fixedorliquid.html)

“More on fixed widths,” by Richard

Rutter (pro–liquid design article

at clagnut.com/blog/269/)

“Fixed Fashion,” by Jeremy Keith

(pro–liquid designpost at www.

adactio.com/journal/980)



Trang 4

Dominant main column

One thing to be aware of is that all of these examples are based on the

best-case scenario where the main content column is longer than the side

column(s), which of course is not always the case in the real world If your

side columns are longer, you may need to make adjustments or use a

dif-ferent structure altogether.

Color-coding

I’ve included two views of each layout The one on the left is plain and

simple and shows off the potential of the layout In the right view, I’ve

added a garish background color to help you match the markup and style

sheet code with what is happening in the browser The background colors

are also helpful for visualizing the boundaries and placement of element

boxes.

Make it yours

The example style sheets contain the minimum number of rules to create

a flexible and usable page structure There is obviously a lot more that

could be done with text, backgrounds, margins, padding, and borders to

make these pages more appealing Once you’ve laid a framework with

these templates, you should feel free to change the measurements and add

your own styles Values that can be replaced are indicated in italics in the

style sheet examples.

Multicolumn Layouts Using Floats

The most popular way to create a column is to float an element to one side

and let the remaining content wrap around it A wide margin is used to keep

the area around the floated column clear

One of the advantages of floats is that it is easier to start page elements such

as a footer below the columned area of the page The drawback of float-based

layouts is that they are dependent on the order in which the elements appear

in the source Getting the layout effect you are after may result in the

docu-ment source not being in the optimal order for users of non-visual browsers

The templates in this section reveal the general strategy for approaching two-

and three-column layouts using floats and should serve as a good head start

toward implementing your own layouts

More Layout Templates and Tutorials

There are many approaches to creating multicolumn layouts with CSS All layouts have benefits and drawbacks (usually in the form of browser support) To find a template that is right for you and to learn where things are likely to go wrong, I recommend these resources

The css-discuss Wiki has a list of links to two- and three-column layout tutorials These pages are great starting places for more exploration and solutions to layout issues:

css-discuss.incutio.com?page=Th reeColumnLayouts

css-discuss.incutio.com?page=Tw oColumnLayouts

“Creating Liquid Layouts with Negative Margins,” by Ryan Brill, published on A List Apart (www.alistapart.com/articles/

negativemargins/)

“In Search of the Holy Grail,” by Matthew Levine, published by A

List Apart

(www.alistapart.com/articles/

holygrail/)

“In Search of the One True Layout,” by Alex Robinson, published by Position Is

Everything

(positioniseverything.net/articles/ onetruelayout/)

“3 Column All CSS Layout,” by Ben Hirsch, published on the Shadow Fox Network

( www.shadow-fox.net/tutorial/3- Column-All-CSS-Layout-With-Fluid-Center-and-Two-Columns)



O n l I n e R e S O U R c e S

More Layout Templates and Tutorials

There are many approaches to creating multicolumn layouts with CSS All layouts have benefits and drawbacks (usually in the form of browser support) To find a template that is right for you and to learn where things are likely to go wrong, I recommend these resources

The css-discuss Wiki has a list of links to two- and three-column layout tutorials These pages are great starting places for more exploration and solutions to layout issues:

css-discuss.incutio.com?page=Th reeColumnLayouts

css-discuss.incutio.com?page=Tw oColumnLayouts

“Creating Liquid Layouts with Negative Margins,” by Ryan Brill, published on A List Apart (www.alistapart.com/articles/

negativemargins/)

“In Search of the Holy Grail,” by Matthew Levine, published by A

List Apart

(www.alistapart.com/articles/

holygrail/)

“In Search of the One True Layout,” by Alex Robinson, published by Position Is

Everything

(positioniseverything.net/articles/ onetruelayout/)

“3 Column All CSS Layout,” by Ben Hirsch, published on the Shadow Fox Network

( www.shadow-fox.net/tutorial/3- Column-All-CSS-Layout-With-Fluid-Center-and-Two-Columns)



O n l I n e R e S O U R c e S

Trang 5

Two-column with footer Method: FLOAT

Layout: LIQUID

The markup and styles in this example produce a liquid two-column layout with a header area, a main column of content, a sidebar, and footer for copy-right information as shown in Figure 16-8

Aqua box indicates floated “main” div

Footer appears at the bottom of the content (not at the botom of the browser window)

Figure 16-8 Two-column layout with footer.

The Markup

Masthead and headline

</div>

A <div id="main">

Main article

</div>

List of links and news

</div>

Copyright information

</div>

Markup Notes:

The source document has been divided into four divs, one each for the header, content, extras, and footer

Trang 6

The main content appears before the extras in the source document so

that it is accessed first by users with non-graphical browsers That means

that we can’t float the “extras” div because it will not float above the

pre-ceding block element to the top of the page Instead, the main content div

is floated and the following text (the “extras” div) wraps around it.

The Style Sheet

#header {

background: #CCC;

padding: 15px; }

B #main {

background-color: aqua;

float: left; /* floats the whole main article to the left */

width: 60%;

margin-right: 5%; /* adds space between columns */

margin-left: 5%; }

C #footer {

clear: left; /* starts the footer below the floated content */

padding: 15px;

background: #CCC; }

D #extras {

margin-right: 5%} /* space on the right of the side column */

E body {

font-family: verdana, sans-serif;

margin: 0; /* clears default browser margins */

padding: 0; }

li {

list-style: none;

margin: 10px 0; }

Style Sheet Notes:

The main content div is floated to the left and set to 60% of the page

width A margin is applied to the left and right sides of the floated “main”

div to add space between columns.

The “footer” div is cleared (with the clear property) so that it starts

below the floated main content column.

A margin is added on the right edge of the “extras” div to add space

between it and the browser window.

The margin and padding on the body element have been set to zero to

clear the default browser settings This allows the shaded header and

footer areas to go right up to the edge of the browser window without

any white gaps

A�

B�

C�

D�

E�

Trang 7

Three-column with footer Method: FLOAT

Layout: FIXED

This example uses floated elements to create a fixed-width three-column lay-out (a main content column flanked by left and right sidebars) with optional header and footer ( Figure 16-9 )

Figure 16-9 Three-column layout using floats.

A <div id="container">

Masthead and headline

</div>

B <div id="links">

List of links

</div>

Main article

</div>

News and announcements

</div>

Copyright information

</div>

</div>

All of the content elements in the docu-ment have been placed in a “container”

div to which the fixed-width measure-ment will be applied

Remember that with floating, the order that the elements appear in the source document is significant To get the narrow sidebars on either side of the content, I needed to move the “links”

div before the “content” div to keep the style sheet straightforward There are methods that allow the content to appear in any order, but they tend to get complicated The last three

resourc-es listed in the More Layout Templates and Tutorials sidebar address this issue.

A�

B�

Trang 8

The Style Sheet

#container {

width: 750px;

C border: solid 1px; }

#header {

background: #CCC;

padding: 15px; }

background-color: fuchsia;

float: left;

E width: 175px; }

D #main {

background-color: aqua;

float: left;

E width: 400px; }

D #news {

background-color: green;

float: left;

E width: 175px; }

F #footer {

clear: both; /* starts the footer below the floated content */

padding: 15px;

background: #CCC; }

body {

font-family: verdana, sans-serif;

font-size: small;

margin: 0;

padding: 0;}

G h2, ul, p {

padding: 0px 8px; } /* adds space around content */

li {

list-style: none;

margin: 10px 0; }

Style Sheet Notes

A border has been added to the container to reveal its edges in this

dem-onstration, but it can easily be removed.

The style sheet floats the “links” “main,” and “news” divs to the left The

result is that they accumulate against the left edge of the containing

block, thus creating three columns

Because there are no padding, border, or margin settings for each floated

ele-ment, the sum of their widths is equal to the width of the outer container

The clear: both property has been added to the footer to make sure it

starts below all of the floated elements.

Space within each content div is added by applying padding on the

ele-ments it contains (h2, ul, p, etc.)

C�

D�

E�

F�

G�

Trang 9

Now it’s your turn to give it a try In Exercise 16-1 , you’ll use the same content

to create a hybrid of the previous examples: a two-column, fixed-width layout using floats

exercise 16-1 | Float-based Layout

In this exercise, we’ll create the fixed-width layout shown in Figure 16-10 The

source document for this exercise, olympus.html, is available online at www.

learningwebdesign.com/materials/ It contains the basic markup and the start of the style sheet for all the exercises in this chapter

Open olympus.html in your text editor and save it as a new file called olympus-2col.html (that will keep a copy of the starter document fresh for the next

exercise) We’ll start by getting the markup all set Because this is a fixed-width layout, wrap all of the content (from the first h1 to the end of the last paragraph)

in a div identified as the “container” (with the id attribute) just as we did in the three-column template earlier Be sure to include the closing </div> tag

Next, add divs that identify the four content sections Name them “header,” “main,”

“extras,” and “footer.” Note that the “extras” div in this example contains both Links and News

1

2

Figure 16-10 Two-column, fixed-width

layout.

With the markup in place, you can move on to the style sheet The style element and some basic text formatting rules have been added for you Apply a width to the container div This sets the width of the page area Also, apply a border to make the boundaries of the page area clear (you can always remove it later)

#container { width: 750px;

border: 1px solid; }

Next, let’s make the header and footer stand out Give them some padding and a light background color I’m using gray, but you can use any color you like

#header { padding: 15px;

background: #CCC; }

#footer { padding: 15px;

background: #CCC; }

Now give the main content div a width and float it to the right to make the second column,

#main {

float: right;

width: 550px; }

and clear the footer so it appears below the floated content,

#footer {

clear: both;

padding: 15px;

background: #CCC; }

3

4

5