Layouts with CSS Layouts with CSS

Web Design – Section 4-12Web Design – Section 4-12Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

ObjectivesObjectives

The Student will:Demonstrate a basic understanding of

CSS positioning principles.Identify whether a web page uses fixed

or liquid layoutApply CSS positioning to align elements

into two columns on your web page.Position elements using both relative

and absolute positioning

The Student will:Demonstrate a basic understanding of

CSS positioning principles.Identify whether a web page uses fixed

or liquid layoutApply CSS positioning to align elements

into two columns on your web page.Position elements using both relative

and absolute positioning

Page Layout OverviewPage Layout Overview

In the early days of the Web, pages were displayed in a single column.  Designers quickly started looking for ways to

make web pages look more like print media such as newspapers and magazines.

One of these designers discovered that the <table> element could be used to display content in multiple columns. 

The idea quickly took off and most web pages throughout the late 1990's used tables for layout.

In the early days of the Web, pages were displayed in a single column.  Designers quickly started looking for ways to

make web pages look more like print media such as newspapers and magazines.

One of these designers discovered that the <table> element could be used to display content in multiple columns. 

The idea quickly took off and most web pages throughout the late 1990's used tables for layout.

Page Layout OverviewPage Layout Overview

CSS Code: Cascading style sheets (CSS) had been

around since 1996, when the first CSS specification was published. However, it took a while for browsers to support CSS.

The CSS 2 specification was published in 1998, more browsers began to support it, and more web designers began using it.

Nowadays virtually all web designers use CSS for page layout

CSS Code: Cascading style sheets (CSS) had been

around since 1996, when the first CSS specification was published. However, it took a while for browsers to support CSS.

The CSS 2 specification was published in 1998, more browsers began to support it, and more web designers began using it.

Nowadays virtually all web designers use CSS for page layout

Page Layout OverviewPage Layout Overview

CSS Avantages: CSS layout has important advantages over

table-based layout. It requires relatively little code, which translates

to smaller file sizes and faster downloads. Less code also makes the page easier to update

and maintain. Pages that use CSS for layout can adjust better to

the size of the user's display

CSS Avantages: CSS layout has important advantages over

table-based layout. It requires relatively little code, which translates

to smaller file sizes and faster downloads. Less code also makes the page easier to update

and maintain. Pages that use CSS for layout can adjust better to

the size of the user's display

Fixed Width DesignFixed Width Design

One approach to designing a web page is to define a specific page width in pixels:

body { width: 1000px; margin: 0 auto; border: thick solid black; padding: 1em; }

You can recognize fixed width designs on the web by resizing your browser window when viewing a web page. If the content remains the same width when you resize your window, it's a fixed width design.

One approach to designing a web page is to define a specific page width in pixels:

body { width: 1000px; margin: 0 auto; border: thick solid black; padding: 1em; }

You can recognize fixed width designs on the web by resizing your browser window when viewing a web page. If the content remains the same width when you resize your window, it's a fixed width design.

Fixed Width DesignFixed Width Design

The problem with a fixed width design is that one size really doesn't fit all. A fixed design may be perfect for a few users, but

for many user's it's either too wide or too narrow, depending on their screen resolution.

However, a fixed width design may still be the best choice if your design includes graphics. Since graphics are a fixed size, you know exactly how wide you need your page to be in order to hold those graphics. If the width is too small, the graphics will overflow the boundaries of their containers.

The problem with a fixed width design is that one size really doesn't fit all. A fixed design may be perfect for a few users, but

for many user's it's either too wide or too narrow, depending on their screen resolution.

However, a fixed width design may still be the best choice if your design includes graphics. Since graphics are a fixed size, you know exactly how wide you need your page to be in order to hold those graphics. If the width is too small, the graphics will overflow the boundaries of their containers.

Fluid DesignFluid Design

A fluid design, also known as  liquid design, is a design in which the width is defined using percentages or em's, or not defined at all. With this type of design, the content automatically flows

and repositions itself to fit the user's browser window. This type of design forces designers to be more flexible,

and not be attached to their page having the same exact layout for all users.

It acknowledges the differences between users' technologies, and tries to deliver content in a way that works best for that user's settings.

A fluid design, also known as  liquid design, is a design in which the width is defined using percentages or em's, or not defined at all. With this type of design, the content automatically flows

and repositions itself to fit the user's browser window. This type of design forces designers to be more flexible,

and not be attached to their page having the same exact layout for all users.

It acknowledges the differences between users' technologies, and tries to deliver content in a way that works best for that user's settings.

Fluid DesignFluid Design

 Example - The following code defines the width of your body to be 70% of the browser window. If you expand or contract the size of your browser window, the size of your body changes accordingly:

body { width: 70%; margin: 0 auto; border: thick solid black; padding: 1em; }

 Example - The following code defines the width of your body to be 70% of the browser window. If you expand or contract the size of your browser window, the size of your body changes accordingly:

body { width: 70%; margin: 0 auto; border: thick solid black; padding: 1em; }

Fluid DesignFluid Design

The problem with a fluid design is if you have images that are say, 800 pixels wide, and those are inside a container that's only 720 pixels wide, the images will overflow their container.

That isn't necessarily a problem though, because images can be fluid too. The following code will prevent images from exceeding their boundaries—if a container is too small to hold an image, the image will be resized to fit:

img { max-width: 100%; }

The problem with a fluid design is if you have images that are say, 800 pixels wide, and those are inside a container that's only 720 pixels wide, the images will overflow their container.

That isn't necessarily a problem though, because images can be fluid too. The following code will prevent images from exceeding their boundaries—if a container is too small to hold an image, the image will be resized to fit:

img { max-width: 100%; }

Hybrid Fixed/Fluid Design

Hybrid Fixed/Fluid Design

One strategy that captures the strengths of both fixed and fluid design is to use a fluid design, but if there's a width below which your design starts to fall apart, you can set a min-width property that requires the width to be at least a fixed number of pixels.

One strategy that captures the strengths of both fixed and fluid design is to use a fluid design, but if there's a width below which your design starts to fall apart, you can set a min-width property that requires the width to be at least a fixed number of pixels.

Hybrid Fixed/Fluid Design

Hybrid Fixed/Fluid Design

For example, the following code is the same as the fluid design example above, but the design stops flowing at 720 pixels—it won't get any more narrow than that.

body { width: 70%; min-width: 720px; margin: 0 auto; /* horizontal

center */ border: thick solid black; padding: 1em; }

For example, the following code is the same as the fluid design example above, but the design stops flowing at 720 pixels—it won't get any more narrow than that.

body { width: 70%; min-width: 720px; margin: 0 auto; /* horizontal

center */ border: thick solid black; padding: 1em; }

Rest of TodayRest of Today

Download Homework 4-12 from the web site. You have 2 days to complete this but it is a lot of work.

You will need to submit Google docs homework and show me your web page.

There is reading involved – DO IT!

Download Homework 4-12 from the web site. You have 2 days to complete this but it is a lot of work.

You will need to submit Google docs homework and show me your web page.

There is reading involved – DO IT!

Your Web Page should look something like:

Your Web Page should look something like: