Tutorial 7
Creating Liquid
Layouts
INTRODUCTORY
Objectives
XP
• Discern the differences among various types of
layouts
• Create a liquid layout
• Create a nested div
• Conform the footer width to the main column
width
New Perspectives on Blended HTML, XHTML, and CSS
2
Objectives
•
•
•
•
XP
Create a three-column layout
Modify the layout width
Create print styles
Link a file to a print style sheet
New Perspectives on Blended HTML, XHTML, and CSS
3
Creating a Two-Column Liquid
Layout
XP
• Must decide between a portrait or landscape
orientation
• A liquid layout is a design that expands or contracts in
proportion to the size of the user’s viewport
– Measurements are specified using percentages
• In an elastic layout, em values are used instead of
percentage values
• In a hybrid layout, part of the content may have a liquid
layout, and the remainder has a fixed-width layout
New Perspectives on Blended HTML, XHTML, and CSS
4
Creating a Two-Column Liquid
Layout
New Perspectives on Blended HTML, XHTML, and CSS
XP
5
Creating a Two-Column Liquid
Layout
XP
• To create a two-column liquid layout:
– Decide the width (in percentages) of the narrower of the two
columns. Generally, the sidebar column is narrow and the main
column is wide.
– Decide whether you want the sidebar column to appear on the left
or the right
– In the style sheet, enter the code for the sidebar and main id
selectors. Assign a width (as a percentage) to the sidebar column.
Do not assign a width to the main column
– In the document body, enter start and end div tags for the sidebar
and main divs
– If you are not floating all the id selectors, change the source order
so that the floated content appears before nonfloated content
– If necessary, change the margins and cellpadding of your columns
New Perspectives on Blended HTML, XHTML, and CSS
6
Creating a Two-Column Liquid
Layout
New Perspectives on Blended HTML, XHTML, and CSS
XP
7
Creating a Two-Column Liquid
Layout
New Perspectives on Blended HTML, XHTML, and CSS
XP
8
Creating a Two-Column Liquid
Layout
XP
• To reposition the sidebar column, change the float
property to right, and change the margin-left property
to margin-right
New Perspectives on Blended HTML, XHTML, and CSS
9
Creating a Two-Column Liquid
Layout
XP
• Using styles to create a horizontal navbar from an
unordered list
New Perspectives on Blended HTML, XHTML, and CSS
10
Creating a Two-Column Liquid
Layout
XP
• Creating a hover effect and a footer
– The hover effect changes the appearance of an
element when your mouse hovers over it
New Perspectives on Blended HTML, XHTML, and CSS
11
Creating Nested Divs
XP
• A nested div is a div within another div
– Used previously to create a structure with container
and wrapper divs
New Perspectives on Blended HTML, XHTML, and CSS
12
Creating Nested Divs
New Perspectives on Blended HTML, XHTML, and CSS
XP
13
Creating Three-Column Liquid
Layouts
XP
• Create a style for the universal selector to zero out
padding and margins for all elements
• Style the body element
New Perspectives on Blended HTML, XHTML, and CSS
14
Creating Three-Column Liquid
Layouts
XP
• Enter the code and styles for the header and navbar
– If necessary create a hover effect for the navbar
New Perspectives on Blended HTML, XHTML, and CSS
15
Creating Three-Column Liquid
Layouts
XP
• To create a three-column liquid layout:
– Decide on the width (in percentages) for each of the
narrower two sidebar columns
– Decide how you want the sidebar columns to float
– In the style sheet, enter the code for the sidebar and
main id selectors. Assign widths to both sidebar
columns. Do not assign a width to the main column
– In the document body, enter start and end div tags
for the sidebars and the main divs
– If necessary, change the source order so that the
floated content appears before nonfloated content
New Perspectives on Blended HTML, XHTML, and CSS
16
Creating Three-Column Liquid
Layouts
New Perspectives on Blended HTML, XHTML, and CSS
XP
17
Creating Three-Column Liquid
Layouts
New Perspectives on Blended HTML, XHTML, and CSS
XP
18
Modifying the Layout Width
XP
• Add a start div tag for the container, just below the start
body tag, and an end div tag just above the end body
tag
• Style the container id selector
New Perspectives on Blended HTML, XHTML, and CSS
19
Modifying the Layout Width
New Perspectives on Blended HTML, XHTML, and CSS
XP
20
Using Print Styles
XP
• A print style is a style designated to create output for
printed copy
• To create print styles:
– Change the text color to black and the background color
to white
– Specify a font size in points
– Specify the font family as a serif font
– Style the navbar, banner, and images to have a display
property value of none
– Set the line height to 120% or greater
– Use the @page rule to set the page size and margin
New Perspectives on Blended HTML, XHTML, and CSS
21
Using Print Styles
New Perspectives on Blended HTML, XHTML, and CSS
XP
22