Post on 30-Dec-2015
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